Next.js・ReactのGEO：JavaScriptフレームワークをAIクローラーに見せる
React・Next.js などのフレームワークは優秀です——でも、人には完璧に見えてAIクローラーには真っ白、というページを作ってしまうことがあります。違いは結局どこで本文を描画するかです。本ガイドは、それを決めるたったひとつの問いと、正しい側に着地する方法を説明します。
すべてを決めるたったひとつの問い
AIクローラー（GPTBot・ClaudeBot・PerplexityBot・Google-Extended）がページを取得するとき、読むのはサーバーが返すHTMLです。ブラウザのようにJavaScriptを実行することは通常ありません。だから重要な問いはこれだけです：
あなたの本文は、サーバーが送るHTMLに既に入っているか——それとも、ブラウザでJavaScriptが動いた後にしか現れないか？
本文がブラウザ側で組み立てられているなら、クローラーにはほぼ空の殻しか見えません。→ JavaScriptとAIクローラー
Next.js：サーバー側で描画させればたいてい大丈夫
Next.js はサーバー側で描画するように作られているので、とてもAIフレンドリーになり得ます：
- App Router（Server Components） は既定でコンポーネントをサーバー側でHTMLに描画します。本文が最初のHTMLに入ります——良好。
- Pages Router は、本文を
getServerSideProps（SSR）やgetStaticProps（静的生成）で読み込めば大丈夫です。そのデータはHTMLに焼き込まれます。
罠は、ブラウザ側だけで取得するデータ——たとえば useEffect の中や、クライアント側のデータ取得ライブラリで、ページが空のまま届き、読み込み後に埋まるもの——です。"use client" コンポーネントは対話性のためなら問題ありませんが、肝心の言葉がブラウザでの取得後にしか来ないなら、それはクローラーが読むHTMLには入っていません。本文はサーバー経路に載せましょう。
素のReact SPA：難しいケース
クライアント専用のReactアプリ（Create React App や、サーバー描画なしのVite）は、通常 空の <div id="root"></div> を送り、すべてをブラウザ側で描きます。人にはフルのページ、AIクローラーには真っ白です。選択肢：
- サーバー側で描画するフレームワークに移る——Next.js・Remix・Astro。
- 本文ルートに静的プリレンダリングを足し、クローラーに本物のHTMLを渡す。
メタデータと構造化データも忘れずに
本文をサーバー側で描画できれば大半は片付きますが、仕上げも：
- タイトル・説明・canonical・Open Graph ——Next.js の Metadata API（App Router）か
next/head（Pages Router）で、JavaScriptで後付けせずサーバーHTMLに入れる。 - 構造化データ ——サーバー描画の
<script type="application/ld+json">を出力し、AIに明示的な事実を渡す。→ 構造化データ ・ サイトマップと canonical
正直なところ
Reactを捨てる必要はありません。ハイドレーションや豊かな対話性はまったく問題ありません——AIが読むのは最初のHTMLで、その上でアプリは好きなだけ動的にできます。直し方は「JavaScriptを減らす」ではなく「最初のHTML応答に最初から言葉を含める」です。サーバー描画・静的生成・React Server Components はどれもそれを実現します。
確かめ方
「ソースを表示」（インスペクタではない——あれはJS実行後のライブDOMを見せます）を開くか、curl https://あなたのサイト.com を実行し、実際の段落本文を探します。見出しと本文が見えれば、クローラーにも見えます。空の <div id="root"> とスクリプトタグの山しか見えなければ、本文はブラウザ専用です。あるいは、無料のAI可視性チェックにURLを通せば一目で確認できます。
まとめ
ReactやNext.jsは敵ではありません——ブラウザ専用の描画が敵です。本文をサーバー側に保ち（SSR・SSG・Server Components）、メタデータと構造化データをサーバーHTMLに入れ、「ソースを表示」で検証しましょう。まずGEOの全体像とJavaScriptとAIクローラーから。それでもAIが引用しないならAIに自分のサイトが出ない理由を参照してください。