// ❌ Pages Router — [slug].tsx + getStaticPaths + getStaticProps

// 📁 pages/posts/[slug].tsx
import type { GetStaticPaths, GetStaticProps } from 'next';

interface Post { slug: string; title: string; content: string; }

export const getStaticPaths: GetStaticPaths = async () => {
  const posts: Post[] = await fetch('https://api/posts').then(r => r.json());
  return {
    paths: posts.map((p) => ({ params: { slug: p.slug } })),
    fallback: 'blocking', // SSR + cache for non-existent slug requests
  };
};

export const getStaticProps: GetStaticProps<{ post: Post }> = async (ctx) => {
  const slug = ctx.params?.slug as string;
  const post = await fetch(`https://api/posts/${slug}`).then(r => r.json());
  if (!post) return { notFound: true };
  return { props: { post }, revalidate: 60 };
};

export default function PostPage({ post }: { post: Post }) {
  return <article><h1>{post.title}</h1><p>{post.content}</p></article>;
}

// Disadvantages:
// - getStaticPaths + getStaticProps = 2 functions + 2 exports
// - Data, render, and static path definitions are all separated

// ✅ App Router — generateStaticParams + async Server Component

// 📁 app/posts/[slug]/page.tsx
import { notFound } from 'next/navigation';

interface Post { slug: string; title: string; content: string; }

// 1. Generate static paths at build time
export async function generateStaticParams(): Promise<{ slug: string }[]> {
  const posts: Post[] = await fetch('https://api/posts').then(r => r.json());
  return posts.map((p) => ({ slug: p.slug }));
}

// 2. Page component — async + automatic params inference
export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post: Post | null = await fetch(
    `https://api/posts/${params.slug}`,
    { next: { revalidate: 60 } },
  ).then(r => r.json());

  if (!post) notFound();

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

// 📁 app/docs/[...slug]/page.tsx — catch-all
export default async function Docs({
  params,
}: {
  params: { slug: string[] }; // Always an array
}) {
  const path = params.slug.join('/');
  const doc = await fetch(`https://api/docs/${path}`).then(r => r.json());
  return <article>{doc.content}</article>;
}

// 📁 app/study/[category]/[slug]/page.tsx — Double dynamic (codemaster40 pattern)
export async function generateStaticParams() {
  const all: { category: string; slug: string }[] = [];
  const categories = ['javascript', 'typescript', 'nextjs', 'react'];
  for (const cat of categories) {
    const lessons = await getLessons(cat);
    lessons.forEach((l) => all.push({ category: cat, slug: l.slug }));
  }
  return all;
}

export default async function LessonPage({
  params,
}: {
  params: { category: string; slug: string }; // Both inferred automatically
}) {
  // ...
}