next 시작하기

create-next-app을 만들면 아래 사진과 같이 초기 설정에 대한 물음이 나온다.

아래 물어보는 것들에 대한 대답이 기본값이 되어있는데 여기에서 하나 눈에 띄는 것은 내가 next.js 12버전으로 배웠을 와는 달리 tailwind css에 대한 질문과 App Router에 대한 질문이 추가되었다.

npx create-next-app@latest

src/ 디렉토리를 사용할것인가에 대한 차이가 궁금해서 각각 만들어봤을때, 그냥 app이 root에 생기는지 아니면 src/app으로 생성되는지의 차이일 뿐이었다.(아래그림 참조)

 

기존에 12버전으로 프로젝트를 만들다가 이번에 정리를 하면서 13버전을 공부하다보니
왜 13버전을 사용해야하지? 라는 근본적인 궁금증이 생겼다.

1. 라우팅 방식의 변화 : pages 디렉토링에서 app 디렉토링 방식으로 변경

왜 이런식으로 바뀌었을까?
>> 먼저 12버전의 라우팅에 대해서 생각해보자.
  12버전에서는 src/pages 경로에서 각각의 경로를 폴더로 생성해서 중첩라우팅이 되도록 작성했다.
  여기에서 문제는 각 페이지에 대한 렌더링을 할 때에 리액트에서 처럼 각 컴포넌트의 레이아웃을 재사용하고 싶은데?
  라는 니즈가 생긴 것이다.

그럼 어떻게 이것을 해결을 한 것일까?
>> layout.tsx 라는 레이아웃 컴포넌트를 통해서 이것을 해결하도록 했다. 그리고 기본적으로 로딩시, 에러시 호출되는
  컴포넌트들 또한 제공할 수 있다.
  (공식홈페이지 글을 통해 좀 더 자세히 보길 원한다면 아래 링크를 통해 확인바란다.)​

Layouts RFC