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

published: 2021/6/28 update: 2021/7/1

Table of Contents

TL;DR

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

基本

next.config.js
module.exports = {}

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

redirect

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

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

webpack

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

Next.jsのversionを11.0.0にすると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.

なので、読み込まないようにしているだけ?実際、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

    基本

    redirect

    webpack


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

ofuse
Privacy Policy

Copyright © illumination-k 2020-2021.