Next.js: App Router 및 라우팅 (Step 2)

1. 파일 시스템 기반 라우팅

Next.js의 App Router 는 파일 시스템을 사용하여 라우트를 정의합니다. app 폴더 내의 폴더 구조가 곧 URL 경로가 됩니다.

• app/page.tsx -> /
• app/about/page.tsx -> /about
• app/blog/[id]/page.tsx -> /blog/123 (동적 라우트)

---

2. 레이아웃(Layout)과 페이지(Page)

• layout.tsx: 여러 페이지에서 공유되는 UI입니다. (헤더, 푸터 등) 렌더링 시 상태가 유지되며 페이지 이동 시에도 다시 렌더링되지 않습니다.
• page.tsx: 해당 경로의 고유한 UI를 나타냅니다.

---

3. 링크 이동 (Link Component)

HTML의 <a> 태그 대신 Next.js의 <Link> 컴포넌트를 사용하면 클라이언트 사이드 내비게이션을 수행하여 성능이 향상됩니다.

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/">홈으로</Link>
      <Link href="/dashboard">대시보드</Link>
    </nav>
  );
}

---

4. 프로그래밍 방식 이동 (useRouter)

이벤트 핸들러 내부에서 페이지를 이동시켜야 할 때 사용합니다.

'use client';

import { useRouter } from 'next/navigation';

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

  return (
    <button onClick={() => router.push('/dashboard')}>
      로그인
    </button>
  );
}