npx serve@latest outとは何か？
npx serve@latest outは、主に Next.js などのフレームワークで静的書き出し（Static Export）したファイルをローカルで確認するためによく使われるコマンドです。
npm startで起動できないSSGのプロジェクトに使う
npm startでエラーが出る場合
Next.jsでは開発時に現在のソースコードで開発環境下で起動するためには npm run devを使います。
ですが、開発環境（例: localhost:3000）で本番環境で起動したい場合は npm run start（または省略形の npm start）を使います。
ですが、next.config.tsに「output: ‘export’」を記述して、SSG（Static Stite Generation）として扱ってるプロジェクトでは、 npm run start実行時に以下のエラーが出ます。
npm start
> slp-app2@0.1.0 start
> next start
▲ Next.js 16.1.4
- Local: http://localhost:3000
- Network: http://192.168.11.19:3000
✓ Starting...
Error: "next start" does not work with "output: export" configuration. Use "npx serve@latest out" instead.
at ignore-listed framesnpm startでなぜエラーが出るのか？
npm startはサーバーを起動して、SSRのページを表示するための機能です。
ですが、「output: ‘export’」を記述して、SSGにしている場合、Next.jsは最終的に「HTML + CSS + JavaScript」の静的なファイルのみを出力するので、サーバーが必要ありません。
npm startでサーバーが必要ないのに、サーバーを起動しようとしているからエラーが発生します。
npx serveの役割
サーバー不要の本番環境を起動する
「output: ‘export’」を記述して、SSGにしている場合サーバーの起動は不要です。SSGで開発環境で本番同等のページを表示するには「npx serve」を使います。
npx serveの基本構文
npx serveの基本構文は以下のようになっています。
npx serve [オプション] [公開したいディレクトリパス]「output: ‘export’」を記述している場合、HTMLやCSS, JavaScriptなどの静的ファイルは「out」ディレクトリにあります。
このためoutディレクトリを指定して実行します。その際、最新のバージョンを使うことを@latestで指定します。
npx serve@latest outこれで、「output: ‘export’」で出力したファイルをlocalのブラウザ上で確認することができます。
>npx serve@latest out
┌───────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://192.111.11.11:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────┘
npm run devと違い、npx serve@latest outを使うときは事前にソースファイルをビルドする必要があります。
npm run build
npx serve@latest out404エラーの原因と対処法
npx serve@latest outで起動し、ページにアクセスすると以下のように404エラーが発生することがあります。
HTTP 2026/4/4 10:19:31 ::1 GET /privacy/terms/__next.privacy.terms.__PAGE__.txt?_rsc=qqyov
HTTP 2026/4/4 10:19:31 ::1 GET /privacy/policy/__next._head.txt?_rsc=1pn8p
HTTP 2026/4/4 10:19:31 ::1 GET /privacy/policy/__next.privacy.policy.txt?_rsc=yy0e1
HTTP 2026/4/4 10:19:31 ::1 GET /privacy/policy/__next.privacy.policy.__PAGE__.txt?_rsc=1g5u1
HTTP 2026/4/4 10:19:31 ::1 Returned 404 in 3 ms
HTTP 2026/4/4 10:19:31 ::1 Returned 404 in 2 ms
HTTP 2026/4/4 10:19:31 ::1 Returned 200 in 4 ms
HTTP 2026/4/4 10:19:31 ::1 Returned 404 in 3 ms
しかもこれらは、実際にアクセスしたページではないページで発生します。
これは Next.js の App Router 特有の動作と、npx serve（静的サーバー） の性質がぶつかっていることが原因です。
ログにある _rsc というパラメータ付きのリクエストは、Next.js がページ遷移を高速化するために裏側で読みに行く「画面のパーツデータ」です。
Next.jsのApp Routerは、ページ表示高速化のため、アクセスしたページ内にリンクがある場合、そのリンク先を事前に取得しようとします（「プリフェッチ(prefetch)」と言います）。この処理はサーバー側の処理となります。
ところが、npx serveにしているので静的なファイルしかなく、サーバーが動的にrsc用のファイルを生成していないためページが存在しないという404エラーが発生します。
対処法：prefetch={false}
Linkタグにprefetch={false}をつける
この問題は_rscファイルの404問題はFirebase Hostingで公開した場合も発生します。
Firebase Hostingで公開するのは静的ファイルですが、JavaScriptでReactのアプリとして公開されるのでプリフェッチ機能も有効化されてしまいます。
対処方法はLinkタグに「prefetch={false}」をつけるだけです。
これで、プリフェッチの実行を止めることができます。
<Link
href="/privacy/policy/"
target="_blank"
rel="noopener noreferrer"
className="hover:text-gray-600 hover:underline transition-colors"
prefetch={false}
>「<Link」を完全一致で検索し、「<Link prefetch={false} 」（末尾に半角スペースを入れる）で一括置換すればすぐに終わります。（元に戻すときも簡単です）
ベストプラクティス
Linkタグに「prefetch={false}」をつければ、_rscファイルを探しに行く404エラーは解除できます。
ですが、「output: ‘export’」をして静的ファイルを生成したプロジェクトでは、Next.jsとFirebaseに以下の設定を追加することでより安定したサイトにすることができます。
- next.config.jsに「trailingSlash: true」を追加。
- LINKタグに「prefetch={false}」を追加。
- firebase.jsonのhostingに「”trailingSlash”: true」「rewrites」ルールを追加
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
//SSGで静的HTMLを生成
output: 'export', //SSGとしてoutにファイルを出力
trailingSlash: true, //ファイル構造とブラウザURLの書き換え
images: {
unoptimized: true,
},
};
export default nextConfig; "hosting": {
"public": "out", ※公開ディレクトリの指定
"trailingSlash": true, ※ブラウザURLの書き換え
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**",
"scripts/**"
],
"rewrites": [ ※404ページをトップにリダイレクト
{
"source": "**",
"destination": "/index.html"
}
]