Section 4. App Router 시작하기(1)

OlMinJe·2025년 10월 13일

next.js

Next.js

목록 보기

11/20

인프런 "한 입 크기로 잘라먹는 Next.js" 수강

1️⃣ 프로젝트 생성하기

먼저 아래 명령어로 새로운 Next.js 프로젝트를 만들어준다.

npx create-next-app@latest section03

설치 중에 나오는 질문 중

Would you like to use App Router?

👉 Yes 를 선택!

App Router를 사용하면, 기존에 있던 pages 폴더가 사라지고 app 폴더 구조로 전환된다.

app router 폴더 구조

✅ App Router는 Next.js 13부터 새롭게 도입된 방식으로, 서버 컴포넌트 기반의 훨씬 유연한 구조를 제공한다.

2️⃣ 페이지 라우팅 설정하기

App Router에서 페이지 라우팅은 어떻게 다를까?

기존 Page Router에서는 index.tsx를 만들어 페이지를 구성했지만, 이제는 파일 이름이 page.tsx 로 바뀌었다.
즉, 경로마다 page.tsx 파일을 만들어주면 그게 바로 “페이지”가 된다.

App Router에서는 Query String이나 URL 파라미터 같이 경로 상에 포함되는 값은 page.tsx 컴포넌트의 props로 전달된다는 것을 기억하며 살펴보자!

(1) URL 파라미터 설정하기

예전처럼 [id].tsx 파일을 만들지 않고, 이제는 [id]라는 폴더를 생성한 후, 그 안에 page.tsx를 만들어야 한다.

URL 파라미터 폴더 구조

export default function Page() {
  return <div>book/[id] page 입니다</div>;
}

실행하면 아래와 같은 결과를 확인할 수 있다.

URL 파라미터 실행 결과

URL 파라미터 값을 꺼내서 사용해보자!

export default async function Page({ params }: { params: { id: string } }) {
  const { id } = params;
  return <div>book/[id] page: {id}</div>;
}

URL 파라미터 값 꺼내기 결과

✅ 정리하며

params는 URL 경로의 파라미터 값을 Promise 형태로 전달해준다.

세그먼트(...id)도 동일하게 사용할 수 있지만, 경로가 없을 수도 있다면 [[...id]] 로 설정해주는 게 안전하다.

(2) Query String 설정하기

props를 콘솔로 출력해보면, params: Promise {...}, searchParams: Promise {...} 의 객체 형태의 값을 확인할 수 있다.

export default async function Page({ searchParams }: { searchParams: { q: string } }) {
  const { q } = searchParams;
  return <div>검색 페이지: {q}</div>;
}

쿼리 스트링 실행 결과

참고로 함수형 컴포넌트에 async를 붙일 수 있는 이유는, App Router의 컴포넌트가 서버 컴포넌트(Server Component) 로 동작하기 때문!

3️⃣ 레이아웃 설정하기

App Router는 페이지마다 반복되는 UI를 효율적으로 관리할 수 있다.

(1) 공통된 경로의 레이아웃 만들기

특정 경로에 공통된 UI를 적용하려면, 해당 폴더에 layout.tsx 파일을 추가하면 된다.

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

layout.tsx → page.tsx 순으로 실행되며, 하위 경로에도 자동으로 적용됨.

하위 폴더(setting)에도 layout.tsx를 추가하면, 두 개의 레이아웃이 중첩 적용된다.

export default function Page() {
  return <div>search/setting</div>;
}

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <div>세팅 헤더</div>
      {children}
    </div>
  );
}