[Next.js] Next.js 새 프로젝트 생성하는 법+옵션선택(Step by Step)

 

 

 

 

 

사전 준비 사항

• npm과 Node.js는 당연히 설치가 되어 있다고 가정합니다.
• 나한테 Node.js가 있는지 없는지, npm이 있는지 없는지 모른다면 아래 글 참조

https://spacechild.net/607

 

 

프로젝트 생성하기

 

1. 프로젝트(폴더)를 생성할 폴더로 이동한다

 

저는 보통은 Projects/ 밑에 프로젝트 폴더를 만드니까, Projects 폴더로 이동합니다.

 

Next.js는 프로젝트 생성 명령어를 치면, 프로젝트가 생기면서 자동으로 폴더가 생성이 됩니다.

 

해당 폴더가 곧 프로젝트인 개념입니다.

 

 

 

 

2. 프로젝트 생성 명령어 실행

 

터미널에 아래 명령어 중 하나를 칩니다. 

 

제일 많이 쓰는 건 npm 방식

# npm
npx create-next-app@latest my-app

# pnpm
pnpm create next-app my-app

# yarn
yarn create next-app my-app

 

 

많은 예제들이 npx 명령으로 새 프로젝트를 생성하는 방법을 알려줍니다.

 

npm이 안깔려 있는 사람은 없을 것이기에 그러는 거 같은데(node.js를 설치하면 자동으로 설치되니까)

 

저는 이미 npm, node.js, pnpm 모두 깔려 있기 때문에, 처음부터 pnpm 방식으로 생성합니다.

 

 

 

next.js 공식홈페이지에서도 npx를 이용해서 프로젝트를 생성하는 예제를 보여 주고 있지만,

 

뒤에 옵션을 잘 보면, '--use-pnpm'이라고 pnpm을 패키지 관리자로 쓰겠다고 선언하고 있습니다.

 

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

 

 

참고로 npm(npx)로 설치하든, pnpm으로 설치하든 아무런 차이가 없습니다.

 

패키지 관리자의 구분 문제이며, 개인개발자(1인 개발자)는 아무런 상관이 없습니다.

 

 

 

 

 

3. 프로젝트 설정 선택

 

 

2번에서 새 프로젝트 생성 명령어를 치면 화면처럼 다양한 설정 옵션들을 물어봅니다.

 

 

 

ㅇ TypeScript 쓸거냐?  YES (추천)

 

ㅇ 코드 품질 관리 도구(linter) 뭐 쓸거야? ESLint (추천)

 

ㅇ Tailwind CSS 쓸거야? YES

 

ㅇ 'src/' 디렉토리 안에다가 네 코드 다 때려 넣을거야? YES (프로젝트 파일들 구조를 좀 깔끔하게 하고 싶으면)

 

ㅇ App Router 방식을 쓸거야?(추천) YES (Next.js 최신방식 / 그냥 무조건 YES)

 

ㅇ Turbopack 쓸거야?(추천) YES (개발속도를 획기적으로 개선 어쩌구 저쩌구... )

 

      공식배포자가 추천이라고 했으면, 엄청난 자기만의 철학을 가진 게 아니라면 일단 써보는게 좋다는게 내 생각

 

ㅇ import alias 커스터마이징 쓸겨? YES (무조건  YES)

 

      경로불러올 때, 설정 전 후로 아래처럼 바뀐다.

      선택이라 아니라 무조건 강제하는게 맞다고 생각하는데, 이걸 선택으로 두고 있다.

 

      설정 전 : import Button from '../../components/Button';

      설정 후 : import Button from '@/components/Button';

 

ㅇ import alias 커스터마이징 한다고? 뭐 쓸거야? @/*

 

      디폴트로 되어 있는데, @/* 을 추천한다. 다른걸로 표기해도 된다

 

 

 

여기까지 하면, 아래처럼 새 프로젝트가 완성되었음을 알 수 있다.

 

 

 

4. 프로젝트 실행하기

 

여기까지 했으면, 새로 생성된 프로젝트 폴더 안으로 들어가서, 개발서버를 실행해보면 됩니다.

 

pnpm dev,

pnpm run dev

 

어떤 명령어를 쳐도 결과는 같습니다.

 

 

http://localhost:3000/

 

를 웹브라우저에서 열어보면 아래 화면이 나오면 성공.