Dynamic routes y parámetros en Next.js

Dynamic routes y parámetros en Next.js | Nicolás Garzón

TypeScript

// app/products/[slug]/page.tsx
type ProductPageProps = {
  params: Promise<{ slug: string }>;
};

export default async function ProductPage({ params }: ProductPageProps) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

TypeScript

export default async function DocsPage({
  params,
}: PageProps<"/docs/[...parts]">) {
  const { parts } = await params;
  const path = parts.join("/");
  return <Document path={path} />;
}

TypeScript

export default async function OrganizationLayout({
  children,
  params,
}: LayoutProps<"/organizations/[organizationId]">) {
  const { organizationId } = await params;
  const organization = await requireOrganization(organizationId);

  return (
    <OrganizationContextProvider initialValue={organization}>
      {children}
    </OrganizationContextProvider>
  );
}

TypeScript

"use client";

import { useParams } from "next/navigation";

export function ProductActions() {
  const { slug } = useParams<{ slug: string }>();
  return <button>Editar {slug}</button>;
}

TypeScript

export default async function ProductsPage({
  searchParams,
}: PageProps<"/products">) {
  const raw = await searchParams;
  const filters = productsFilterSchema.parse(raw);
  return <ProductsView filters={filters} />;
}

TypeScript

export default async function ProjectPage({
  params,
}: PageProps<"/organizations/[organizationId]/projects/[projectId]">) {
  const { organizationId, projectId } = await params;

  const session = await requireSession();
  const project = await getProjectForOrganization({
    organizationId,
    projectId,
    userId: session.user.id,
  });

  if (!project) notFound();

  return <ProjectDetails project={project} />;
}