Next.js 15 라우터 기본 사용법
1. App Router 구조
Next.js 15의 App Router는 app/ 디렉토리 내의 파일과 폴더 구조를 통해 라우팅을 정의합니다. 주요 파일과 그 역할은 다음과 같습니다:
page.tsx: 해당 경로의 페이지를 정의합니다. 예:app/page.tsx→/경로.layout.tsx: 해당 경로와 하위 경로에 적용되는 레이아웃을 정의합니다. 예:app/layout.tsx→ 전체 애플리케이션의 기본 레이아웃.error.tsx: 오류 발생 시 표시되는 오류 페이지를 정의합니다.loading.tsx: 로딩 중일 때 표시되는 UI를 정의합니다.route.tsx: API 엔드포인트를 정의합니다.
폴더를 추가하면 경로가 자동으로 생성됩니다. 예를 들어, app/blog/page.tsx는 /blog 경로를 정의합니다.
2. 기본 페이지 생성
루트 경로(/)에 페이지를 만들려면 app/page.tsx 파일을 작성합니다:
// app/page.tsx
export default function HomePage() {
return <h1>Welcome to Next.js 15!</h1>;
}이 코드는 / 경로에 접근했을 때 "Welcome to Next.js 15!"라는 메시지를 렌더링합니다.
3. 레이아웃 사용
레이아웃은 페이지의 공통 UI를 정의합니다. app/layout.tsx는 전체 애플리케이션에 적용되는 기본 레이아웃입니다:
// app/layout.tsx
import { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ko">
<body>
<header>헤더</header>
<main>{children}</main>
<footer>푸터</footer>
</body>
</html>
);
}여기서 {children}은 각 페이지의 콘텐츠를 나타냅니다.
4. 동적 라우팅
동적 경로를 만들려면 폴더 이름을 대괄호([])로 감쌉니다. 예를 들어, app/blog/[slug]/page.tsx는 /blog/:slug 경로를 처리합니다:
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
return <h1>블로그 포스트: {params.slug}</h1>;
}/blog/my-post에 접근하면 "블로그 포스트: my-post"가 표시됩니다.
5. 중첩 라우팅
폴더를 중첩하면 경로도 중첩됩니다. 예를 들어, app/shop/products/[id]/page.tsx는 /shop/products/:id 경로를 정의합니다:
// app/shop/products/[id]/page.tsx
export default function ProductPage({ params }: { params: { id: string } }) {
return <h1>상품 ID: {params.id}</h1>;
}6. 그룹 라우팅
URL에 영향을 주지 않으면서 경로를 그룹화하려면 폴더 이름을 괄호(())로 감쌉니다. 예: app/(auth)/login/page.tsx → /login.
7. API 라우트
route.tsx 파일로 API 엔드포인트를 정의할 수 있습니다:
// app/api/users/route.tsx
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({ message: '안녕하세요!' });
}/api/users에 GET 요청을 보내면 { "message": "안녕하세요!" }가 반환됩니다.
8. 클라이언트 사이드 라우팅
<Link> 컴포넌트를 사용해 클라이언트 사이드에서 페이지 이동을 처리합니다:
import Link from 'next/link';
export default function Navigation() {
return (
<nav>
<Link href="/">홈</Link>
<Link href="/blog">블로그</Link>
</nav>
);
}9. 서버 액션
서버에서 직접 호출 가능한 함수를 정의할 수 있습니다:
// app/actions.ts
'use server';
export async function createPost(data: FormData) {
const title = data.get('title');
// 서버에서 데이터 처리
}// app/page.tsx
import { createPost } from './actions';
export default function CreatePostForm() {
return (
<form action={createPost}>
<input name="title" />
<button type="submit">제출</button>
</form>
);
}10. 라우터 훅
next/navigation의 훅으로 클라이언트 사이드 라우팅을 제어할 수 있습니다:
import { useRouter } from 'next/navigation';
export default function MyComponent() {
const router = useRouter();
return <button onClick={() => router.push('/blog')}>블로그로 이동</button>;
}요약
Next.js 15의 App Router는 app/ 디렉토리의 파일 시스템을 기반으로 직관적인 라우팅을 제공합니다. page.tsx로 페이지를, layout.tsx로 레이아웃을, route.tsx로 API를 정의하며, 동적 라우팅, 중첩 라우팅, 서버 액션 등을 지원합니다. 이를 통해 효율적이고 유지보수하기 쉬운 웹 애플리케이션을 구축할 수 있습니다.