한 입 크기로 잘라먹는 Next.js(15+)

# Section3

1. App Router 시작하기

App Router란?

• Next.js 13 버전에 새롭게 추가된 라우터
• 기존의 Page Router를 완전히 대체

변경되거나 추가되는 사항

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

크게 변경되지 않는 사항

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

Next app 생성하기

npx create-next-app@rc section3

create-next-app 옵션 참고

Page Router는 src/pages 폴더 였지만
App Router는 src/app 폴더이다

2. 페이지 라우팅 설정하기

App Router는 app 폴더를 기반으로 페이지 라우팅을 진행한다

경로 설정

가장 기본이 되는 인덱스 페이지는 app 폴더 바로 아래에 있는 page.tsx 이다

만약 ~/book 페이지를 만드려면
app 폴더 안에 book 폴더를 생성하고 그 안에 page.tsx 파일을 생성해준다

동적 경로 설정

동적 경로는 폴더명에 대괄호를 사용하여 설정한다

실습

1. $ npm run dev 로 시작

2. 기본 코드 제거

① globals.css, page.module.css → 내부 코드 전부 삭제
② page.tsx → 기본틀만 남기고 나머지 코드 삭제

// 📄 src/app/page.tsx
export default function Home() {
  return <div>인덱스 페이지</div>;
}

3. 페이지 컴포넌트 내부에서 쿼리스트링 사용하기 1

쿼리스트링이나 url파라미터처럼 경로와 함께 명시되는 값들은
페이지 컴포넌트에 props로 전달 된다

src/app/search 폴더 생성
src/app/search/page.tsx 파일 생성

// 📄 src/app/search/page.tsx
export default function Page({searchParams}: {
  searchParams: { q?: string };
}) {
  const q = searchParams.q;
  return <div>Search 페이지 {q}</div>;
}

⇒ props를 구조분해할당 → {searchParms}

4. 페이지 컴포넌트 내부에서 쿼리스트링 사용하기 2

src/app/book 폴더 생성
src/app/book/[id] 폴더 생성
src/app/book/[id]/page.tsx 파일 생성

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

⇒ props를 구조분해할당 → {params}

5. 참고

1. http://localhost:3000/book/1/2/3 같은 경로에 대응하고 싶다면
   폴더이름을 [...id]로 변경

2. http://localhost:3000/book 인덱스 경로에 대응하고 싶다면
   폴더이름을 [[...id]]로 변경

3. 레이아웃 설정하기

• App Router는 layout.tsx 파일이 레이아웃을 담당한다

• layout.tsx 파일이 위치하는 레벨의 페이지에 자동으로 적용된다

• 📁src
    ㄴ📁app
        ㄴ📄layout.tsx   →   HTML의 기초 틀을 잡아주는 아주 중요한 역할, 절대 없어지면 안되는 파일

📁 search

• layout.tsx가 먼저 렌더링 되고 그 안에 page.tsx가 렌더링된다
• layout.tsx는 ~/search 경로로 시작하는 모든 페이지의 레이아웃으로 적용될 수 있다

📁 setting

• setting 폴더 내부에 위치한 page.tsx 파일의 경로는 ~/search/setting
• ~/search 경로로 시작하기 때문에 search폴더의 layout.tsx 레이아웃이 함께 적용된다

실습하기

1. src/app/search/layout.tsx 파일 생성

// 📄 src/app/search/layout.tsx 
export default function Layout() {
  return (
    <div>
      <div>임시 서치바</div>
    </div>
  );
}

2. {children} props를 받아와서 페이지가 어디에 위치할 것인지 설정

// 📄 src/app/search/layout.tsx 
import { ReactNode } from 'react';

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

Route Group

• 경로와 상관없이 특정 페이지에 공통 layout 설정하는 방법이다

• 경로상 아무런 영향을 미치지 않고,
  각기 다른 경로를 갖는 페이지 파일들을 하나의 폴더에 묶어둘 수 있다

1. app 폴더 안에 소괄호로 감싼 폴더를 생성한다
2. 경로상의 문제 없이 동일한 레이아웃을 적용하려는 폴더 및 파일을 해당 폴더로 옮긴다
   

적용 결과