Next.js 13버전부터 가장 크게 변화된 점은 Page Router → App Router 로 변경된 라우팅 방식이다.
이번 1주차에는 변경된 App Router의 핵심 기능들에 대해 알아보자.
Next.js 는 기존 Page Router 에서는 pages/ 의 하위에 route 경로를 설정하여 페이지를 구성했다면, 이번 App Router 에서는 app/ 폴더 하위에 경로를 설정하여 페이지를 구성한다.
하위 파일명 또한 pages/파일명.js 또는 pages/폴더명/index.js 로 route가 설정되었지만 App Router 에서는 app/폴더명/page.js 로만 사용할 수 있다.
만약 폴더 하위에 page.js 파일이 없다면 route로 인식되지 않으니 해당 폴더명의 경로로 접근해도 페이지가 뜨지 않는다.
Page Router 폴더구조
App Router 폴더 구조
<aside> 💡 app 폴더 하위에 components 폴더를 생성할 수도 있으나, 이를 root에 생성하고 app 폴더 하위에는 라우팅과 관련된 폴더만 생성하는 것이 가독성 측면에서 좋다
</aside>
https://stackoverflow.com/questions/76214501/nextjs-13-folder-structure-best-practice