티스토리 뷰

Front End/🤢 Next.js

Next.js 15 라우터 기본 사용법

James Wetzel 2025. 3. 13. 21:05

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를 정의하며, 동적 라우팅, 중첩 라우팅, 서버 액션 등을 지원합니다. 이를 통해 효율적이고 유지보수하기 쉬운 웹 애플리케이션을 구축할 수 있습니다.

728x90
반응형
저작자표시