Hi @limpid canopy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#cookies next/headers
patent merlinBOT
The cookies function from next/headers is designed to be used in a Server Component, Route Handler, or Server Action. It allows you to read the HTTP incoming request cookies from a Server Component or write outgoing request cookies in a Server Action or Route Handler. It is a Dynamic Function whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into dynamic rendering at request time. Here is an example of how you can use it:
import { cookies } from 'next/headers'
export default function Page() {
const cookieStore = cookies()
const theme = cookieStore.get('theme')
return '...'
}
(Source: Next.js Docs - cookies (https://nextjs.org/docs/app/api-reference/functions/cookies))
However, if you want to ensure that your server-only code does not accidentally get imported into a Client Component, you can use the server-only package. This package will give other developers a build-time error if they ever accidentally import one of these modules into a Client Component. Here is an example of how you can use it:
import 'server-only'
export async function getData() {
const res = await fetch('<https://external-service.com/data',> {
headers: {
authorization: process.env.API_KEY,
},
})
return res.json()
}
(Source: Next.js Docs - Keeping Server-only Code out of the Client Environment (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment))
So, if you import cookies from next/headers in your getData() function, it should not make the function executable client-side as long as you are using it within the context of a Server Component, Route Handler, or Server Action. However, to ensure that your server-only code does not accidentally get imported into a Client Component, you can use the server-only package.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
limpid canopy
@patent merlin if i use the import 'server-only' in my typescript codebase, is it possible, that it could be imported somewhere near a client-component, and it is not able to throw the error while building the nextjs app, and only catch this error in run-time?
In otherwords, i do not want to put this import server-only statement in my code if there is chance to break my app and not fetch errors during build.
patent merlinBOT
Let me check the knowledge base for you. One moment! :books:
The server-only package is designed to throw a build-time error if it's imported in a Client Component. This means that if you accidentally import a module marked with server-only into a Client Component, Next.js will fail to build your application and provide an error message. This is a safety measure to prevent server-only code from being included in the client-side bundle.
Here's an example of how you can use it:
import 'server-only'
export async function getData() {
// Your server-only code here
}
(Source: Next.js Docs - Keeping Server-only Code out of the Client Environment (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment))
However, there have been reported issues where server-only throws errors when used in certain parts of a Next.js application, such as in API routes, middleware, or instrumentation (Source: Github Issue - import "server-only" and "use server" throws when used in an API route handler (https://github.com/vercel/next.js/issues/43700), Github Issue - import "server-only" and "use server" throws when used in middleware (https://github.com/vercel/next.js/issues/55206), Github Issue - import "server-only" and "use server" throws when used in instrumentation (https://github.com/vercel/next.js/issues/62564)).