NextJS : App Router & Layout

App Router란?

next 13 버전에 새롭게 추가된 라우터로 기존의 Page router 를 대체한다.

 

그래서 기존의 Page router 방식에서 달라지는 점은 아래와 같다.

 

1. 변경되거나 추가되는 사항

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

그리고 크게 변경되지 않는 사항도 있는데

 

2. 크게 변경되지 않는 사항

• 네비게이팅
• 프리페칭
• 사전 렌더링

이 부분들은 크게 변경되지 않았다고 한다.

 

Next.js 15v 설치하기

npx create-next-app@rc (폴더 이름)

 

그 이후에 설치와 관련된 선택사항은 위와 같이 기본적으로 설정하나 이후에는 상황에 따라 선택하면 될 것 같다.

App Router  라우팅 설정하기

기존의 Page Router 버전의 페이지 라우팅은 Pages 폴더 아래에 index.tsx 파일은 index 페이지 search.tsx 파일은 search 페이지가 되는 것처럼 Pages 폴더 아래에 생성해준 파일들의 이름이 경로가 되었다.

 

반면 App Router 버전에서 무조건 page.tsx 라는 이름을 갖는 파일만 page 파일로 취급이된다.

 

그래서 ~/search 라는 경로에 대응하는 페이지를 만들려면 app 폴더 아래에 search 폴더를 만들고 그 안에 Page 역할을 담당하는 page.tsx 라는 파일을 만들어 주어야 한다.

 

동적경로를 갖는 페이지도 이와 비슷한데, 먼저 app 폴더 아래에 book 이라는 폴더를 만들고 그 아래에 또 [id]와 같은 URL Parameters 에 대응하는 폴더를 만들고 아래에 page.tsx 라는 파일을 별도로 만들어 주면 된다.

 

그래서 실제로 page 를 만들어 보면 아래와 같이 만들 수 있다.

 

1. 인덱스 페이지

app > page.tsx

import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.page}>
      인덱스 페이지
    </div>
  );
}

 

2. 서치 페이지

app > search > page.tsx

export default function Page(){
  return <div>Search 페이지</div>
}

 

App Router 에서는 쿼리 스트링을 꺼내 쓰려면 페이지 컴포넌트에게 자동으로 전달되는 props 에서 꺼내서 사용하면 되는데, App Router  버전의 next app 에서는 기본적으로 쿼리 스트링이나 또는 URL 파라미터처럼 경로와 힘께 명시되는 값들은 이 페이지 컴퍼넌트에세 props 로 전달이 된다,

export default function Page(props){
  console.log(props)
  return <div>Search 페이지</div>
}

 

그래서 페이지 컴포넌트에 전달된 props를 console.log로 출력하면 터미널 창에 { params : {}, searchParams: { q: ' '} } 형태로 찍힌다.

 

그래서 이를 이용한 서치 페이지를 구성하면 아래와 같다.

export default function Page({ 
  searchParams 
}: { 
  searchParams: {
    q?: string
  };
}) {
  return <div>Search 페이지 {searchParams.q}</div>
}

 

3. 북 페이지(동적경로)

app > book> [id] > page.tsx

 

동적 경로를 같는 페이지도 위와 같은 방법을 활용하여 페이지를 구성할 수 있다.

export default function Page({
  params,
} : {
  params: { id: string | string[] };
}) {
  return <div>Book/[id] 페이지{params.id}</div>
}

레이아웃 설정하기

앱 라우터에서 경로는 page 라는 이름의 파일이 페이지 역할을 하는 파일로 자동 설정이 된다고 했는데,

레이아웃도 마찬가이다. 

 

그래서 만약 서치 폴더 아래에 layout.tsx 하는 파일을 생성하면 이제 이 파일은 서치 페이지의 레이아웃으로써 자동으로 설정이 된다.

 

그리고 "/search" 경로로  시작하는 모든 페이지의 레아아웃으로 적용되어 만약 seach 폴더 아래에 setting 이라는 폴더를 생성하고 그 안에 page.tsx 파일을 만들어도 search 폴더 아래에 생성된 레이아웃이 잘 적용이 된다.

 

그리고 추가적으로 search > setting 폴더에  layout.tsx 파일을 만들면 위 그림과 같이 레이아웃이 중첩되어 적용된다.

 

이제 레이아웃을 실제로 적용해 보자

app > search > layout.tsx

import { ReactNode } from "react";

export default function Layout({ 
  children,
}: { 
  children: ReactNode;
}) {
  return (
    <div>
      <div>임시 서치바</div>
      {children}
    </div>
  )
}

 

레이아웃 컴포넌트를 만들고 Children 이라는 props 를 통해서 페이지 컴포넌트를 전달받아 리턴문 안에 어디에 렌더링 할지 직접배치 시켜준다.

 

그리고 공통된 경로가 아닌 특정 페이지들에서 동일한 레이아웃을 설정하여 적용할 수 있는데,

이는 App Router 버전의 새로운 기능인 라우트 그룹(Route Group)이라는 것을 이용하면 된다.

 

라우트 그룹은 () 소괄호로 감싸진 폴더를 예를 들어 (with-searchbar) 이런 식으로 폴더 명을 작성해주면 라우터 그룹이 되는데, 이 라우터 그룹은 경로상에는 아무런 영향을 미치지 않는 그런 폴더가 된다.\

 

그래서 이 라우터 그룹 폴더에 특정 페이지 파일을 넣고 그 안에 레이아웃 파일을 넣으면 해당 페이지에만 동일한 레이아웃을 적용시킬 수 있다.

결과는 아래와 같다.

 

(with-searchbar) 라우트그룹 폴더에 넣은 인덱스 페이지와 서치페이지는 "임시 서치바"라는 레이아웃이 적용되었지만

 

그렇지 않은 북 페이지는

레이아웃이 적용되지 않았다.

 

출처 : [한 입 크기로 잘라먹는 Next.js(15+) 강의]