Zenn
🚦

[Next.js] Custom Page Extensions で開発中のページを非公開にする

2021/10/01に公開
Next.js
tech

Next.js で開発中のページを公開したくない状況がありました。

Custom Page Extension を利用してリリースに含めるかどうかをコントロールすることができたので、その方法を紹介します。

TL;DR

  • Custom Page Extension で page.tsx を設定する
  • 開発用に next dev 時の Custom Page Extension の制限を緩くする

next.config.js で Custom Page Extensions を設定する

以下のように設定すると、ビルド対象を page.tsx の拡張子のファイルに限定することができます。

module.exports = {
  pageExtensions: ['page.tsx'],
}

これを利用して、以下のような運用で開発中のページのビルドを防ぐことができます。

  • 開発時には .tsx 拡張子で開発する
  • リリースが決定した時に、対象のページのファイルの拡張子を .page.tsx に変更する

開発時のみ制限を緩くする

上記の設定によって開発中のページがビルドされなくなったものの、next dev 時にも開発中のページがビルドされなくなってしまいます。
そこで、next dev時のみ Custom Page Extensions の制限を緩くなるように設定します。

next.config.js で以下のように分岐を書くことで、next dev 時に異なる Custom Page Extensions を設定できます。

const {　PHASE_DEVELOPMENT_SERVER } = require('next/constants')
 
module.exports = phase => {
  // `next dev` 時の条件
  const isDev = phase === PHASE_DEVELOPMENT_SERVER
    
  return {
    pageExtensions: (() => {
      // `next dev` 時のみ `.tsx` を許可する
      if (isDev) {
        return ['page.tsx', 'tsx']
      }
      return ['page.tsx']
    })(),
  }
}

さいごに

一般的には「開発用のブランチを切ってリリースタイミングまでマージしない」という方法もあると思います。
今回は、プロジェクトの状況としてコードの追加や修正が多いため、コンフリクトの解消を少なくするために Custom Page Extension を活用することにしました。

ご参考になれば幸いです。

参考

Discussion