Next.js Tips & Tricks

Setting up new yarn nextjs project

yarn create next-app my-app     # Create new project my-app
yarn install                    # Install all dependencies
yarn dev                        # Run development server
yarn add lodash                 # Add new package
yarn remove lodash              # Remove a package

Depends on what version your on. For 12 next/future/image and 13 here's a fun trick:

<Image
  alt={altText}
  src={url}
  height={imageHeight}
  width={imgeWidth}
  style={{ height: 'auto', objectFit: 'contain', position: 'relative' }}
/>

This will keep the image inside of it's parent element and keep it responsive. No need to do anything else with the parent. But to keep images from getting to big and looking OK on the page, I do something like this:

<div style={{ margin: 'auto', maxWidth: '500px' }}>
  <Image
    alt={altText}
    src={url}
    height={imageHeight}
    width={imgeWidth}
    style={{ height: 'auto', objectFit: 'contain', position: 'relative' }}
  />
</div>

iamshubhamjangle/next13-tips.md