Next.js / Cookie ба Header

Cookie ба Header

Вэб хөтөч болон сервер хоорондоо мэдээлэл дамжуулахдаа хоёр чухал механизм ашигладаг — cookie болон header. Next.js App Router дотор эдгээрийг уншиж, тохируулах нь маш хялбар.

Cookie нь хэрэглэгчийн хөтөч дээр хадгалагдах жижиг өгөгдөл юм. Суpabase session, хэрэглэгчийн тохиргоо, хэл сонголт зэргийг cookie-д хадгалдаг.

Server Component дотор

Server Component болон Route Handler дотор next/headers-н cookies() функцийг ашиглана:

typescript
// app/profile/page.tsx
import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const cookieStore = await cookies();

  // cookie унших
  const theme = cookieStore.get('theme');
  console.log(theme?.value); // 'dark' эсвэл 'light'

  // бүх cookie-г жагсаах
  const all = cookieStore.getAll();
  console.log(all);

  return <div>Профайл хуудас</div>;
}

Route Handler дотор бичих

Cookie-г зөвхөн Route Handler болон Server Action дотор бичиж болно — Server Component дотор биш:

typescript
// app/api/theme/route.ts
import { cookies } from "next/headers";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const { theme } = await request.json();
  const cookieStore = await cookies();

  cookieStore.set("theme", theme, {
    httpOnly: true, // JavaScript-ээр унших боломжгүй
    secure: true, // зөвхөн HTTPS
    maxAge: 60 * 60 * 24 * 30, // 30 хоног
    path: "/",
  });

  return NextResponse.json({ success: true });
}
typescript
cookieStore.delete("theme");

Header унших ба нэмэх

Header нь хүсэлт болон хариуд нэмэгддэг мета мэдээлэл. Хэрэглэгчийн хэл, IP хаяг, контентын төрөл зэргийг header-ээс уншиж болно.

Request header унших

typescript
// app/page.tsx
import { headers } from 'next/headers';

export default async function HomePage() {
  const headerStore = await headers();

  const userAgent = headerStore.get('user-agent');
  const language = headerStore.get('accept-language');
  const ip = headerStore.get('x-forwarded-for');

  console.log('Хэрэглэгчийн хэл:', language); // 'mn-MN,mn;q=0.9'
  console.log('IP хаяг:', ip);

  return <div>Нүүр хуудас</div>;
}

Response header нэмэх

Route Handler-т хариуд header нэмэх:

typescript
// app/api/data/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const data = { message: "Сайн уу!" };

  return NextResponse.json(data, {
    headers: {
      "Cache-Control": "public, max-age=3600",
      "X-Custom-Header": "ulaanbaatar-app",
    },
  });
}

Middleware дотор header нэмэх

Middleware дотор бүх хариуд нэг дор header нэмж болно — жишээлбэл одоогийн URL замыг хуудсанд дамжуулах:

typescript
// middleware.ts
import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const response = NextResponse.next({
    request: { headers: request.headers },
  });

  // Server Component-д одоогийн замыг дамжуулна
  response.headers.set("x-current-path", request.nextUrl.pathname);

  return response;
}

Дараа нь Server Component дотор headers().get('x-current-path') ашиглан одоогийн замыг мэдэж болно — энэ бол маш өргөн ашиглагддаг pattern.

Дараагийн хичээлд:

Metadata болон SEO-г судална. Next.js-н metadata export ашиглан хуудасны гарчиг, тайлбар, keyword хэрхэн тохируулахыг ойлгоно.

← Өмнөх хичээлMiddleware үндэсДараах хичээл →Metadata ба SEO