cookies on behaving as expected on API routes

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.12.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.1-canary.4
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

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.

   ,----
 3 | import { cookies } from 'next/headers';
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   `----

One of these is marked as a client entry with "use client":
pages\api\hello.tsx

Expected Behavior

probably return cookes as expected.

Link to reproduction

no link

To Reproduce

//pages/api/hello.tsx

import { cookies } from 'next/headers';

export default async function handler(req: any, res: any) {
    console.log(cookies())
}

[Fredkiss3]

I think for api routes, you should change the extension from .tsx to .ts because nextjs will interpret your file as a react component, whereas it is an api route.

[Fredkiss3]

Ah sorry, you can’t use headers and cookies from next/navigation in api routes, only in server components.

You can have access to headers and cookies in your api routes, with the req object in your api handler :

import type { NextApiRequest, NextApiResponse } from 'next';


export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const headers = req.headers;
  const cookies = req.cookies;

  return res.status(200).json({ headers, cookies });
}

I made an example to test : https://stackblitz.com/edit/vercel-next-js-ze7x8r?file=pages%2Fapi%2Fcookies.ts,app%2Fpage.tsx