Day 1

# Create a new Next.js app
npx create-next-app@latest my-app --typescript --tailwind --app --src-dir

# Prompts:
# Would you like to use ESLint? Yes
# Would you like to use import alias? Yes (@/*)

cd my-app && npm run dev
# Open http://localhost:3000

// No 'use client' = Server Component by default
// Can: fetch data, access DB directly, use async/await
// Cannot: use useState, useEffect, onClick, browser APIs

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
  return res.json()
}

export default async function Home() {
  const posts = await getPosts()  // direct async in server component

  return (
    <main>
      <h1>Latest Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </main>
  )
}

'use client'  // This makes it a Client Component

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
}

src/app/
├── page.tsx              → /
├── layout.tsx            → root layout (nav + footer)
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/
│       └── page.tsx      → /blog/my-post
└── dashboard/
    ├── layout.tsx        → dashboard sidebar layout
    ├── page.tsx          → /dashboard
    └── settings/
        └── page.tsx      → /dashboard/settings

interface Props {
  params: { slug: string }
}

export default async function BlogPost({ params }: Props) {
  // params.slug = whatever is in the URL
  const { slug } = params

  return (
    <article>
      <h1>Post: {slug}</h1>
    </article>
  )
}

// Generate static pages at build time
export async function generateStaticParams() {
  return [{ slug: 'hello-world' }, { slug: 'getting-started' }]
}

import { Metadata } from 'next'
import Link from 'next/link'

// Dynamic SEO metadata
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  return {
    title: `${params.slug} | My Blog`,
    description: `Read about ${params.slug}`,
    openGraph: { title: params.slug, type: 'article' }
  }
}

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog" prefetch={true}>Blog</Link>
      <Link href="/dashboard">Dashboard</Link>
    </nav>
  )
}