Tipar Page Params no Next.js App Router

// app/blog/[slug]/page.tsx

// Define o tipo dos params
type Params = {
  slug: string;
};

// Next.js 15+: params é Promise
type PageProps = {
  params: Promise<Params>;
};

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params;

  // slug agora é string tipada
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// app/products/[category]/[id]/page.tsx

type Params = {
  category: string;
  id: string;
};

type PageProps = {
  params: Promise<Params>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

export default async function ProductPage({ params, searchParams }: PageProps) {
  const { category, id } = await params;
  const { sort, color } = await searchParams;

  const product = await getProduct(category, id);
  // sort é string | string[] | undefined
  // TypeScript te obriga a tratar cada caso

  return <div>{product.name}</div>;
}

// app/docs/[...slug]/page.tsx

// Catch-all: slug é um array de strings
type Params = {
  slug: string[];
};

type PageProps = {
  params: Promise<Params>;
};

export default async function DocsPage({ params }: PageProps) {
  const { slug } = await params;

  // slug = ["getting-started", "installation"]
  // para URL /docs/getting-started/installation
  const path = slug.join("/");
  const doc = await getDoc(path);

  return <div>{doc.content}</div>;
}

// Optional catch-all: [[...slug]]
// slug pode ser undefined (página raiz)
type OptionalParams = {
  slug?: string[];
};

// app/blog/[slug]/page.tsx

type Params = {
  slug: string;
};

// generateStaticParams retorna array do tipo Params
export async function generateStaticParams(): Promise<Params[]> {
  const posts = await getAllPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// Com múltiplos params
// app/products/[category]/[id]/page.tsx
type ProductParams = {
  category: string;
  id: string;
};

export async function generateStaticParams(): Promise<ProductParams[]> {
  const products = await getAllProducts();

  return products.map((p) => ({
    category: p.category,
    id: p.id.toString(), // params são sempre string
  }));
}

// Tipo específico para seus search params
type SearchParams = {
  page?: string;
  sort?: "asc" | "desc";
  category?: string;
};

type PageProps = {
  params: Promise<{ slug: string }>;
  searchParams: Promise<SearchParams>;
};

export default async function ListPage({ searchParams }: PageProps) {
  const { page = "1", sort = "desc", category } = await searchParams;

  // page é string, converta pra number quando precisar
  const currentPage = parseInt(page, 10);

  // sort já está tipado como "asc" | "desc"
  const items = await getItems({
    page: currentPage,
    sort,
    category: category ?? "all",
  });

  return <ItemList items={items} />;
}