Error cookies Server Component | Next.js | Page 1

#

Hi @split agate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error you're encountering is due to the fact that the cookies function from next/headers can only be used within Server Components in the app/ directory and not in the pages/ directory. This is a common issue when trying to access cookies in a context that is not supported.

To resolve this issue, you need to ensure that the code using cookies is placed within the app/ directory. Here is a step-by-step guide to help you fix this:

Move the Code to the app/ Directory:
Ensure that the file where you are importing cookies from next/headers is located within the app/ directory. For example, if your file is currently in pages/api/, move it to app/api/.
Use Server Components:
Make sure that the component or function using cookies is a Server Component. Server Components are the default in the app/ directory.

Here is an example of how you can structure your code within the app/ directory:

// app/api/supabaseServer.ts
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { Database } from '@/interfaces/types_db';

const createServerClient = () => {
  const cookieStore = cookies();
  return createServerComponentClient<Database>({
    cookies: () => cookieStore,
  });
};

export default createServerClient;

Accessing Cookies in a Server Component:
Ensure that you are accessing the cookies within a Server Component. Here is an example:

// app/foo/page.tsx
import { createServerClient } from '@/api/supabaseServer';

export const dynamic = 'force-dynamic'; // Optional
export const runtime = 'edge'; // Optional

export default async function AccountPage() {
  const supabase = createServerClient();
  const { data, error } = await supabase.from('my-nice-db').select('*');

#

return (
<div>
<pre className="text-white text-xs overflow-x-auto">
{JSON.stringify(data, null, 2)}
</pre>
</div>
);
}


By following these steps, you should be able to resolve the error and properly use the `cookies` function from `next/headers` in your Server Components.

For more information, you can refer to the relevant issues and discussions:
- **GitHub Issue 49757** (<https://github.com/vercel/next.js/issues/49757>)
- **GitHub Issue 45371** (<https://github.com/vercel/next.js/issues/45371>)

If you continue to experience issues, consider opening a new issue with a minimal reproduction for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@split agate kapa.ai is still learning and improving, please let us know how it did by reacting below

#Error cookies Server Component