Next.jsで構築したサイトがSearch Consoleでインデックスをリクエストするとエラーになった話
投稿日:
更新日:
事象
Next.jsのApp Routerを使用して構築したサイトをVercelでデプロイしています。
サイトを公開してしばらくしても検索結果に出てこなかったので、Google Search Consoleを使ってURL 検査をしてみました。
すると以下のように表示され、インデックスに登録されていないことが判明しました。
![Google Search ConsoleでURL 検査をし、「URL が Googleに登録されていません」と表示された画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fbb49699c109b447d9783028ea25971f3%2Fsearch-console-index-error-1.png&w=1920&q=75)
※今回調べているURLは https://tiplib-web.com/posts/211204_dart_sass になります。
そこで、表示されている「インデックス登録をリクエスト」を押し、ライブテストを確認してみましたが以下のようになりリクエストを送信することができませんでした。
![Google Search Consoleでライブテストをし、「URL は Googleに登録できません」と表示された画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F696417caa5074032b53946d5d2e390ec%2Fsearch-console-index-error-2.png&w=1920&q=75)
「ページの可用性」の項目で詳細を確認するとページの取得に失敗していることがわかりました。
500番台のエラーが発生しているようですが、それ以上の詳細がわからなかったので次はVercelのログを見てみます。
![ライブテストの「ページの可用性」の項目](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fd000534e02164cbb98b210f8d9f23b96%2Fsearch-console-index-error-3.png&w=1920&q=75)
VercelのプロジェクトのLogsを開くとリクエストしたURLが500エラーになっていることがわかりました。
しかし、エラーの詳細などはなく解決には至りませんでした。
![VercelのLogsで500エラーが出ている](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F773367581cd248f68c8a86103326d60f%2Fsearch-console-index-error-4.jpg&w=3840&q=75)
そこで、Vercelで[Deployment Details] > [Building]を開き、ビルドログを見てみます。
すると調べているURLの生成に使っている /posts/[postId] がSSRを使用しているはずがCSRになったといったログが出ていました。
![Vercelのビルドログ](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Feeacbd76f56746ce9afa281d8de845ad%2Fsearch-console-index-error-5.png&w=3840&q=75)
原因・修正
ログに記載されているURLを開くとようやく原因がわかりました。
Suspenseが無かったことでuseSearchParamsによってページ全体がCSR(Client-side Rendering)になっていたようです。
ビルドログを見ると他のページも同様にCSRになっていたので共通で使用している /src/app/layout.tsx を確認してみました。
ここで使用している Analytics.tsx 内に'use client'
やconst searchParams = useSearchParams()
があったのでこれが影響していたようです。
leyout.tsx でClient ComponentsをReactのSuspenseでラップして再度デプロイします。
import { Analytics } from "@/components/Analytics";
import { Suspense } from "react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>
<Suspense fallback={<></>}>
<Analytics />
</Suspense>
<div>{children}</div>
</body>
</html>
);
}
Google Search Consoleで再度インデックス登録をリクエストしたところ、問題なくリクエストを送信することができました。
![インデックス登録のリクエストの送信に成功した画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F8df7513ad2014c09afedc04c13094951%2Fsearch-console-index-error-6.png&w=1920&q=75)