페이지와 라우팅

// app/blog/[id]/page.tsx
// /blog/1, /blog/2, /blog/abc 모두 이 파일이 처리

interface Props {
  params: { id: string };
}

export default function BlogPost({ params }: Props) {
  return (
    <article>
      <h1>블로그 글 #{params.id}</h1>
      <p>id는 URL에서 가져온 값입니다.</p>
    </article>
  );
}

// /blog/42 접속 → params.id = "42"

// 실전: DB에서 데이터 가져오기
// app/blog/[id]/page.tsx

interface Props {
  params: { id: string };
}

export default async function BlogPost({ params }: Props) {
  // 서버에서 직접 DB 조회 가능!
  const post = await db.post.findUnique({
    where: { id: Number(params.id) },
  });

  if (!post) return <div>글을 찾을 수 없습니다</div>;

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

// 프로그래밍 방식 네비게이션
"use client";
import { useRouter } from "next/navigation";

function LoginButton() {
  const router = useRouter();

  async function handleLogin() {
    const result = await login();
    if (result.success) {
      router.push("/dashboard"); // 페이지 이동
    }
  }

  return <button onClick={handleLogin}>로그인</button>;
}