Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// app/blog/[slug]/page.tsx
// Accessible at /blog/my-first-post, /blog/hello-world, etc.

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

export default function BlogPost({ params, searchParams }: PageProps) {
  return (
    <article>
      <h1>Post slug: {params.slug}</h1>
      <p>Page: {searchParams.page ?? '1'}</p>
    </article>
  );
}

// app/shop/[...categories]/page.tsx
// Matches /shop/clothing, /shop/clothing/shirts, etc.
export default function ShopPage({
  params,
}: {
  params: { categories: string[] };
}) {
  const breadcrumb = params.categories.join(' > ');
  return <h1>{breadcrumb}</h1>;
}

// Client component using Link and useRouter
'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

export default function Nav() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/dashboard">Dashboard</Link>
      <button onClick={() => router.push('/login')}>Login</button>
    </nav>
  );
}