next.js 설치 옵션 - Next 13.4

Next.JS 자동 설치를 선택하면 " No" 또는 "Yes" 을 선택해야 하는 항목들이 있습니다. 관련하여 링크 또는 간단 요약을 첨부합니다.

> npx create-next-app@latest ./
√ Would you like to use TypeScript with this project? ... No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use Tailwind CSS with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Use App Router (recommended)? ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes
√ What import alias would you like configured? ... @/*

1. TypeScript

당연히 yes를 선택해야 합니다만, TypeScript 경험이 없는 경우, "No"를 선택하여 순수 자바스크립트( Vanila JavaScript ) 만으로 작성 할 수 있습니다. 디폴트는 "Yes".

 

2. ESLint 

디폴트는 "Yes". ESLint는 개발자가 프로젝트 전체에서 표준 규칙을 적용하기 위해 사용하는 오픈 소스 라이브러리입니다. 버그를 발견하는 데 도움이 될 수 있습니다. 잦은 unknown 오류보고를 원치 않을 경우 "No" 를 선택합니다.

 

3. Tailwind

디폴트는 "Yes". 관련 홈페이지에 "HTML을 떠나지 않고 현대적인 웹 사이트를 빠르게 구축하십시오" 라는 문구 처럼 도움이 됩니다. 입문자는 "Yes"선택 후 배워야 할 과제이며, 간단한 사이트를 준비하는 경우는 "No" 선택 후 기존 React의 방식들 중 익숙한 것을 선택합니다.  https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

4. src Directory

최근 트랜드는 src 디랙토리를 만들지 않고, 프로젝트 디랙토리 밑에 바로 필요한 디랙토리들( components, public 등 )를 만들어 사용합니다. 따라서 디폴트는 "No"이지만, src 에 친숙한 경우는 "Yes"를 선택하고 React에서 처럼 필요한 디랙토리를 이 안에 설치 합니다.

 

5. APP Router ( Recommended )

무조건 "Yes"하고 관련 Routing 하는 방법을 아래 링크에서 확인하고 사용합니다. Third Library ( react-router-dom ) 등의 설치 없고, 직관적인 방법으로 큰 혁신입니다. https://nextjs.org/docs/pages/building-your-application/routing

Building Your Application: Routing | Next.js

6. import alias

import alias는 일종의 단축키입니다.  복잡한 파일구조에서는 더욱 빛을 발합니다. "Yes"

 

7. 어떤 별칭을 사용하겠습니까 ?

위 6번을 "Yes" 한 경우 선택사항으로, 디폴트(기본설정)은 @ 입니다. 주로 사용하므로 특별한 이유가 없으면 "Yes" 합니다.

 

 

 

 

( 위 대문 이미지는 위의 디폴트로 설정했을 때의 디랙토리 구조입니다. )