Very confused on how SEO (Crawlers) work with NextJS

[k2xl]

I've been looking through the docs and haven't been able to understand clearly how NextJS works with search engine crawlers.
I've added meta tags fine to my NextJS app but haven't been able to figure out how to get pages to render HTML so search engines can crawl them effectively.

I have a NextJS site and when I view-source I don't see HTML, I see an object (NEXT_DATA) that includes all the properties that are needed. This makes sense as it allows the page to download quickly and then use javascript to render the DOM. Cool.

But, how do bot crawlers find my H1 tag? Or the literal text content of the page? I've been out of the SEO game a while so maybe I'm old school, but I always thought you needed to render html so that google bot would be able to find all the correct tags/links etc...

Am I out of date? Does google bot actually know that this is a NextJS website and knows how to find the H1 tags after loading some of the site?

Or do I need to fix something on my nextjs app to get it to return plain html? The docs are not clear to me on this... And when I test my site on various SEO "analyzers" they sometimes say my website lacks "content" and "h1" tags...

[icyJoseph]

There might be an issue with your page because the source always has the entire first server frame rendered. I often test Next.js Apps from Postman, a REST Client, curl, or with JS turned off. Remove the browser from the equation to analyze what bare SEO bots see.

Perhaps you are doing something like show/setShow inside a use-effect that's preventing SSR from reaching that code?

const Example = () => {
  const [show, setShow] = useState(false)
  useEffect(() => { setShow(true) },[])

 return (
    <div>
       {show && <p>foo</p>}
    </div>
 )
}

The above SSR's a div with no children, then in the client after hydration, the effect runs, show is set, and the p tag is added.

Next.js generates HTML pages out of the box, at build time or runtime. If some HTML is missing from your page it is most likely because you are preventing the SSR process from reaching it.

[k2xl]

I tried this:

  return (
    <div>hi</div>);
}

And still don't see the html... But maybe I have something else messed up in document.ts or app.ts...

[icyJoseph]

Perhaps... got a repository I could take a look at? or a Stackblitz reproduction of your issue?

[k2xl]

Figured it out. I was doing a useEffect() in my app.ts and checking for window to be available... Taking that out and refactoring how it was used seemed to do the trick. Thanks!!