참치코더의 꿈 메모장

Next.js App Router에서 페이지 라우팅 & 레이아웃 설정 하기 본문

Next.js

Next.js App Router에서 페이지 라우팅 & 레이아웃 설정 하기

참치깡 2026. 1. 2. 18:11
728x90

 

 

Next.js 13부터 도입된 App Router는 기존 pages 라우터와 달리 폴더 구조 기반 라우팅 

레이아웃 개념을 핵심으로 한다.

 

App Router 기본 구조

 

App Router는 app/ 디렉토리를 기준으로 동작한다.

 

app/

  layout.tsx  : 전역 레이아웃

  page.tsx : 루트 페이지 (/)

  globals.css

  about/

  page.tsx

 

규칙

- page.tsx : 실제 페이지이다.

- layout.tsx : 해당 경로 이하에 적용되는 레이아웃이다.

- 폴더 이름 : URL 경로를 나타낸다.

 

기본 페이지 라우팅

 

루트 페이지 (/)

 

app/page.tsx

 

export default function Home() {

  return <h1>Home Page</h1>

}

 

접속 URL : http://localhost:3000/

 

하위 페이지 (/about)

 

export default function About(){

  return <h1>About Page</h1>

}

 

접속 URL : http://localhost:3000/about

 

- pages 라우터와 달리 폴더만 만들면 자동 라우팅이 된다.

 

전역 레이아웃 설정(layout.tsx)

 

App Router에서는 모든 페이지가 layout.tsx를 반드시 가져야 한다.

 

// app/layout.tsx

 

export default function RootLayout({

  children,}: {children: React.ReactNode;}) {

  return  (

  <html lang="ko">

      <body>

       <header>공통 헤더</header>

       <main>{children}</main>

      <footer>공통 푸터</footer>

      </body>

  </html>

 );

}

 

역할

 

1. 헤더 및 푸터

2. 전역 스타일

3. 공통 레이아웃 UI

 

중첩 레이아웃(Nested Layout)

 

폴더마다 layout.tsx를 추가하면 해당 경로 이하에만 적용되는 레이아웃을 만들 수 있다.

 

app/
     layout.tsx
     page.tsx
     dashboard/
         layout.tsx
          page.tsx

 

- 중첩 레이아웃은 상위 폴더에 있는 레이아웃을 포함해 중첩되어 자동으로 합성된다.

 

레이아웃 유지 및 페이지 전환

 

App Router의 큰 장점 중 하나는 페이지 이동 시 레이아웃이 유지된다는 점이다.

 

/dashboard ->  /dashboard/settings

 

- home에 있는 헤더, dashbord에 있는 사이드 바 레이아웃이 유지된다.

- 페이지 부분만 변경된다.

- SPA 느낌의 자연스러운 UX 연출이 가능하다.

 

Route Group

 

- 폴더 이름을 ( )로 감사면 URL 경로에는 포함되지 않는다.

- 레이아웃 / 구조 분리에만 사용이 된다.

 

app/
     (auth)/
        login/
            page.tsx
        register/
             page.tsx

 

실제 URL

 

/login

/register

 

- (auth)는 URL에 나타나지 않는다.

- 만약 특정 경로들만 레이아웃을 적용하고 싶다면 Route Group을 사용한다.

 

쿼리스트링(Search Params) 받는법

 

App Router에서는  searchParams를 props로 직접 받는다.

 

app/posts/page.tsx

 

export default async function PostPage({searchParams}: {SearchParams: {keyword?: string;}}) {

  const keyword = await searchParams.keyword;

 

 return <div>검색어: {keyword} </div>;

}

 

URL : /posts?keyword=next.js

728x90
저작자표시 비영리 (새창열림)

'Next.js' 카테고리의 다른 글

Next.js / App Router 네비게이팅 정리  (0) 2026.01.06
Next.js / App Router 버전 (서버 컴포넌트 vs 클라이언트 컴포넌트) 정리  (0) 2026.01.06
React / useEffect의 3가지 기능  (0) 2025.11.15
Next.js / pages 라우팅 공통 레이아웃 & 개별 레이아웃 적용 방법  (0) 2025.11.14
Next.js / ISR(Incremental Static Regeneration), 메타데이터 설정법 정리  (0) 2025.11.11
'Next.js' Related Articles more
Comments