Hey guys. I'm trying to make cookie and originally, I created cookie via next/headers but the problem is that's based on the server.

import {NextRequest, NextResponse} from "next/server";
import {cookies} from "next/headers";

export async function GET(req: NextRequest) {
    let cookieStore = cookies();
    let uuid = cookieStore.get("motion-user");

    return NextResponse.json({"uuid": uuid});
}

export async function POST(req: NextRequest, res: NextResponse) {
    const data = await req.json();
    let cookieStore = cookies();

    cookieStore.set("client", data.uuid);

    return NextResponse.json({});
}

So I tried to create client side cookie

import {NextRequest, NextResponse} from "next/server";
import {cookies} from "next/headers";
import {setCookie} from "cookies-next";


export async function GET(req: NextRequest) {
    let cookieStore = cookies();
    let uuid = cookieStore.get("motion-user");

    return NextResponse.json({"uuid": uuid});
}

export async function POST(req: NextRequest, res: NextResponse) {
    const data = await req.json();

    setCookie("client", data.uuid, { req, res, maxAge: 60 * 6 * 24 });
    return NextResponse.json({});
}

but the error said :

 TypeError: Cannot read properties of undefined (reading 'set')
[NEXT]     at setCookie (webpack-internal:///(rsc)/./node_modules/cookies-next/lib/index.js:110:25)
[NEXT]     at POST (webpack-internal:///(rsc)/./app/api/client/route.ts:21:60)
[NEXT]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[NEXT]     at async D:\Project\web\Motion\motion-web\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63809
[NEXT]     at async eU.execute (D:\Project\web\Motion\motion-web\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53964)
[NEXT]     at async eU.handle (D:\Project\web\Motion\motion-web\node_modules\next\dist\compiled\next-server\app

how can I make client side cookie?