I expiriencing similar issue with supabase - https://github.com/orgs/supabase/discussions/18086
Its more to supabase related - not to next js

any updates on how to solve this? I have to use require('next/headers').headers() as a replacement for now, but im not sure if by doing that im sending the entire next/headers bundle to the client or not

any updates on how to solve this? I have to use require('next/headers').headers() as a replacement for now, but im not sure if by doing that im sending the entire next/headers bundle to the client or not

Please try to research first (I mean updates alrady exist)
#56630 (comment)

This is super annoying. Basically I need to have two API handlers because I want to get cookies on the server, and on the client.

I did the same workaround using require('next/headers').cookies() but it just seems so janky.
Please fix this!

Adding an additional scenario. This happened to me when using the cookies function outside of the app/ directory.

You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/

I am using the app directory as opposed to pages, but this call was in a directory features/. So I tried the "require" above, worked fine.

It was really odd that it was telling me it's not supported in the pages/ directory, when I wasn't using pages/. I did a minor refactor, calling the same exact code inside of the app/ directory and it worked perfectly fine.

I assume there is some sort of check to see if you are using it in the actual app/ directory.

Adding an additional scenario. This happened to me when using the cookies function outside of the app/ directory.

You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/

I am using the app directory as opposed to pages, but this call was in a directory features/. So I tried the "require" above, worked fine.

It was really odd that it was telling me it's not supported in the pages/ directory, when I wasn't using pages/. I did a minor refactor, calling the same exact code inside of the app/ directory and it worked perfectly fine.

I assume there is some sort of check to see if you are using it in the actual app/ directory.

Hi @christopher-caldwell, I'm having the exact same situation as you. Hopefully someone from the team reaches out soon.

@ezeamin Here is my work around for now:

// A file at some path outside of the `app/` dir
const SomeComponent = async (props) => {
  const { cookies } = await import('next/headers')
  const cookieManager = cookies()

  return (
    <div>
      {cookieManager.get('cookieName')?.value ?? 'Nope'}
    </div>
  )
}

Guys I don't understand what's the problem to use

This solution in client components to get cookies

export function getCookie(name: string) {
  if (typeof document === "undefined") return

  const value = "; " + document.cookie
  const decodedValue = decodeURIComponent(value)
  const parts = decodedValue.split("; " + name + "=")

  if (parts.length === 2) {
    return parts.pop()?.split(";").shift()
  }
}

And this solution in server components to get cookies

import { cookies } from "next/headers"

cookie.get('someCookieName').value

Guys I don't understand what's the problem to use

This solution in client components to get cookies

export function getCookie(name: string) {

  if (typeof document === "undefined") return



  const value = "; " + document.cookie

  const decodedValue = decodeURIComponent(value)

  const parts = decodedValue.split("; " + name + "=")



  if (parts.length === 2) {

    return parts.pop()?.split(";").shift()

  }

}

And this solution in server components to get cookies

import { cookies } from "next/headers"



cookie.get('someCookieName').value

For me, the issue is not how to access cookies. It's that doing so outside of the actual app/ directory (while still using the app router) throws an error.

Guys I don't understand what's the problem to use
This solution in client components to get cookies

export function getCookie(name: string) {

  if (typeof document === "undefined") return



  const value = "; " + document.cookie

  const decodedValue = decodeURIComponent(value)

  const parts = decodedValue.split("; " + name + "=")



  if (parts.length === 2) {

    return parts.pop()?.split(";").shift()

  }

}

And this solution in server components to get cookies

import { cookies } from "next/headers"



cookie.get('someCookieName').value

For me, the issue is not how to access cookies. It's that doing so outside of the actual app/ directory (while still using the app router) throws an error.

Of course because you try to get cookies outside of app
You need to set cookies to some component related to some route or component in app folder
Otherwise you may pass it trhough props into some component

I don't understand use case of using cookie.get() from next/headers outside app directory

Guys I don't understand what's the problem to use

This solution in client components to get cookies

export function getCookie(name: string) {

if (typeof document === "undefined") return

const value = "; " + document.cookie

const decodedValue = decodeURIComponent(value)

const parts = decodedValue.split("; " + name + "=")

if (parts.length === 2) {

return parts.pop()?.split(";").shift()

}

}

And this solution in server components to get cookies

import { cookies } from "next/headers"

cookie.get('someCookieName').value

For me, the issue is not how to access cookies. It's that doing so outside of the actual app/ directory (while still using the app router) throws an error.

Of course because you try to get cookies outside of app

You need to set cookies to some component related to some route or component in app folder

Otherwise you may pass it trhough props into some component

I don't understand use case of using cookie.get() from next/headers outside app directory

Using app router, and having files outside of the actual app directory are 2 different things. You can use the cookies function anywhere, but there is (I believe) incorrect check on where you're accessing them. My basis for this is because the error message says that it's not supported in the pages router. Also it works if you require it, or import it in the component.

Your feature code does not need to be in the app directory to use the app router.

'use client';

I tracked and fouund having to use use client in my layout.tsx file.

// import { usePathname } from 'next/navigation';
'use client';

import DashboardHeader from "@/components/layout/header";
import Sidebar from "@/components/layout/sidebar";
import type { Metadata } from "next";
import { SidebarOne } from '@/components/admin-panel/sidebar';

import { redirect } from 'next/navigation';
import { getAuth } from '@/app/features/auth/queries/get-auth'; // Lucia*

So, I went for files around the feature and removed things like useRouter for Link tags where necessary. Got fixed.

'use client';

I tracked and fouund having to use use client in my layout.tsx file.

// import { usePathname } from 'next/navigation';
'use client';

import DashboardHeader from "@/components/layout/header";
import Sidebar from "@/components/layout/sidebar";
import type { Metadata } from "next";
import { SidebarOne } from '@/components/admin-panel/sidebar';

import { redirect } from 'next/navigation';
import { getAuth } from '@/app/features/auth/queries/get-auth'; // Lucia*

So, I went for files around the fe
ature and removed things like useRouter for Link tags where necessary. Got fixed.

Nice fix by killing SSR feature of Next.js

In my case, I'm using Nx monorepo, and all cookie-related code lives under the same library. The issue is that this library exports a single 'barrel' file, which exports both client and server code. One of these files imports the next/headers, and even if it's an unreachable code on client components I get the error too.

Right now, I'm also using the const { cookies } = await import('next/headers') workaround. But it's not ideal.

Same as tiago here, using a turbo monorepo and splitting auth into its own package, gonna follow the same approach everyone else is using until it's fixed 🤲🤲

I'm experiencing the same issue.
I have a request.ts file that is used by both the client and the server. I only need to read next/headers on the server, but if I import next/headers at the top level of the module, it throws an error, even though I only call it when typeof window === 'undefined'.

I've encountered this issue when using cookies inside of a middleware - as it's required that middleware be placed outside of the app directory, it's currently impossible to use anything from next/headers inside of one.

@ezeamin Here is my work around for now:

// A file at some path outside of the `app/` dir
const SomeComponent = async (props) => {
  const { cookies } = await import('next/headers')
  const cookieManager = cookies()

  return (
    <div>
      {cookieManager.get('cookieName')?.value ?? 'Nope'}
    </div>
  )
}

this gives error in production if used outside pages

   Generating static pages (62/63)  [    ]Error: redacted
    at /path/.next/server/chunks/8356.js:19:12770
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: '2976706782'