Server Component calling server action getting Cookies can only be modified in a Server Action or Route Handler. error #60025
-
SummaryHi, I am new to NextJS and I need some help. 'use server';
import { cookies } from 'next/headers';
export async function getData() {
const cookieStore = cookies();
cookieStore.set('test', 'other value');
const cookie = cookieStore.get('test');
console.log(cookie);
return {
hello: 'world',
cookie,
};
}and this is my Component: import { getData } from '@/lib/actions/data-test';
export default async function TestPage() {
const data = await getData();
return <div>{JSON.stringify(data)}</div>;
}But I am getting this error: Thanks in advance 👍 Additional informationNext info:
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:28:12 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8103
Binaries:
Node: 18.17.1
npm: 9.6.7
Yarn: 1.22.19
pnpm: N/A
Relevant Packages:
next: 14.0.4
eslint-config-next: 14.0.4
react: 18.2.0
react-dom: 18.2.0
typescript: 5.3.3
Next.js Config:
output: N/A
warn - Latest canary version not detected, detected: "14.0.4", newest: "14.0.5-canary.30".
Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 10 replies
-
|
This means is that you cannot support this behavior with just Server Components, you need to use either:
You have those 4 ways to archive it without problems, you can see more about it in this article. Also, Server actions are used to handle form submissions and mutations, but it's not limited to it, you can invoke it in event handlers, like Finally, as you can see you're just calling it directly in your Server component, that's why you got the error. Now, taking into account what was said, to make your work easier you can call Hope it helps! Don't hesitate to ask! |
Beta Was this translation helpful? Give feedback.
-
|
You can use a route handler or middleware! I'm unsure which one should be the best for you! But you can start with middleware! And to help you out, you can check this article that explains better the paths you can go to handle your cookies, if you need any additional help, just ask here!! 🙋♀️ |
Beta Was this translation helpful? Give feedback.
-
|
ok, thanks a lot! |
Beta Was this translation helpful? Give feedback.
-
|
hello @ananuness currently I'm working in my project and have problem with cookies. My current flow is |
Beta Was this translation helpful? Give feedback.
-
|
you can use a route handler but route handlers require absolute urls which require setting env vars for each of my environments xD I can use middleware but then that wont work for navigation to already rendered routes This is insane! so much problem with cookies... This should be fixed really, I used next for so many years but right now with v15 and app router I think I'm better off with some custom react setup. takes time, but maybe less than building apps with this complexity king, due to problems with most common web features |
Beta Was this translation helpful? Give feedback.
-
|
I am following the example code given above, and calling an embedded server action function in page.tsx component, but I still get "Error: Cookies can only be modified in a Server Action or Route Handler.", so I am a little confused now. There must be some other subtleties to getting this working that are not documented. |
Beta Was this translation helpful? Give feedback.
This means is that you cannot support this behavior with just Server Components, you need to use either:
You have those 4 ways to archive it without problems, you can see more about it in this article.
Also, Server actions are used to handle form submissions and mutations, but it's not limited to it, you can invoke it in event handlers, like
useEffectfor example. See more about Server Actions and its behavior here.Finally, as you can see you're just calling it directly in your Server component, that's why you got the error. Now, taking into account what was said, to make your work ea…