何をするか?
Next.js アプリを作っていると、開発中にだけ表示したいデバッグ用のページを作りたくなることがよくあります。
ここでは、ローカルサーバー (next dev
) での開発中のみ有効になるデバッグページの作り方を説明します。
デバッグページの作成
Next.js の各ページのビルド時には、必要に応じてデータフェッチなどを行うための getStaticProps
関数が呼び出されます(参考: Next.js のプリレンダリング機能を使用する (getStaticProps))。
この関数の戻り値として、notFound プロパティ を true にしたオブジェクトを返すと、そのページがないものとして扱うことができます(404 Not Found になる)。
export const getStaticProps: GetStaticProps = () => {
// ...
return {
// Return the default 404 page with a status code of 404.
notFound: true
}
}
この仕組みを利用して次のように実装すれば、ローカルサーバーでの開発中のみ表示可能なデバッグページを作ることができます。
ローカルサーバー (next dev
) で実行されているかどうかは、環境変数 process.env.NODE_ENV
の値で判断できます(参考: Next.js で環境変数を扱う (.env, NEXT_PUBLIC, NODE_ENV))。
import { GetStaticProps, NextPage } from 'next'
type EmptyProps = { [key: string]: never }
/**
* デバッグページのビルド時の前処理。
* 開発サーバー (next dev) での実行時のみ、このページが存在するようにします。
* 本番サーバー (next start) での実行時は、404 Not Found になります。
*/
export const getStaticProps: GetStaticProps<EmptyProps> = () => {
const isLocalDev = process.env.NODE_ENV !== 'production'
return { notFound: !isLocalDev, props: {} }
}
const DebugInfoPage: NextPage = () => {
// ...
return (
<>
<h1>Debug page</h1>
<p>This page is displayed only during development.</p>
</>
)
}
export default DebugInfoPage
(おまけ)モジュール化しておく
複数のデバッグページを作成する場合は、前述の getStaticProps
実装を使いまわせるようにしておくと便利です。
import { GetStaticProps } from 'next'
type EmptyProps = { [key: string]: never }
/**
* デバッグページ用の `getStaticProps` 実装です。
* 開発サーバー (next dev) での実行時のみ、このページが存在するようにします。
* 本番サーバー (next start) での実行時は、404 Not Found になります。
*/
export const getDebugPageStaticProps: GetStaticProps<EmptyProps> = () => {
const isLocalDev = process.env.NODE_ENV !== 'production'
return { notFound: !isLocalDev, props: {} }
}
あとは、開発中(デバッグ中)のみ表示したいページで、次のように設定します。
import { NextPage } from 'next'
import { getDebugPageStaticProps } from '../utils/debug'
// ローカル開発時 (next dev) のみページを表示するようにします
export const getStaticProps = getDebugPageStaticProps
const HelloPage: NextPage = () => {
return <p>This page is only displayed during development.</p>
}
export default HelloPage
本番環境用にビルドして実行 (yarn build && yarn start
) したときに、上記ページへのアクセスが 404 になることを確認してください。
関連記事
- Next.js でブラウザ履歴で戻るボタンを表示する (router.back)
- Next.js で Firebase: Cloud Firestore データベースを使う
- Next.js で Firebase: Authentication 機能でユーザー認証できるようにする
- Next.js で Firebase: プロジェクトの作成と接続準備
- Next.js で useState とローカルストレージ (localStorage) を連動させる
- Next.js から AWS DynamoDB にアクセスする
- Next.js で開発環境で実行しているときに Web サイト上に dev 表示する (TargetEnvIndicator)