You Switched to Next.js — Why Is Your SEO Still Broken?

You did the right thing. You migrated to Next.js. You're using Server Components. You patted yourself on the back. Then you checked Search Console three months later and pages still aren't indexed. What went wrong?

The 5 most common Next.js SEO mistakes

1. Using Client Components for critical content

Any component marked "use client" renders in the browser. If your main content lives inside a Client Component, Google can't see it on first crawl. Rule of thumb: content that needs to be indexed should live in Server Components.

2. Fetching data client-side with useEffect

// Bad: data won't be indexed
useEffect(() => {
  fetch('/api/products').then(r => r.json()).then(setProducts)
}, [])

// Good: fetch in Server Component
const products = await fetch('/api/products').then(r => r.json())

3. Dynamic routes without generateStaticParams

If you have dynamic routes like /blog/[slug] and aren't pre-generating them, some crawlers time out waiting.

4. Missing or wrong metadata

Next.js has a Metadata API. If you're not using it, title tags and meta descriptions are empty on every page.

5. Slow server response times

If your Server Component takes 3+ seconds to respond due to slow DB queries, Googlebot may abandon the crawl.

When prerendering still helps with Next.js

• Parts of your app that are still client-side React (embedded widgets, legacy pages)
• Third-party content loaded via JavaScript you can't control
• A/B testing tools that inject content client-side
• Ensuring AI crawlers get full HTML regardless of Next.js SSR gaps