devIndicators
devIndicators
を使用すると、開発中に表示される現在のルート情報を示すオンスクリーンインジケーターを設定できます。
devIndicators: false | {
position?: 'bottom-right'
| 'bottom-left'
| 'top-right'
| 'top-left', // デフォルトは 'bottom-left'
},
devIndicators
を false
に設定するとインジケーターは非表示になりますが、Next.js はビルド時やランタイムで発生したエラーを引き続き表示します。
トラブルシューティング
ルートが静的としてマークされない場合
ルートが静的であるはずなのにインジケーターが動的としてマークしている場合、そのルートが静的レンダリングを選択していない可能性があります。
next build --debug
を使用してアプリケーションをビルドし、ターミナルの出力を確認することで、ルートが静的か動的かを確認できます。静的(またはプリレンダリングされた)ルートは ○
記号で表示され、動的ルートは ƒ
記号で表示されます。例:
Route (app) Size First Load JS
┌ ○ /_not-found 0 B 0 kB
└ ƒ /products/[id] 0 B 0 kB
○ (Static) prerendered as static content
ƒ (Dynamic) server-rendered on demand
ルートが静的レンダリングを選択しない理由は主に2つあります:
- ランタイム情報に依存する動的APIの存在
- ORMやデータベースドライバーへの呼び出しなど、キャッシュされていないデータリクエスト
これらの条件をルートで確認し、静的レンダリングができない場合は、loading.js
や <Suspense />
を使用してストリーミングを活用することを検討してください。
バージョン履歴
バージョン | 変更内容 |
---|---|
v15.2.0 | オンスクリーンインジケーターが改善され、新しい position オプションが追加されました。appIsrStatus 、buildActivity 、buildActivityPosition オプションは非推奨となりました。 |
v15.0.0 | appIsrStatus オプション付きの静的オンスクリーンインジケーターが追加されました。 |