[Next.js] 공부 시작 및 프로젝트 생성

0.  잡설

사실 프론트엔드 프레임워크의 경우 이미 React로 팀 프로젝트를 두 번 진행한 적이 있어, 이걸로 쭉 더 공부하는 것도 맞다고 생각하지만 아래 이유로 공부를 시작하게 되었다. 

1. CSR(Client Side Rendering)이 아닌 SSR(Server Side Rendering) 방식을 경험해보기
   • 사실 SSAFY에서 가르쳐준 Django도 풀스택 프레임워크로 방식은 배웠었지만.. Django로 하는 건 뭔가 ㅎ..
2. Vercel 배포 시 백엔드 부분도 겸해서   
   
   • 이후 만들어볼 프로젝트(포트폴리오?)에서 배포 방식을 어떻게 할까 고민했는데, AWS는 커스터마이징 부분이 너무 포괄적이라서 Vercel로 배포를 할 생각(인프라도 해보니 재밌었는데, 일단 프론트엔드 중심의 공부를 위한 프로젝트라) 
   • 프론트엔드로서의 프로젝트를 만든다면 React를 쓰는게 맞다고 생각하는데, 간단히 API 같은 부분을 붙일 구상이라서 한번에 처리가 가능한 Next.js로 선택

공부하다보니 뭔가 신기한 기능들도 많아서 한번 다뤄보고 싶은 맘이 생겼다.

1.  프로젝트 생성

1- 0. pnpm 설치(선택사항)

npm install -g pnpm

 

next.js 공식문서 상 속도와 효율 상의 이점으로 npm이나 yarn보다 pnpm을 권장한다. 

1- 1.  프로젝트 생성

// 기본
npx create-next-app@latest
// pnpm 설치시
pnpx create-next-app@latest

 

next.js 공식문서 상 installation 항목에서는 접근성이 가장 높은 npm에 맞게 npx로 설치하는 법을 알려주지만 pnpm으로 관리하려면 후자로 설치하면 된다. 

 

npx로 설치했다가 pnpm으로 전환하려면 간단히 node_modules과 package-lock.json 삭제 후 pnpm i로 다시 설치하면 된다.

 

1- 2. 프롬프트 설정하기

 

나는 테일윈드 CSS 보다 CSS 모듈를 사용하는 것을 선호하여 해당 부분 말고는 모두 Yes로 처리함.

절대경로(@) 처리도 프롬프트로 할 수 있다는 점이 편리하다.

관련 내용은 https://nextjs.org/docs/app/getting-started/installation

Getting Started: Installation | Next.js

1- 3. 실행하기

// 앱 폴더로 이동하기
cd 앱이름

// 기본 dev 실행법
npm run dev

// pnpm dev 실행법
pnpm dev