Next.js configuration

Next.js configuration and resources

view on github

Configure ESLint for Next.js

# Next recommendations are :
# - Set their config as the last to be extended in .eslintrc.json
# - Let their config assume options such as parser configuration etc ... details to be investigated if required
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks @next/eslint-plugin-next @mulekick/eslint-config-muleslint

Configure Sass for Next.js

# Despite Next recommendations, I favor global styles import over css modules
# However, this requires exporting an app wrapper component from pages/_app.js and manage global styles import there
npm install --save-dev sass

Configure Sharp for Next.js

# Installing sharp (required for image optimization using next/image) from the start is a best practice imho
# It is mandatory for server-side image optimization if the app exports as a standalone bundle
# It will be resolved out of the dependency graph if the app exports as a static HTML website
npm install --save sharp

Next.js polyfills fetch() on both the client and server. You don't need to import it.

Next.js styling

  • Supported options for styling are either global styling, css modules or direct styling of JSX components
  • Sass is supported for css modules design through the use of the *.module.scss extension
  • It's good to note that css modules allow using the same CSS classes in different files without worrying about class name collisions ... This is because CSS modules automatically generate unique classes names.
  • Also, the default built-in postcss config for Next.js seems to be rather decent

Next.js docs