Next.js Discord

Discord Forum

I get an error when using "use" in layout

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
  let authCookies: AuthCookies | null = null;

  const zustandData = use(
    generateSSRZustandStoreData((newCookies) => (authCookies = newCookies))
  );


This code give me this error: Error: Cannot read properties of null (reading 'use')

This code works in my server components, but when I use it in Layout, i get an error.

This is strance because when i try to log generateSSRZustandStoreData, it logs the correct answer in my console.
Answered by fuma
It is available in client components only, but you're using it in a server component.
The use hook is used for fetching data in a client component, with the use of Suspense.

For a server component, you can directly call an async function without a use hook.
View full answer

9 Replies

Asian black bear
Is this an app dir thing?
Do you have "use client"?
fuma
It is available in client components only, but you're using it in a server component.
The use hook is used for fetching data in a client component, with the use of Suspense.

For a server component, you can directly call an async function without a use hook.
Answer
@Asian black bear Is this an app dir thing?
Asiatic LionOP
It is a server component
Asian black bear
Hydration can be a pain with monolithic stores in app router. If the project is new consider jotai too!
fuma
btw if your question has been solved, you can mark the answer as the solution :meow_party:
Asian black bear
Usually hydrating a store with initial data, the store is made with ssr not rsc
Asiatic LionOP
As a beginner, I often get lost when dealing with Nextjs. Thank you both for help