Read the Browse State from the URL

Before the controls can change the results, the page needs a reliable way to read the current browse selection. You will add this parsing in app/page.tsx so every later control change has one predictable destination.

Step 1 — Read the search parameters

Update the page signature so it accepts Next.js searchParams and resolve them at the beginning of the page function.

export default async function HomePage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; genres?: string; sort?: string; page?: string }>;
}) {
  const sp = await searchParams;

Step 2 — Normalize the text query

Create a query value that falls back to an empty string. This keeps the downstream data layer simple.

const query = sp.q || "";

Step 3 — Turn the genre string into numbers

The URL stores genre ids as a comma-separated value. Split it, remove empty pieces, and convert the remaining values to numbers.

const activeGenreIds = (sp.genres || "")
  .split(",")
  .filter(Boolean)
  .map(Number);

Step 4 — Normalize sort and page

Use a small parseSort helper so unsupported sort values fall back to rating, and clamp the page to at least 1.

Checkpoint

Open the page with a URL such as /?q=batman&genres=28,53&sort=year&page=2. The page should read those values without throwing, even before the controls are connected.