Summary of next.config.js Settings

TL;DR

When using Next.js, you often customize settings with next.config.js. This article summarizes what can be configured in next.config.js and how to set it up.

Basics

next.config.js

module.exports = {}

Export the config as an object like above.

reactStrictMode

Enables Strict Mode, which is nice.

redirect

You can configure redirects. Define a redirects function that returns an array of redirect configurations.

next.config.js

module.exports = {
    async redirects() {
        return [
            {
                source: "/test",
                destination: "/",
                permanent: true,
            }
        ]
    }
}

assetPrefix

Changes where JavaScript and CSS are loaded from. By default, it loads from /_next/static/, but in the example below, it loads from https://cdn.mydomain.com/_next/static/.

next.config.js

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: 'https://cdn.mydomain.com',
}

publicRuntimeConfig, serverRuntimeConfig

By using getConfig, you can define variables to use in pages and components. The two types differ as follows:

  • publicRuntimeConfig: Server or Client
  • serverRuntimeConfig: Server only

next.config.js

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}

This can also be used when using paths other than root (/). For example, if you set basePath in publicRuntimeConfig, you can define a Link component as follows:

import NextLink, { LinkProps } from 'next/link'
import { format } from 'url'
import getConfig from 'next/config'

const { publicRuntimeConfig } = getConfig()

const Link: React.FunctionComponent<LinkProps> = ({ children, ...props }) => (
  <NextLink
    {...props}
    as={`${publicRuntimeConfig.basePath || ''}${format(props.href)}`}
  >
    {children}
  </NextLink>
)

export default Link

webpack

You can configure webpack similar to webpack.config.js. The config parameter works like webpack's config object.

Updating Next.js to version 11.0.0 makes webpack5 the default. This can be configured by setting webpack5 to a boolean value. Also, starting from webpack5, you can set aliases manually.

next.config.js

module.export = {
    webpack(config, options) {
      config.resolve.alias['@component'] = path.join(__dirname, "component");
      config.resolve.alias['@libs'] = path.join(__dirname, "libs");
      config.resolve.fallback = {"fs": false};
      return config
    },

    webpack5: true,
}

When switching to webpack5, I was stuck on this error:

error - ./node_modules/fs.realpath/index.js:8:0
Module not found: Can't resolve 'fs'

Following this issue, I set:

module.exports = {
    ...
    resolve: {
        fallback: {
            ...config.resolve.fallback,
            "fs": false
        },
    }
}

and it was fixed. However, looking at the webpack5 documentation, the fallback feature is:

Redirect module requests when normal resolving fails.

So it might just be preventing the module from loading. Since next build works, it's probably fine, but using target: 'node' might be a more appropriate solution.

Create an issue on GitHub about this article

Read Next