[Next] Next.js로 5분 만에 웹 앱 폭주! 이걸 몰랐다면 개발자로서 이미 뒤처진 거다!

제목 어그로 통했나요?

 

GPT의 작품입니다.

 

 

간단하게 next & typescript로 프로젝트 생성 알아보겠습니다.

 

 

 

1. 프로젝트 생성 명령어

npx create-next-app@latest --ts next-study

 

 

이렇게 하면 최신 버전의 nextjs와 typescript를 이용해서 프로젝트가 생성됩니다.

 

 

 

 

2. 취향 정하기

 

위 명령어를 입력하면 몇 가지 질문을 합니다.

하나씩 알아보면

- Would you like to use ESLint? ... No / Yes

ESLint를 사용할거야? - YES!

 

- Would you like to use Tailwind CSS? ... No / Yes

Tailwind CSS 사용할거야? - YES!

 

- Would you like your code inside a `src/` directory? ... No / Yes

src 디렉토리 만들거야? - yes

 

- Would you like to use App Router? (recommended) ... No / Yes

nextjs 13부터 만들어진 기능? 인데, 서버렌더링을 제공한다.

yes면 app/ 디렉토리로 라우팅 , no면 pages/ 디렉토리로 라우팅

난 Yes 성능이 더 좋다니까 해본다.

 

- Would you like to use Turbopack for `next dev`? ... No / Yes

Turbopack은 webpack보다 빠른 빌드팩? 이라고 한다.

지켜보자 난 yes

 

 

- Would you like to customize the import alias (`@/*` by default)? ... No / Yes

이거는 자유. yes가 코드가 더 깔끔해진다고 한다.

 

 

 

728x90

 

 

 

정리하면

ESLint: 코드 품질을 유지하고 싶은 경우 Yes

Tailwind CSS: Tailwind CSS를 사용하고 싶은 경우 Yes

src/ 디렉토리: 프로젝트 구조를 체계적으로 만들고 싶다면 Yes

App Router: Next.js 13 이상의 새로운 라우팅 시스템을 사용하고 싶다면 Yes

Turbopack: 개발 성능을 높이고 싶다면 Yes

 

 

 

 

 

3. 접속해보기

npm run dev

 

 

하면 자동으로 127.0.0.1:3000 으로 포트가 열리고 접속이 가능해진다.

 

 

 

 

이런 화면을 볼 수 있다.

 

 

이제 뭘 만들지 한 번 고민해봐야겠다~!!