Nuxt 3 SSGで特定ページをプリレンダリングから除外する

背景

mdx-playgroundに消費税の経理処理パターンを表示するページ（/tax-patterns 配下）がある。このページは書籍の内容をそのままデータとして載せているため、本番環境に公開するのは問題がある。ただし開発環境では引き続き閲覧できるようにしたい。

Nuxt 3のSSG（cloudflare-pages-staticプリセット）を使っているため、ビルド時のプリレンダリングから除外すれば、本番環境のdistディレクトリにHTMLファイルが生成されず、実質的に非公開にできる。

やったこと

1. nuxt.config.ts の prerender.ignore に追加

nitro.prerender.ignore に /tax-patterns とそのサブパスを追加した。

// nuxt.config.ts
nitro: {
  preset: "cloudflare-pages-static",
  prerender: {
    crawlLinks: true,
    ignore: [/\?/, '/search', '/tax-patterns', '/tax-patterns/**'],
  }
}

ignore はルートパスの文字列か正規表現の配列を受け取る。'/tax-patterns' で親ページ、'/tax-patterns/**' でその配下の全ページを除外できる。

2. ホームページのリンクカードを開発環境のみ表示に変更

index.vue で import.meta.dev を使い、tax-patternsへのリンクカードを開発環境でのみ表示するようにした。

<script setup>
const isDev = import.meta.dev
</script>

<template>
  <NuxtLink v-if="isDev" to="/tax-patterns" class="nav-card demo-card">
    <!-- 開発環境のみ表示 -->
  </NuxtLink>
</template>

import.meta.dev はViteのビルド時定数で、process.env.NODE_ENV === 'development' と同等。SSGビルド時には false に置き換わるため、本番ビルドではリンク自体がバンドルに含まれない。

3. デプロイと動作確認

Cloudflare Pagesにデプロイした後、dist/tax-patterns/ ディレクトリにファイルが生成されていないことを確認した。

確認方法:

# ビルド後の出力ディレクトリを確認
ls dist/tax-patterns/
# → ディレクトリ自体が存在しない = 除外成功

本番URL（https://log.eurekapu.com/tax-patterns/）にアクセスすると404になり、ホームページにもリンクカードが表示されないことを確認。

ポイント

prerender.ignoreはSSGビルド時にのみ効果がある。pnpm dev の開発サーバーではSSRで動的にレンダリングされるため、ignoreに関係なくページが表示される
v-if="isDev"は二重の防御。prerender.ignoreだけでも本番から除外されるが、リンクカード自体を非表示にしておくことで、存在しないページへのリンクが表示されない
crawlLinksとignoreの関係: crawlLinks: true はページ内のリンクを辿ってプリレンダリングする。ignoreに指定したパスはクロール対象外になるので、リンクがあっても辿られない