First of all, I'm a bit new to the Next.js world, but I encountered an issue using Next.js with Netlify and it stumped me for a bit and there didn't seem to be many details as to what was going on.

First of all, I know Next.js probably works better on Vercel, but I already had a Netlify account with my domain migrated, so I wanted to continue using Netlify.

The Issue

This very site you are reading is a fairly simple blog using Next.js. It is mostly Dynamic Server Components and I use Sanity for the Content Management.

Sanity is a headless CMS - which is pretty cool in itself. I'll need to write about that another time.

The gist here is that I needed several routes in Next.js to retrieve content from Sanity. Sanity provides an SDK for easily querying for content, but it does require a `project_id` unique to my account that I didn't want to leak into the client.

Using Dynamic Server Components worked great in Next.js in development, but as soon as I published to Netlify a very strange error occurred.

netlify outputting raw objects instead of running react when server components use caching

Instead of React actually rendering in the browser, I got this raw output, which is clearly serialized data from my homepage.

What was even more confounding was that it happened "sometimes" - not even consistently.

The Answer

I'll cut to the chase for those of you who are just here to get a quick answer.

Removing Next.js caching on the route eliminated the issue above for me.

Because I'm new to Next.js I haven't precisely found an explanation as to why this issue was happening.

In my case, because I was following many examples as I was building this I just copied and pasted an export that I added to my component.

export const revalidate = 60

Even though this site does not get nearly enough traffic to really concern itself with caching - I thought why not leave it?

Turns out it doesn't seem to play well with Netlify in this specific use-case.

I realize that this isn't exactly a satisfactory answer. That I should actually understand why it wasn't working fully. But given that I imagine this is a relatively rare edge-case and that I don't need caching it is definitely good enough for now.

If someone does know the answer and wants to save me some time - do let me know on Twitter (X).