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

published: 2021/6/28 update: 2021/9/29

Table of Contents

TL;DR

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

基本

next.config.js
module.exports = {}

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

reactStrictMode

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

redirect

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

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

assetPrefix

JavaScriptとCSSを読み込む先を変える。DEFAULTでは、/_next/static/を読みに行くが、以下の例では、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

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

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

root (/) 以外のパスを使うときなどにも使用できる。例えば、basePathpublicRuntimeConfigで設定すれば、以下のように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

webpack

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

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

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

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'とかを使った方が妥当な可能性もある。

記事に間違い等ありましたら、お気軽に以下までご連絡ください

E-mail: illumination.k.27|gmail.com ("|" replaced to "@")

Twitter: @illuminationK

当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse

Other Articles

Site Map

Table of Contents

    TL;DR

    基本

    reactStrictMode

    redirect

    assetPrefix

    publicRuntimeConfig, serverRuntimeConfig

    webpack


当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse
Privacy Policy

Copyright © illumination-k 2020-2021.