[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする

はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なのでユーザーに見せられる状態ではない、ということはよくあると思います。ユーザーには見せたくないけど、開発環境やステージング環境では確認したい。でも本番環境には出したくない。そういうときどうしたら良いのでしょうか？ この記事の対象 この記事は以下のような人を対象としています。 Next.js で Web アプリケーションを実装している 開発中のページを本番環境に露出したくない まとめ 今回、私は以下のように実現してみました。 開発中のページについて、拡張子を .page.d

[t-murachi]

いや普通にブランチ分けようよ…(´・ω・`) グループ開発で同時進行で機能追加やってたらこんなん余計ややこしくなるだけだよ(´・ω・`)

[field_combat]

ピンポイントで使うにはいいんかな。共有コンポーネントとかも影響するかもだし、素直にブランチ切った方がいい場合が多そう

[mizdra]

賢い... middleware で 404 を返すテクもあるけど、_buildManifest.js に開発環境のみのページのパスが載ってしまうはず (ビルドの対象に含まれていさえすれば載るため)。僕はビルド前に rm -rf pages/internal してました。

[hdampty7]

開発支援系のページとかではあり。まあ、どうせ環境変数で制御とかは必要になるですけどね。

[internetkun]

middlewareで潰せば社内のIPアドレスでのみアクセスできるようにたりもできて便利だとは思うけど面白い発想ではあるね

[habarhaba]

なるほどなー！

[efcl]

`pageExtensions`オプションで、ページとしてみなす拡張子を開発時とproductionで変えることで、開発時のみ存在するページを作る方法について。 `pageExtensions: isDev ? [...defaults, "dev.tsx"] : defaults`

[tofu-kun]

これは賢い。参考にしよう。