next.config.jsで設定することのまとめ

TL;DR

next.jsを使っているとnext.config.jsを使って設定をカスタマイズすることが多いです。next.config.jsで設定できることと、その設定の仕方についてまとめておきます。

基本

module.exports = {}

のようにconfigをオブジェクト形式でエクスポートする。

reactStrictMode

Strict Modeを使用でき、嬉しい。

redirect

リダイレクトの設定をかける。redirects関数を定義して、設定を書いた配列を返す。

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

assetPrefix

JavaScriptとCSSを読み込む先を変える。DEFAULTでは、/_next/static/を読みに行くが、以下の例では、https://cdn.mydomain.com/_next/static/を読み込みにいく。

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

• CDN Support with Asset Prefix

publicRuntimeConfig, serverRuntimeConfig

getConfigを使うことで、ページやコンポーネントで使いたい変数を定義できる。2種類の使い分けは以下。

• publicRuntimeConfig: Server or Client
• serverRuntimeConfig: Server only

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',
  },
}

root (/) 以外のパスを使うときなどにも使用できる。例えば、basePathをpublicRuntimeConfigで設定すれば、以下のようにLinkコンポーネントを定義できる。

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

• Runtime Configuration
• Deploy your NextJS Application on a different base path (i.e. not root)

webpack

webpackのwebpack.config.js的な話ができる。configがwebpackのconfigオブジェクトのような感じ。

Next.jsのversionを11.0.0にするとwebpack5が基本的に使われるようになる。この辺はwebpack5に真偽値を入れることで設定できる。 また、webpack5からエイリアスが自前で設定できるようになっている。

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,
}

webpack5にしたとき、

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

というエラーが出て困っていたが、このissueのとおりに

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

にしたら治った。治ったが、webpack5のドキュメント読むとfallbackの機能は

Redirect module requests when normal resolving fails.

なので、読み込まないようにしているだけの可能性がある。next buildは動くので多分大丈夫問題ないと思われるが、target: 'node'とかを使った方が妥当な可能性もある。