Next.jsサイト監査
ScanverraはあなたのNext.jsアプリがサーバー・静的・クライアントのどのようにレンダリングされているかをチェックし、コアウェブバイタルのスコアを静かに損なっているnext/image、Metadata API、ハイドレーションの問題を洗い出します。
Next.jsに対するチェック項目
App Routerが実際にどうレンダリングし、コードを配信しているかに特化した6つのチェックです。
ルートごとのレンダリング戦略
各ルートがサーバーレンダリングされているか、静的生成されているか、あるいはクライアント側で埋められる空のシェルとして配信されているか - そしてその選択がコンテンツに合っているかどうかです。マーケティングページを完全にクライアント側でレンダリングすると、クローラーは初回描画時に読み取るものが何もなくなります。
next/imageの採用状況
next/imageの代わりに使われている生の<img>タグや、width/height(またはfill)が設定されていない画像 - これらが組み合わさると、画像が実寸で表示される際にレイアウトシフトが発生します。
Metadata APIの網羅度
ルートごとのタイトル、description、canonicalタグ、Open Graphデータが個別に設定されているか、それともルート直下の一つのメタデータエクスポートが全ページで使い回されている(あるいは欠落している)かです。
クライアント/サーバーコンポーネントの分割
コンポーネントツリーの上位に不必要に配置された「use client」ディレクティブ。小さなインタラクティブ部分だけに必要だったはずが、そのサブツリー全体 - そこがインポートするすべて - をブラウザバンドルに引き込んでしまいます。
ハイドレーションの不一致
サーバーでレンダリングされたマークアップが、クライアント側でReactが生成するものと一致しないケースです。多くはDate.now()、Math.random()、あるいはレンダリング中に呼び出されたブラウザ専用APIが原因で、コンソールエラーやベストプラクティススコアの低下として表れます。
レスポンスレベルのセキュリティヘッダー
HSTS、X-Frame-Optionsといったヘッダーがグローバルに設定されているかどうかです。Next.jsではnext.configのheaders()関数で一度設定するだけで済み、各ルートをデフォルトのままにしておく必要はありません。
How it works
URLの入力からNext.js特化の修正提案まで、たった3ステップです。
Next.jsのURLを貼り付け
リポジトリへのアクセスもビルドステップも不要 - ブラウザやクローラーと同じ方法で、実際に公開されているページをスキャンします。
App Routerのシグナルを確認
x-powered-by: Next.jsのようなレスポンスヘッダー、/_next/static/のアセットパス、そして__NEXT_DATA__ペイロードから、監査を実行する前にNext.jsアプリであることを確認します。
Next.js特化の修正提案を取得
あらゆる問題が、実際に使用しているフレームワークに合わせて記述されます。一般論ではなく、next/imageやMetadata APIに関する具体的なガイダンスです。
Frequently asked questions
ScanverraはApp RouterとPages Routerのどちらを使っているか判別しますか?
レスポンスヘッダーとビルドアセットのパスからNext.jsで動作していることを検出し、どちらのルーターでも動作するチェックを適用します。レンダリング、画像、メタデータを監査する上で、両者を区別する必要はありません。
next/imageへの置き換えを忘れた生の<img>タグは検出されますか?
はい。最適化されていない画像やwidth/heightが未設定の画像は、Lighthouseレポートと同様に、コアウェブバイタルおよびベストプラクティスの問題として表示されます。
特定のページが完全にクライアント側でレンダリングされているか教えてくれますか?
監査は初回読み込み時に実際に配信されているHTMLを検査します。JavaScriptが実行される前にコンテンツがほとんど、あるいは全くないページは、コンテンツの可視性とSEOの問題として表示されます - これは通常、サーバーレンダリングされる土台がなく、クライアント側でレンダリングされていることを示すサインです。
Metadata APIの設定を具体的にチェックしてくれますか?
Metadata API、Headコンポーネント、ハードコードされたタグのいずれで生成したかにかかわらず、レンダリングされたページ上のタイトル、メタディスクリプション、canonicalタグ、Open Graphデータといった出力結果をチェックします。
ハイドレーションエラーはレポートに表示されますか?
コンソールエラーはベストプラクティススコアの一部であり、ハイドレーションの不一致はNext.jsアプリでそれが表面化するよくある原因の一つです。
監査の前にサイトをデプロイしておく必要はありますか?
はい - Scanverraは公開されている実際のURLをスキャンします。localhostのアドレスやパスワード保護されたプレビューデプロイでは動作しません。
他の技術別監査
1分足らずでNext.jsのコアウェブバイタルを確認
レンダリング、画像、メタデータ、ハイドレーション - 実際にデプロイしたフレームワークに合わせてスコア化・解説します。
Run free audit