🚀

【Next.js和訳】API Reference/next.config.js/Introduction

1 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、next.config.js/Introductionの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

next.config.js

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

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

次のnext.config.jsの例を見てみましょう。

/**
 * @type {import('next').NextConfig}.
 */
const nextConfig = {
  /* コンフィグ・オプションはここに */
}
module.exports = nextConfig

また、関数を使うこともできます。

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* コンフィグ・オプションはここに */
  }
  return nextConfig
}

phaseは、コンフィグレーションがロードされる現在のコンテキストです。利用可能なフェーズを見ることができます。フェーズはnext/constantsからインポートできます。

const { PHASE_DEVELOPMENT_SERVER } = require("next/constants")

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* 開発専用のコンフィグオプションをここに設定 */
    }
  }

  return {
    /* 開発以外の全てのフェーズの設定オプションをここに入れる */
  }
}

コメントされた行は、このファイルで定義されているnext.config.jsで許可されているコンフィグを置く場所です。

ただし、どのコンフィグも必須ではありませんし、それぞれのコンフィグの機能を理解する必要もありません。代わりに、有効化や変更が必要な機能をこのセクションで検索すると、何をすべきかが示されます。

対象となる Node.js のバージョンで利用できない新しい JavaScript の機能を使用することは避けてください。next.config.jsは、Webpack、Babel、TypeScript では解析されません。

Discussion

ログインするとコメントできます