无法在 Next.js 中的应用程序路由器中设置 cookie

Question

我正在学习 next.js，并且想设置一个 cookie，如下面的代码所示。

代码返回错误：“未处理的运行时错误。错误：Cookie 只能在服务器操作或路由处理程序中修改。”

我以为nextjs组件默认是服务器组件。我正在使用应用程序路由器。

我已经谷歌搜索，但没有成功解决这个问题。

谢谢你。

import {cookies} from "next/headers";

function doit() {

    return new Promise<string>((resolve, reject) =>
    {
      setTimeout(
        ()=>
        {
          resolve("doit");
        }, 2000);
    });
  }

  const Home: React.FC = async () => {
  
    let results:string = await doit();

    if(results=="doit")
    {
        cookies().set("done", "true")
    }

    return (
      <div>
        <h1>H1 text</h1>
       </div>
    );
  }
  
  export default Home;

Answer 1

就我而言，Next.js 有一些限制。您正在尝试在 Next.js 组件内的客户端设置 cookie。 Next.js 对修改 cookie 有一定的限制，只能在服务器操作或路由处理程序中修改它们。您必须实现服务器操作/路由处理程序，然后发出设置 cookie 的请求。

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
// Rest of implementation goes here
  let results: string = await doit();

  if (results === 'doit') {
    res.setHeader('Set-Cookie', 'done=true');
  }

  res.status(200).json({ message: 'Success' });
}

function doit() {
  return new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      resolve('doit');
    }, 2000);
  });
}

这将是请求 Cookie 的 api 处理程序。您可以使用 fetch/axios 从您发送的实际 Home 组件中获取数据。当然，请确保将其放置在服务器端，例如某个提供请求响应的服务器。

import { useEffect } from 'react';
import axios from 'axios';

const Home: React.FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/set-cookie');
        console.log(response.data);
      } catch (error) {
        console.error('Error setting cookie:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>H1 text</h1>
    </div>
  );
};

export default Home;

在

useEffect

中，您可以实现处理获取数据的逻辑，另请记住，您应该将 /api/set-cookies 替换为您的实际路径。

这篇文章应该会有帮助：https://maxschmitt.me/posts/next-js-cookies