App Router

정호성·2025년 2월 20일

next.js

Next.js

목록 보기

7/18

App Router?

Next.js 13부터 도입된 App Router는 기존의 Page Router를 완전히 대체하는 디렉터리 기반 라우팅(Directory-based Routing) 방식의 라우터이다.

이를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효율적으로 조합할 수 있으며, 성능 최적화와 개발 경험 향상에 기여한다.

App Router를 사용하면...

변경되거나 추가되는 사항

React 18 신규 기능 추가 (React Server Component, Streaming 등)
데이터 페칭 방식 변경
레이아웃 설정 방식 변경
페이지 라우팅 설정 방식 변경

크게 변경되지 않는 사항

네비게이팅 (Navigating)
프리페칭 (Pre-Fetching)
사전 렌더링 (Pre-Rendering)

디렉터리 기반 라우팅

폴더 구조를 기반으로 페이지 라우팅이 자동 설정된다는 점은 Page Router와 동일하지만
App Router에서는 page라는 이름을 갖는 파일만 페이지로 설정된다.

서버 컴포넌트(page.tsx)의 props 개념

Next.js의 서버 컴포넌트(page.tsx)는 클라이언트 컴포넌트와 다르게 클라이언트에서 직접 props를 전달할 수 없고, Next.js가 자동으로 props를 제공하는 구조다.

서버 컴포넌트의 대표적인 props

children → 레이아웃에서 중첩된 페이지를 받을 때 사용
params → 동적 라우팅에서 URL 파라미터를 받을 때 사용 (Next.js 15부터 Promise로 변경됨)
searchParams → URL의 쿼리 스트링을 받을 때 사용 (Next.js 15부터 Promise로 변경됨)
기타 서버에서 전달되는 데이터 (예: 데이터베이스에서 가져온 값, API 응답 데이터 등)

// app/search/page.tsx

export default async function Page({
    searchParams,
}: {
    searchParams: Promise<{ q: string }>;
}) {
    const { q } = await searchParams;

    return <div>Search 페이지 : {q}</div>;
}

// app/book/[id]/page.tsx

export default async function Page({
    params,
}: {
    params: Promise<{ id: number }>;
}) {
    const { id } = await params;

    return <div>book/[id]페이지 : {id}</div>;
}

Catch-all Segments, Optional Catch-all Segments는 pages router를 사용할 때와 유사한 방식으로
[id]라는 폴더명을 [...id], [[...id]]로 바꿔주면 된다.
(pages router에서는 파일명을 [...id].tsx, [[...id]].tsx로 변경)

레이아웃 적용

RootLayout

RootLayout은 Next.js App Router에서 전체 페이지에 공통으로 적용되는 레이아웃을 정의하는 파일이다.
이 파일은 반드시 app/layout.tsx 경로에 존재해야 하며, Next.js는 이를 최상위(루트) 레이아웃으로 자동 인식한다.

// app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="ko">
            <body>
                <nav>네비게이션 바</nav>
                {children} {/* 각 페이지의 콘텐츠가 여기에 렌더링됨 */}
            </body>
        </html>
    );
}