[Nextjs] would you like to use 'src/' directory? App Router? import alias (@/*)?

 

$ npx create-next-app@latest --typescript

 

해당 명령어로 새로운 nextjs 애플리케이션을 만들려고 하면

생각보다 여러 질문을 묻는다.

 

What is your project named?

Would you like to use ESLint? 

Would you like to use Tailwind CSS?

..

..

이름은 무엇인가, 형식을 맞추는 ESlint 쓸것이냐, 테일윈드 사용할 것이냐.

무난한 물음들을 한다.

하지만 아래  질문은 살짝 난감하게 만든다.

 

Would you like to use `src/` directory?

Would you like to use App Router?

Would you like to customize the default import alias (@/*)?

 

---

 

Would you like to use `src/` directory?

해당 질문은 app 폴더의 폴더 구조를 정하는 질문이다.

 no로 답변하면 바로 아래와 같이

app 폴더가 루트에 와있고,

yes를 답변하면 app폴더가 src 폴더 내부에 들어가 있다!

no

yes

 

 

Would you like to use App router?

app router와 page router를 고르는 스탭이다.

yes를 선택하면 아래와 같이,

no는 두 번째와 같이 page라는 폴더가 따로 생성된다.

 

Would you like to customize the default import alias (@/*)?

해당 방식은 후에 import 할 때

 

../../../example.js처럼 긴 상대경로를 방지하기 위해

@/check/example.js처럼 alias 사용유무를 의미한다.

 

하지만 처음에 모든 폴더 구조가 잡혀 있기는 어렵기에

No 하고 넘어가는 것을 추천한다.

후에 언제든지 추가할 수 있다! 

 

 

이들을 모두 선택하고 나면 끄으읕! 열코딩만이 우릴 기다린다.

 

---

 

app, page router 체크를 한번 해봐야겠다.