英文:
How to set cookies on button click on next.js app route
问题
I tried to set cookies with the code below.
import Image from "next/image";import styles from "./page.module.css";import { cookies } from "next/headers";export default function Home() {function setCookie() {//code to set cookies}return (<div><div>hello</div><button onClick={setCookie}>Hello</button></div>);}
But it shows error Uncaught Error: Event handlers cannot be passed to Client Component props. <button onClick={function} children=...>; If you need interactivity, consider converting part of this to a Client Component.
so I added 'use client' in the top of the file.
After that it showed another error You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component
I am following the documentation of next.js app route (not page route). And I am not getting where I went wrong. Please help. I am new to next.js
英文:
I tried to set cookies with the code below.
import Image from "next/image";import styles from "./page.module.css";import { cookies } from "next/headers";export default function Home() {function setCookie() {//code to set cookies}return (<div><div>hello</div><button onClick={setCookie}>Hello</button></div>);}
But it shows error Uncaught Error: Event handlers cannot be passed to Client Component props.
<button onClick={function} children=...>
If you need interactivity, consider converting part of this to a Client Component.
so I added 'use client' in the top of the file.
After that it showed another error You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component
I am following the documentation of next.js app route (not page route). And I am not getting where I went wrong. Please help. I am new to next.js
答案1
得分: 1
Check this: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
This allows us to use server component function in client component through action props.
Example:
next.config.js
/** @type {import('next').NextConfig} */const nextConfig = { experimental: { serverActions: true } };module.exports = nextConfig
/app/page.tsx
import { Button } from "@/components/Button";export default function Home() {return (<div><div>hello</div><Button /></div>);}
/components/Button.tsx
"use client";import { setCookie } from "./setCookie";export function Button() {return (<form action={setCookie}><button type="submit">Hello</button></form>);}
/components/setCookie.tsx
"use server";import { cookies } from "next/headers";export async function setCookie() {cookies().set("foo", "bar");}
英文:
Check this: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
This allows us to use server component function in client component through action props.
Example:
next.config.js
/** @type {import('next').NextConfig} */const nextConfig = { experimental: { serverActions: true } };module.exports = nextConfig
/app/page.tsx
import { Button } from "@/components/Button";export default function Home() {return (<div><div>hello</div><Button /></div>);}
/components/Button.tsx
"use client";import { setCookie } from "./setCookie";export function Button() {return (<form action={setCookie}><button type="submit">Hello</button></form>);}
/components/setCookie.tsx
"use server";import { cookies } from "next/headers";export async function setCookie() {cookies().set("foo", "bar");}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论