Accessing cookies (next/headers) from a function outside of App Directory
Unanswered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hi there! I'm in the process of cleaning up some of my data fetching in an app running Next 14.1 using the App Directory.
I wanted to abstract away having to pass an access token to all of my useQuery (react-query) hooks, and I figured I could just check whether the window is defined, if not, use the request's cookies, otherwise use the browser's cookies.
The issue is, importing next/headers outside of the app directory seems to cause a build error.
My useQuery is being called inside of the app directory, and can either be prefetched on the server or fetched on the client. The query itself is called in the
Is there any way to handle this or do I just need to go back to passing an accessToken around everywhere?
I wanted to abstract away having to pass an access token to all of my useQuery (react-query) hooks, and I figured I could just check whether the window is defined, if not, use the request's cookies, otherwise use the browser's cookies.
The issue is, importing next/headers outside of the app directory seems to cause a build error.
My useQuery is being called inside of the app directory, and can either be prefetched on the server or fetched on the client. The query itself is called in the
/lib directory. This getAccessToken() helper is also in /lib. Is there any way to handle this or do I just need to go back to passing an accessToken around everywhere?
18 Replies
Britannia Petite
anyupdate ? @Northeast Congo Lion
pass the cookies to this function from the caller
cookies function are set via a Node.js AsyncStorage or equivalent on the edge
so that you can basically import this function "cookies()", but it is actually scoped to the current user request
can you share the build error though?
I am a bit surprised, it should work if the function is implemented outside the app directory, where you put the code and where it runs are not really related it's ok to have your libs out of /app
@Eric Burel can you share the build error though?
Northeast Congo LionOP
So I ended up switching to the "useCookies" hook provided by "next-client-cookies", and passing the value of that around - seems to work well enough for both client and server components.
The error I was getting is:
Which makes sense since this can be called from a client component.
The error I was getting is:
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/react-essentials#server-componentsWhich makes sense since this can be called from a client component.
Someone else was having this exact issue, with
https://nextjs-forum.com/post/1146219881151340675
next/headers import residing outside /apphttps://nextjs-forum.com/post/1146219881151340675
could this be a next bug?
@Britannia Petite
Britannia Petite
As far as I can read, next/headers are meant to be used in pages level, server actions or route handlers…. Not clear ..
@josh Someone else was having this exact issue, with `next/headers` import residing outside `/app`
https://discord.com/channels/752553802359505017/1146219881151340675
this posts mentions importing them from a client components so not not really related
@Northeast Congo Lion So I ended up switching to the "useCookies" hook provided by "next-client-cookies", and passing the value of that around - seems to work well enough for both client and server components.
The error I was getting is:
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/react-essentials#server-components
Which makes sense since this can be called from a client component.
is there a client component ("use client" directive) somewhere?
you cannot import cookies from a client components, so it's indeed not possible to have the same piece of code for client and server comps
@Eric Burel this posts mentions importing them from a client components so not not really related
it was necro'd, check the end
I see, but yeah the issue is different indeed, here OP wants to have an isomorphic piece of code for client and server
this can't work
Northeast Congo LionOP
yes in my case this is not really a bug