지금까지 Page router로 next 개발을 해오던 나는
어느날 문득 App router 가 쓰고 싶어졌다.
이유는 아래와 같다 (주관적)
Page router는 폴더 구조를 짜기 너무 불편하다
개인적으로 React 프로젝트를 할때 각 page명 폴더를 만들고 그 안에 해당 page 에서만 쓰이는 컴포넌트를 하위 폴더에 넣어서 해당 페이지에서만 쓰이는 컴포넌트 임을 명확히 알 수 있었는데 next js 의
Page router방식으로는 그렇게 폴더 구조를 짤 수 없었다.폴더명과 파일명 그 자체가 page의 pathname이 되어서 page component 파일만 둘수 있기 때문에 다른 일반 컴포넌트를 page component 와 같이 배치할 수 없었다. 이게 전체적인 파일 갯수가 적었을땐 티가 덜나는데 점차적으로 page 갯수가 늘어나고 컴포넌트 갯수들이 늘어나는 순간 page 파일 손보다가 다시 스크롤 올려 위로 쭉쭉 올라가 해당 컴포넌트 파일을 또 찾아서 수정해야했기 때문에 불편함이 컸다.
next 프로젝트를 생성할때마다 보는 문구
Would you like to use App Router? (recommended) No / Yes
App router쓸거에요? (추천) 아니오 / 예- 아 next 가 추천한대잖아 다 이유가 있지 않을까?
여담이지만 지금 회사에서 진행하고 있는 프로젝트를 생성할 당시엔 App router 가 아직 존재하지 않았기에
사실 Page router 말고는 선택권이 없었다.
yarn create next-app인스톨 하고 App router 로 선택한다.
만약 나처럼 프로젝트를 생성을 했는데 엉뚱하게도 tsconfig.json 에서 아래와 같은 에러가 난다면
Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.
VScode 를 최신버전으로 업데이트 해라. 그럼 해결된다...
이거땜에 검색을 얼마나 했는지 원...
VSCode 상단 help 탭 클릭하면 update vscode 항목이 있다. 클릭해라...
