Контекст запиту

type ProductPageProps = {
  params: Promise<{
    id: string;
  }>;
};

export default async function ProductPage({
  params,
}: ProductPageProps) {
  const { id } = await params;

  return (
    <main>
      <h1>Товар {id}</h1>
    </main>
  );
}

const productId = Number(id);

if (!Number.isInteger(productId)) {
  // Обробка некоректного ідентифікатора
}

app/
└── blog/
    └── [category]/
        └── [slug]/
            └── page.tsx

type ArticlePageProps = {
  params: Promise<{
    category: string;
    slug: string;
  }>;
};

export default async function ArticlePage({
  params,
}: ArticlePageProps) {
  const { category, slug } = await params;

  return (
    <article>
      <p>Категорія: {category}</p>
      <h1>Стаття: {slug}</h1>
    </article>
  );
}

category = "javascript"
slug = "promises"

/products/42?color=red&page=2

type ProductPageProps = {
  params: Promise<{
    id: string;
  }>;
  searchParams: Promise<{
    color?: string;
    page?: string;
  }>;
};

export default async function ProductPage({
  params,
  searchParams,
}: ProductPageProps) {
  const { id } = await params;
  const { color, page } = await searchParams;

  return (
    <main>
      <h1>Товар {id}</h1>
      <p>Колір: {color ?? "не вказано"}</p>
      <p>Сторінка: {page ?? "1"}</p>
    </main>
  );
}

/products?tag=frontend&tag=nextjs

type SearchParams = {
  tag?: string | string[];
};

const tags = await searchParams;
const rawTags = tags.tag;

const selectedTags = Array.isArray(rawTags)
  ? rawTags
  : rawTags
    ? [rawTags]
    : [];

import { cookies } from "next/headers";

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

  const sessionId = cookieStore.get("session_id")?.value;
  const language = cookieStore.get("language")?.value ?? "uk";

  return (
    <main>
      <p>Мова: {language}</p>
      <p>
        {sessionId ? "Сесію знайдено" : "Користувач не авторизований"}
      </p>
    </main>
  );
}

import { headers } from "next/headers";

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

  const userAgent = headerStore.get("user-agent");
  const requestId = headerStore.get("x-request-id");

  return (
    <main>
      <h1>Панель керування</h1>
      <p>User-Agent: {userAgent ?? "невідомо"}</p>
      <p>Request ID: {requestId ?? "не передано"}</p>
    </main>
  );
}

app/api/products/route.ts

import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const url = new URL(request.url);

  const category = url.searchParams.get("category");
  const page = url.searchParams.get("page") ?? "1";

  const response = {
    method: request.method,
    pathname: url.pathname,
    category,
    page,
    userAgent: request.headers.get("user-agent"),
  };

  return NextResponse.json(response);
}

GET /api/products?category=books&page=2

{
  "method": "GET",
  "pathname": "/api/products",
  "category": "books",
  "page": "2",
  "userAgent": "..."
}

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

export function GET(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  const page = request.nextUrl.searchParams.get("page") ?? "1";
  const sessionId = request.cookies.get("session_id")?.value;

  return NextResponse.json({
    pathname,
    page,
    hasSession: Boolean(sessionId),
  });
}

import { cookies, headers } from "next/headers";

type ProductPageProps = {
  params: Promise<{
    id: string;
  }>;
  searchParams: Promise<{
    filter?: string;
  }>;
};

export default async function ProductPage({
  params,
  searchParams,
}: ProductPageProps) {
  const { id } = await params;
  const { filter } = await searchParams;

  const headerStore = await headers();
  const cookieStore = await cookies();

  const sessionId = cookieStore.get("session_id")?.value;
  const userAgent = headerStore.get("user-agent");
  const host = headerStore.get("host");

  const productId = Number(id);

  if (!Number.isInteger(productId) || productId <= 0) {
    return <p>Некоректний ідентифікатор товару</p>;
  }

  return (
    <main>
      <h1>Товар {productId}</h1>

      <dl>
        <dt>Фільтр</dt>
        <dd>{filter ?? "не задано"}</dd>

        <dt>Сесія</dt>
        <dd>{sessionId ? "активна" : "відсутня"}</dd>

        <dt>Хост</dt>
        <dd>{host ?? "невідомо"}</dd>

        <dt>Браузер</dt>
        <dd>{userAgent ?? "невідомо"}</dd>
      </dl>
    </main>
  );
}

const { id } = await params;

const { id } = params;

const headerStore = await headers();
const cookieStore = await cookies();

params.id; // "42"
searchParams.sort; // "price"

const { page } = await searchParams;
const currentPage = page ?? "1";