How to Use Cookies in 'next/headers'?

Question

https://nextjs.org/docs/app/api-reference/functions/cookiesI added the following code to util.ts. I get the following error What is wrong?https://github.com/Taiki0807/english-learning-frontend/blob/main/utils/utils.tsexport const getAllCookies = (): string => {
  const cookieStore = cookies();
  const cookie = cookieStore
    .getAll()
    .map((cookie) => `${cookie.name}=${cookie.value}`)
    .join(';');
  return cookie;
};ErrorYou're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://beta.nextjs.org/docs/rendering/server-and-client-components

Alaskan Klee Kai · Answer

In this project, we create page components in the pages directory to separate the responsibilities of routing and UI. However, an error message appears stating that the pages directory is not supported. Additionally, the following items are marked as a client entry with "use client":./utils/cookie.ts
./app/_components/page/WordlearningPage/getCourses.ts
./app/_components/page/WordlearningPage/WordlearningPage.tsx
./app/_components/page/WordlearningPage/index.ts
./app/_components/page/index.ts
./app/(main)/wordlearning/layout.tsxThe last item, ./app/(main)/wordlearning/layout.tsx, is unrelated and not relevant to the current page. It uses "use client," but it is not related to this specific page.

How to Use Cookies in 'next/headers'?

1 Reply