1. 개요

Next.js 13 버전에 추가된 라우터로 page router를 대체한다.

2. 사용법

next.js를 최신버전으로 설치해준다.

npx create-next-app@latest 프로젝트명

그러면 질문 항목 중 app router를 사용할 것이냐는 항목이 나오는데 yes를 선택해주면된다.

3. 특징

1. src 폴더 내 pages 폴더가 아닌 app 폴더가 있다.
2. 15.0.3 버전에서 ESLint 설정이 엄격하게 변경되어 사용하지 않는 변수를 선언하면 오류가 발생하고 ts에서 any타입을 지정할 수 없게 되어있다.
   이를 해결하기 위해 .eslintrc.json 파일을 수정한다.

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "warn", // 사용하지 않는 변수에 대해 경고표시
    "@typescript-eslint/no-explicit-any": "off" // any 타입을 명시적으로 지정 가능
  }
}

3. page router 에서는 각 폴더의 index 파일이 경로가 되었지만 app router는 page 이름의 파일만 page 취급을 한다. 즉 구조는 동일하지만 파일 이름이 달라진다.