こんなあなたにピッタリな記事👇
next.config.jsを見たことはあるけど触ったことがない- 「設定ファイルって何のためにあるの？」とモヤモヤしている
- よく使う設定だけピンポイントで知りたい
がまぁまぁわかります！
困ってた自分に届けたい話
Next.jsでWebアプリを作っていると、見かける next.config.js というファイル。
「設定って何をどうすればいいの？」
「これはなんのファイル？」
「書かないとダメ？」
触らなくても動くから、触らずそっとファイル閉じた。
そんな自分が恥ずかしかったため、今回調査しました。
この記事は、同じように困っていた方への備忘録兼シェアとして書いています。
next.config.jsとは？
next.config.js は、Next.jsアプリ全体の動作やビルド設定をカスタマイズするためのファイルです。
プロジェクトのルートに配置し、Next.jsの起動時に読み込まれます。
主な用途の例
- 外部ドメインの画像を許可する
- URLのリダイレクトやリライトを設定する
- Reactの開発用チェックを有効にする
つまり、「Next.jsアプリのグローバルな設定」をまとめる場所です。
初期状態の next.config.js（TypeScriptプロジェクトの場合）
TypeScriptでNext.jsプロジェクトを作った直後は、次のような初期状態になっています。
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;これは「設定内容はここに書いてね」という意味です。
設定がなければデフォルトの動作で進みます。必要になったら書き足すスタイルでOKです。
デフォルト設定の内容
NextConfig：設定の書き間違いを防ぐためのヒントを出してくれる型nextConfig：いろんな設定項目をこの中に追加できるexport default：Next.jsに読み込ませる
よく使うNext.jsの設定3選（2025年版）
設定ファイルにいろいろ書けるのは事実ですが、実際に現場でよく使われているのは以下の3つです。
① 外部画像のURLを許可する（images）
images: {
domains: ["images.unsplash.com"],
}Next.jsの <Image /> コンポーネントで外部サイトの画像（CDNなど）を使いたいときは、その画像のドメインを事前に許可しておく必要があります。そのため、ドメイン部分のみ記載します。
ここで言う「外部画像」とは？
たとえば、Unsplashの画像をそのままURLで表示したい場合
※Unsplash：高品質な写真を無料で使えるサイト
<Image
src="https://images.unsplash.com/photo-12345"
width={500}
height={300}
alt="風景"
/>このような外部URLから直接読み込む画像は、Next.jsのセキュリティルール上、そのままではブロックされます。そのため、読み込みを許可するドメインを明示的に指定する必要があるのです。
import する画像とはどう違うの？
import sampleImage from "@/assets/sample.jpg";
<Image
src={sampleImage}
width={500}
height={300}
alt="サンプル"
/>このように import した画像は、プロジェクト内にあるファイルなので、許可設定は不要です。
② ページのリダイレクト（redirects）
async redirects() {
return [
{
source: "/old-page",
destination: "/new-page",
permanent: true,
},
];
}古いURLにアクセスされたとき、自動で別ページへ飛ばしたいときに使います。permanent: true にすると、SEO的にも「ページ移動済み」と評価されるのでおすすめです。
なぜ async なの？
この関数が async になっているのは、必要に応じて外部APIなどから転送先リストを取得するなど、非同期処理ができるようにするためです。
（もちろん、今回のように return だけでもOKです）
③ Reactの厳格モードをONにする（reactStrictMode）
開発中に「Reactの間違いを教えてくれるモード」。初心者ほどONがおすすめ！
reactStrictMode: trueこの設定をしたからといって、アプリの動きが変わるわけではありません。
| 設定 | 目的 | 利便性の違い |
|---|---|---|
reactStrictMode: false | 普通に動く | バグに気づきにくい |
reactStrictMode: true | バグの芽を早めに見つける開発モード | 開発中にミスを教えてくれる |
「true」にすると何が起きるの？
開発中だけ、以下のようなチェックモードが動くようになります。
useEffectなどが 2回実行される（副作用の確認）- 非推奨なReactの使い方を 警告してくれる
- コンポーネントの再レンダリングミスに気づきやすい
本番には関係ないの？
本番（build された後のアプリ）では一切影響なし
なので、「true にしておいて損はない」設定です。
よく使う設定を全部まとめるとこうなる
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
// 開発モードでReactのチェックを強化
reactStrictMode: true,
// 外部ドメインからの画像を許可
images: {
domains: ["images.unsplash.com"],
},
// ページのリダイレクト設定
async redirects() {
return [
{
source: "/old-page",
destination: "/new-page",
permanent: true,
},
{
source: "/temporary",
destination: "/maintenance",
permanent: false,
},
];
},
};
export default nextConfig;補足：環境ごとの切り替えは .NODE_ENV でOK！
昔は next.config.js で環境変数を設定していたこともありましたが、コード内で .NODE_ENV を利用して切り替えるのが一般的です。
これは「今が開発環境かどうか」を判定して、使うAPIのURLを分けている例です。
const isDev = process.env.NODE_ENV === "development";
const apiUrl = isDev
? "http://localhost:3000/api"
: "https://example.com/api";
NODE_ENV は実行コマンドで自動で決まります。.env や .env.production のファイル名で決まるわけではなく、コマンドによって自動で切り替わると覚えましょう。
| 実行コマンド | NODE_ENVの値 |
|---|---|
npm run dev | "development"（開発） |
npm run build && start | "production"（本番） |
💡 結論 ：環境切り替えについて next.config.js に無理に書く必要はありません。
設定を変えたら再起動を忘れずに
next.config.ts を変更したら、開発サーバーを一度止めて再起動しないと反映されないことがあります。
# Ctrl + C で止めてから
npm run devおつかれさまでした！
コメント