Next.js - App router 구조

기본적인 파일구성방법

app router 버전의 페이지 라우팅 방식은 기존 page router 버전과 파일이름 작성 기능이 동일하지만, 몇가지 추가된 개념과 파일 네이밍이 존재한다.
참고로 page.tsx, layout.tsx 는 예약어이다.

app router 레이아웃 설정

app
├── (with-searchbar)
│   ├── error.tsx
│   ├── layout.tsx
│   ├── page.module.css
│   ├── page.tsx
│   └── search
│       ├── error.tsx
│       └── page.tsx
├── book
│   └── [id]
│       ├── page.module.css
│       └── page.tsx
├── globals.css
├── layout.tsx
└── not-found.tsx

app router 에서 이러한 구조를 가지고 있다면, 루트 디렉토리의 layout.tsx 파일이 하위 폴더들을 포함하여 레이아웃이 구성이 된다.

그렇다면 book/[id] 폴더 내부의 page.tsx 파일은 루트 레이아웃의 파일의 코드가 적용된다.

만약 다른 폴더끼리 layout을 동일하게 적용하고 싶다면 ()을 사용하여 (with-searchbar) 와 같이 폴더를 만들면, 부모 레이아웃의 영향을 받지 않게 적용하여 페이지별로 각각 다른 레이아웃을 구성할 수 있다.

서버컴포넌트의 경우에는 쿼리스트링을 받아오려면 props로 받아와야한다. 또한, 서버에서 한번만 렌더링되는 컴포넌트이므로 특이하게 비동기 처리를 위한 async 키워드를 사용할 수 있다.

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q: string}>
}) {
  const { q } = await searchParams;
  return (
    <div>{q}</div>
  );
}