【初心者向け】next.config.js とはなにか？

はじめに

本記事は、next.js初心者が備忘のために書いている記事になります
next.config.js って一体なんだ？というレベル感からスタートしています

公式情報

日本語サイトがあります。（大変ありがたい）

Next.js の高度な動作をカスタマイズするには、プロジェクトディレクトリのルートに next.config.js か next.config.mjs を作成します

next.config.js は通常の Node.js モジュールであり JSON ファイルではありません。 Next.js サーバーとビルドフェーズで使用され、ブラウザのビルドには含まれません。

シンプルな next.config.jsを作ってみる

試しに、React StrictMode、Next.js が公式提供のバンドルアナライザを含めました。

なお、バンドルアナライザを有効化する場合は、ビルド時に以下のコマンドを実行する必要があります。

ANALYZE=true next build

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true', // 環境変数 `ANALYZE` が 'true' の場合にバンドルアナライザを有効化
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, // Reactの厳密モードを有効化
};

module.exports = withBundleAnalyzer(nextConfig);

最後に

webpack.config.jsの設定もできますが、webpackは未履修なので今後習得していきます。