학습 Next.js - Day 12 / App Router?, 페이지 라우팅 설정, 레이아웃 설정

이유승·2024년 10월 9일

학습 Next.js

Next.js 학습

목록 보기

13/27

1. App Router?

레이아웃 설정 방식 변경
데이터 페칭 방식 변경
페이지 라우팅 방식 변경
React 18 버전 대응
-> React Server Component, Streaming 등등..

App Router와 Page Router는 완전히 다른 개념이라는 평가도 있다.
Next.js가 아예 다른 프레임워크가 되었다는 소리도 있을 정도.

물론, 네비게이팅 / 프리페칭 / 사전 렌더링 등의 개념은 Page Router의 그것과 동일하거나 비슷하게 유지되었다.

npx?

NPM으로 패키지를 설치할 때는 터미널에 'npm~'로 시작하는 일련의 명령어를 입력하게 된다.
그런데 가끔 가다가 'npx~'로 시작하는 명령어를 볼 때가 있다.
NPX, Node Package Executor. 등록된 Node.js 패키지를 설치 없이 항상 최신버전으로 끌어다가 사용하는 명령어.

npx create-next-app@rc .

npx 방식으로 next.js가 적용된 보일러 플레이트로 프로젝트 파일을 생성.
@rc는 next를 rc 버전, 출시 후보 버전으로 설치하겠다는 옵션.
-> 강의 촬영 날짜인 6월 말에서는 Next.js 15버전이 정식 출시 되지 않아서 강의상에서는 @rc 명령어를 사용. 정식으로 15버전이 출시한 뒤에는 입력할 필요가 없다.

next.config.mjs?

Next App에서 옵션을 설정해주는 파일

App Router에서는 더 이상 페이지 폴더가 존재하지 않는다.

Pages 폴더 대신에 app 폴더가 존재한다.

page.tsx, layout.tsx

App Router 방식에서 이들은 각각 페이지 역할과 페이지의 레이아웃 역할을 수행한다.

2. App Router에서 페이지 라우팅 설정하기

기존 Page Router에서는 위와 같은 방법을 사용했었다.

기본 개념은 Page Router와 크게 다르지 않다. 메인 페이지의 역할을 하는 파일과 기타 폴더의 위치, 역할 등이 조금 다른 정도.
다만 URL 요청에 따라 페이지를 구분할 때, 파일 자체의 이름으로 구분하는 방식에서 폴더 이름으로 구분하는 식으로 바뀌었다. 폴더 내부에 있는 'page'이름을 가진 파일이 페이지 컴포넌트로 간주되는 식.

App Router에서 쿼리스트링을 받는 방법

어떤 경로로 쿼리스트링을 보내면, App Router 방식의 페이지 컴포넌트에서는 Props로 이를 받아들인다.

'search?q=한입'

위와 같은 방식으로 search 페이지에 '한입'이라는 문자열을 쿼리스트링 방식으로 넘긴다고 가정해보자.

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

search 페이지에서는 위와 같은 Props를 받게된다. 이를 이용해서 원하는 값을 가져오면 된다.

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

id값 등을 활용해야하는 상황이라면, 동일한 방식으로 param을 가져오면 된다.

동적 경로 설정 방법

id / 정적 경로 설정 방법
-> 하나의 페이지만을 필요로 할 때 사용
[id] / 동적 경로 설정 방법 1
-> 'book/1', 'book/2' 등등.. 뒤에 오는 params의 값이 달라지더라도 동적으로 페이지를 생성.
[...id] / 동적 경로 설정 방법 2 - Catch All Segment
-> 'book/1/2'와 같이 params가 중첩되는 경우에도 대응. 이 경우 페이지 컴포넌트에서 받아들이는 params의 값은 '12'가 된다.
[[...id]] / 동적 경로 설정 방법 3 - Optional Catch All Segment
-> 'book/'이라는 식으로 params가 없는 경우에도 대응. 이 때에는 정적 경로 설정 방법을 혼합해서 사용해도 되지만, 하나의 페이지 컴포넌트로 모든 상황을 대응하고 싶을 때 사용.

3. App Router에서 레이아웃 설정하기

페이지 폴더 안에 'layout' 파일을 생성하면, 해당 페이지의 레이아웃 설정 파일로 간주된다.
-> 해당 경로로 시작하는 모든 페이지의 레이아웃으로 적용.
-> 따라서 경로가 중첩되는 경우, 최상위 경로의 레이아웃 설정이 하위 경로 페이지들의 레이아웃으로 적용된다.

하위 경로 폴더에 layout이 따로 존재한다면? 위와 같은 구조로 레이아웃 설정이 중첩된다.
그렇기에 최상위 app 폴더 내부의 layout 파일은 해당 프로젝트의 모든 파일에 적용되는 '루트 레이아웃'이 된다.

Root Layout

Next.js의 핵심 파일 중 하나. 해당 프로젝트의 HTML, Body 태그를 생성해서 처리하는 필수 기능을 담당한다.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

루트 레이아웃 파일의 기본 구조. Next.js에서는 우선 레이아웃 파일이 렌더링 되고 그 다음에 페이지 파일이 실행된다. 따라서 루트 레이아웃 파일의 동작 원리는, children props로 페이지 역할을 수행하는 컴포넌트를 전달받아 html, body 태그 하위에서 반환되도록 구성되어 있다.
이 루트 레이아웃 파일은 절대로 건들여서는 안된다. 이름도 수정하면 안된다. Next.js에서는 루트 레이아웃 파일이 감지되지 않을 경우 에러도 발생시키는 것도 아니고, 루트 레이아웃 파일을 바로 재생성해버린다.

커스텀 레이아웃

import { ReactNode } from "react";

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

search 폴더 내부에 위와 같은 레이아웃 파일을 생성했다고 가정하자. 그렇다면 이 레이아웃은 /search로 시작하는 모든 경로에 위치한 페이지 컴포넌트에 공통적으로 적용되는 레이아웃으로 작동한다.
동작 원리는 Root Layout과 동일하다. 레이아웃 파일은 페이지 컴포넌트보다 우선적으로 동작하기 때문에 children이라는 Props를 받아서 반환해주도록 설정해야한다.

Route Group

당연하지만 모든 페이지의 레이아웃에 공통된 요소가 존재하는 것은 아니다. 어떤 것은 특정 페이지에만, 어떤 것은 몇몇 페이지들에만 존재해야한다.
경로와 무관하게 특정 페이지에만 레이아웃을 적용하고 싶을 때 Route Group을 사용한다. 페이지 폴더의 이름을 소괄호()로 감싸게 되면 동작한다.
Route Group으로 적용된 폴더는 경로상에 아무런 영향도 미치지 않는 별도의 컴포넌트로 간주된다.
특정 페이지들에 공통적으로 포함되어야 하는 레이아웃이 있을 경우, Route Group으로 페이지 폴더를 생성하고 그 내부에 페이지 파일과 레이아웃을 적용시키면 된다.

강의 프로젝트를 기준으로 설명하자면..
-> Route Group을 이용해서 searchbar가 존재해야하는 메인 페이지와 검색 페이지를 묶는다.
-> searchbar가 존재하지 않는 북 페이지는 Route Group 바깥에 위치하기 때문에 searchbar가 렌더링 되지 않는다.