silent scroll
I have a file that currently looks like this:
'use server'
export async function setCookies(cookieA: string) {
cookies().set('cookieA', cookieA)
}
The above is in a file: app/actions.ts
What am I missing in order to make this a server action? I am simply trying to set some cookies before a request is made within a server component or a dedicated server action file
dusty trailBOT
Hi @silent scroll. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To make your function a server action, you need to import the cookies function from next/headers. Also, you need to specify 'use server' inside the function, not outside. Here's how you can modify your code:
import { cookies } from 'next/headers'
export async function setCookies(cookieA: string) {
'use server'
cookies().set('cookieA', cookieA)
}
This code will set a cookie named 'cookieA' with the value you pass to the setCookies function. Remember, the .set() method is only available in a Server Action or Route Handler.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
silent scroll
@dusty trail I've made those changes. Still not working. Here is the exact error message: - error Error: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
at setCookies (./src/app/actions.ts:18:61)
at Page (./src/app/home/page.tsx:28:70)
at async Promise.all (index 0)
digest: "3334692696"
dusty trailBOT
Let me check the knowledge base for you. One moment! :books:
The error message you're seeing is indicating that you're trying to modify cookies outside of a Server Action or Route Handler. This is not allowed in Next.js.
The cookies().set() function can only be used within a Server Action or Route Handler. This means you cannot use it directly inside a React component (like Page in your case).
If you want to set a cookie, you should do it in a Server Action or Route Handler. Here's an example of how you can do it in a Server Action:
// app/actions.js
import { cookies } from 'next/headers'
export async function setCookies(cookieA: string) {
'use server'
cookies().set('cookieA', cookieA)
}
Then, you can call this Server Action from your page:
// app/home/page.tsx
import { setCookies } from '../actions'
export default function Page() {
// Call the server action
setCookies('your-cookie-value')
// Rest of your code...
}
Remember, the setCookies function in this case is a Server Action, and it should be called in a server context, not directly in a React component.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
silent scroll
@dusty trail if I can't call it inside of a server component page.tsx, how can I call a server action?
dusty trailBOT
Let me check the knowledge base for you. One moment! :books:
You can invoke Server Actions in Next.js using several methods:
action: React's action prop allows invoking a Server Action on a <form> element.<form action={create}>
<input type="text" name="title" />
<textarea name="content" />
<button type="submit">Submit</button>
</form>
Using formAction: React's formAction prop allows handling <button>, <input type="submit">, and <input type="image"> elements in a <form>.
Custom Invocation with startTransition: Invoke Server Actions without using action or formAction by using startTransition. This method disables Progressive Enhancement (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#progressive-enhancement).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: