Next.js and React

A plain create-react-app style SPA is close to worst-case for AI visibility: the initial HTML is an empty <div id="root">, and every word of your content arrives only after JavaScript executes. Assume crawlers do not wait.

Next.js solves this, but only if you use it that way.

Server Components by default

In the App Router, components are server components unless marked 'use client'. Keep content components on the server. Push 'use client' as far down the tree as possible — to the button, not the page.

// app/guides/[slug]/page.tsx  — server component, no directive needed
export default async function Page({ params }) {
  const guide = await getGuide(params.slug);
  return (
    <article>
      <h1>{guide.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: guide.html }} />
      <LikeButton slug={params.slug} />   {/* this one is 'use client' */}
    </article>
  );
}

Metadata

Use the Metadata API rather than a head library:

export async function generateMetadata({ params }) {
  const guide = await getGuide(params.slug);
  return {
    title: `${guide.title} | Fernway`,
    description: guide.summary,
    alternates: { canonical: `https://fernway.co/guides/${params.slug}` }
  };
}

JSON-LD

Render it as a script tag in the server component. This is one of the few legitimate uses of dangerouslySetInnerHTML:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
/>

Sitemap and robots

App Router supports app/sitemap.ts and app/robots.ts which generate the files at build. llms.txt goes in public/.

How to verify

curl -s https://yoursite.com/your-page | grep "a distinctive sentence"

If curl does not find your text, no crawler will. That one command settles most arguments about whether your rendering strategy is working.