Next.js App Router 간단하게 사용하기

Next 13.4 버전이 릴리즈되면서 App Router가 stable이 되었다.

그에 따라서, 간단하게 App Router를 사용해보도록 하였다.

npx create-next-app@latest

위의 명령어로 프로젝트를 생성하면 프로젝트 이름, 타입스크립트와 ESLint 사용 여부, tailwind CSS의 사용여부, src 디렉토리 사용여부를 물은 뒤 다음과 같이 질문이 나온다.

🧅 Use App Router (recommended)? › No / Yes

여기서 Yes를 선택하여 App Router를 사용할 수 있다.

🍎 next.config.js의 설정에 experimental.appDir 이 true가 된다.

 

App 라우터를 사용하면, pages 폴더 대신 app 폴더가 생긴다.

app 폴더 내부에는 기본적으로 layout.tsx, page.tsx가 존재한다.

 

• layout.tsx는 기존의 _app.tsx와 _document.tsx의 기능을 하는 컴포넌트이다.
• 처음에 생성된 page.tsx는 root path인 / 에 대응되는 페이지를 의미한다.
• app 라우터에서 라우팅을 할 때는, 페이지 루트 이름에 대응되는 폴더를 생성하고, 폴더 내부의 page.tsx를 생성하면, 해당 컴포넌트가 폴더 이름의 root와 매칭된다.
• 이제 루트 파일의 이름은 무조건 page.tsx이기에, app 폴더 내부에 style, component, test가 들어갈 수 있다.

🥚 ex. /app/about/page.tsx 는 localhost에서 실행 시 /localhost:3000/about 에 대응된다.

🥚 동적 라우팅을 위해서는 /[dynamic]/page.tsx 와 같이 폴더 이름을 [ ] 로 감싼다.

• getServerSideProps과 getStaticProps는 이제 사용되지 않는다.
• generateStaticParams()를 통해 정적 페이지의 params 변수를 가져올 수 있다.
• app 폴더 내부의 컴포넌트는 모두 서버 컴포넌트이다. (getServerSideProps가 필요하지 않다)
• 기존의 클라이언트 컴포넌트를 사용하기 위해서는 컴포넌트 최상단에 "use client";를 작성한다.
• loading.tsx와 error.tsx를 구현하여 로딩 상황(with Suspense)과 에러 상황에 등장하는 페이지를 구성할 수 있다.
• 기존 page 라우팅의 404.tsx는 이제 not-found.tsx로 대체되었다.
• pages/api 는 여전히 사용 가능하다.

 

위와 같이 예제를 생생하였다.

app/page.tsx가 /에 대응되고, app/about/page.tsx가 /about에 대응되는 페이지를 생성한다.

 

https://nextjs.org/blog/next-13-4

Next.js 13.4

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

Upgrading: App Router Migration | Next.js