Query Parameters

/products/keyboard

/products?q=keyboard

type SearchParams = Promise<{
  q?: string;
  page?: string;
}>;

type ProductsPageProps = {
  searchParams: SearchParams;
};

export default async function ProductsPage({
  searchParams,
}: ProductsPageProps) {
  const params = await searchParams;

  const query = params.q ?? "";
  const page = Number(params.page ?? "1");

  return (
    <main>
      <h1>Товари</h1>

      <p>Пошуковий запит: {query || "не задано"}</p>
      <p>Сторінка: {Number.isNaN(page) ? 1 : page}</p>
    </main>
  );
}

/products?q=keyboard&page=2

{
  q: "keyboard",
  page: "2"
}

const page = Number(params.page ?? "1");

const query = params.q ?? "";

/products?tag=books&tag=electronics

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

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const params = await searchParams;

  const tags = params.tag
    ? Array.isArray(params.tag)
      ? params.tag
      : [params.tag]
    : [];

  return (
    <main>
      <h1>Вибрані категорії</h1>

      <ul>
        {tags.map((tag) => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    </main>
  );
}

"use client";

import { useSearchParams } from "next/navigation";

export default function SearchStatus() {
  const searchParams = useSearchParams();

  const query = searchParams.get("q");
  const page = searchParams.get("page");

  return (
    <p>
      Запит: {query ?? "не задано"}, сторінка: {page ?? "1"}
    </p>
  );
}

const searchParams = useSearchParams();

const tags = searchParams.getAll("tag");
const hasSort = searchParams.has("sort");
const queryString = searchParams.toString();

import { Suspense } from "react";
import SearchStatus from "./SearchStatus";

export default function ProductsPage() {
  return (
    <main>
      <h1>Товари</h1>

      <Suspense fallback={<p>Завантаження параметрів...</p>}>
        <SearchStatus />
      </Suspense>
    </main>
  );
}

import Link from "next/link";

export default function ProductNavigation() {
  return (
    <nav>
      <Link href="/products?q=keyboard">
        Клавіатури
      </Link>

      <Link href="/products?q=mouse&page=2">
        Миші, сторінка 2
      </Link>
    </nav>
  );
}

import Link from "next/link";

export default function ProductNavigation() {
  return (
    <Link
      href={{
        pathname: "/products",
        query: {
          q: "keyboard",
          page: "2",
        },
      }}
    >
      Знайти клавіатури
    </Link>
  );
}

/products?q=keyboard&page=2

"use client";

import { useRouter } from "next/navigation";

export default function ProductActions() {
  const router = useRouter();

  function showSecondPage() {
    router.push("/products?page=2");
  }

  return (
    <button type="button" onClick={showSecondPage}>
      Наступна сторінка
    </button>
  );
}

router.replace("/products?q=keyboard");

/products?q=keyboard&sort=price&page=2

"use client";

import {
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation";

export default function Pagination() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function goToPage(page: number) {
    const params = new URLSearchParams(searchParams.toString());

    params.set("page", String(page));

    router.push(`${pathname}?${params.toString()}`);
  }

  return (
    <div>
      <button type="button" onClick={() => goToPage(1)}>
        1
      </button>

      <button type="button" onClick={() => goToPage(2)}>
        2
      </button>

      <button type="button" onClick={() => goToPage(3)}>
        3
      </button>
    </div>
  );
}

/products

q=keyboard&sort=price&page=2

/products?q=keyboard&sort=price&page=3

const params = new URLSearchParams(searchParams.toString());

params.delete("q");

router.replace(`${pathname}?${params.toString()}`);

const queryString = params.toString();
const url = queryString ? `${pathname}?${queryString}` : pathname;

router.replace(url);

app/
└── products/
    ├── page.tsx
    └── ProductsControls.tsx

// app/products/page.tsx
import { Suspense } from "react";
import ProductsControls from "./ProductsControls";

type SearchParams = Promise<{
  q?: string;
  page?: string;
}>;

type ProductsPageProps = {
  searchParams: SearchParams;
};

export default async function ProductsPage({
  searchParams,
}: ProductsPageProps) {
  const params = await searchParams;

  const query = params.q ?? "";
  const parsedPage = Number(params.page ?? "1");
  const page = Number.isInteger(parsedPage) && parsedPage > 0
    ? parsedPage
    : 1;

  return (
    <main>
      <h1>Товари</h1>

      <Suspense fallback={<p>Завантаження...</p>}>
        <ProductsControls />
      </Suspense>

      <p>
        Пошук: {query || "усі товари"}
      </p>

      <p>
        Поточна сторінка: {page}
      </p>
    </main>
  );
}

// app/products/ProductsControls.tsx
"use client";

import {
  FormEvent,
  useState,
} from "react";
import {
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation";

export default function ProductsControls() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [query, setQuery] = useState(
    searchParams.get("q") ?? "",
  );

  function updateQuery(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const params = new URLSearchParams(searchParams.toString());

    if (query.trim()) {
      params.set("q", query.trim());
    } else {
      params.delete("q");
    }

    // Після зміни пошуку починаємо з першої сторінки.
    params.set("page", "1");

    const queryString = params.toString();
    const url = queryString
      ? `${pathname}?${queryString}`
      : pathname;

    router.replace(url);
  }

  function clearQuery() {
    const params = new URLSearchParams(searchParams.toString());

    params.delete("q");
    params.set("page", "1");

    const queryString = params.toString();
    const url = queryString
      ? `${pathname}?${queryString}`
      : pathname;

    setQuery("");
    router.replace(url);
  }

  return (
    <div>
      <form onSubmit={updateQuery}>
        <label htmlFor="product-query">
          Пошук товарів
        </label>

        <input
          id="product-query"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Наприклад, keyboard"
        />

        <button type="submit">
          Знайти
        </button>
      </form>

      <button type="button" onClick={clearQuery}>
        Очистити пошук
      </button>
    </div>
  );
}

// Потенційно проблемний підхід
const url = `/products?q=${query}`;

const params = new URLSearchParams();

params.set("q", query);

const url = `/products?${params.toString()}`;

const searchParams = useSearchParams();

const params = await searchParams;

router.push(`${pathname}?page=2`);

const params = new URLSearchParams(searchParams.toString());

params.set("page", "2");

router.push(`${pathname}?${params.toString()}`);

const page = Number(params.page ?? "1");

const parsedPage = Number(params.page ?? "1");
const page = Number.isInteger(parsedPage) && parsedPage > 0
  ? parsedPage
  : 1;

router.replace(url);