next.jsnext.js13sanity

Nextjs 13 'use client' components rendering on server anyway with sanity


I'm trying to setup simple Nextjs application with Sanity studio, where Sanity is appended to my Next application, and lives under the route like /admin.

The problem is that when I try to access my Sanity studio via this route, it shows the "forever loading" state without throwing any error.
enter image description here
As far as I know, in order for Sanity to work this way, the component has to be rendered on the client.
And when I try to print something to the console, it prints out in my terminal, meaning that this component was rendered on the server. And I don't understand why this happens. enter image description here

I'm fairly new to Nextjs, but in previous app I didn't have such issue and server components and client components were working just fine.

Here is my Studio component code:

"use client";

import { FC } from 'react';
import { NextStudio } from 'next-sanity/studio';

import sanityConfig from '@/sanity.config';

const Studio: FC = () => {
  console.log(`
  -- Sanity studio component with "use client";
  `)
  return <NextStudio config={sanityConfig}/>
}

export default Studio;

Here is Admin component under app/admin/[[...index]/page.tsx:

"use client";

import Studio from '@/src/components/Studio/Studio';

const Admin = () => {
  console.log(`
  -- Admin component with in page.tsx with "use client";
  `);
  return <Studio />;
}

export default Admin;

And even if I use useState hook which should force the component to be rendered on the client it still renders on the server.

So far I've tried different setups with components, export default function and export default arrow function as it was mentioned on couple other threads, none of this works.


Solution

  • Anyone having the same issue, in my case the solution was to update Nodejs version. I believe that at the time I encountered this problem my Nodejs was on 16.x version, and in order for server components to work properly, at least version 18.x was required.