1. 프로젝트 생성과 디렉토리 구조

nextjs로 프로젝트 생성을 할 수 있는 방법에는 2가지가 있다. 하나는 create-next-app을 사용하는 방법이고, 다른 하나는 직접 수동으로 생성하는 방법이다.

create-next-app은 자동으로 package.json 작성 및 디렉토리 구조를 생성해줄 뿐만 아니라 next.js 개발자들에 의해 유지보수 된다고 하니 이 방법을 추천한다. 

 

npx create-next-app@latest
yarn create next-app
pnpm create next-app
bunx create-next-app

 

npm 외에 다른 패키지 매니저를 쓰고 싶으면 위에 써놓은 대로 해도 되고, npx create-next-app@latest 뒤에 --use-yarn, --use-pnpm 등을 입력하면 된다.

 

그 외에도 여러가지 옵션이 있지만 위에 작성된 명령어까지만 쳐도 터미널에 인터랙티브하게 설정할 수 있는 옵션들이 뜨니까 거기서 원하는대로 설정하면 된다.

 

이번에는 next.js의 샘플을 연습할 것이므로 아래와 같은 명령어를 사용했다.

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

 

 

pnpm을 사용해서 nextjs-dashboard라는 이름의 프로젝트를 생성하는데, https://github.com/vercel/next-learn/tree/main/dashboard/starter-example 에 있는 샘플을 포크할 것이라는 뜻이다. 

 

이렇게 하면 nextjs-dashboard라는 디렉토리가 하나 생성되고 프로젝트가 만들어진다. 하위 디렉토리도 자동으로 생성되어 있는데, 구조는 아래와 같다.

- /app : 페이지 및 컴포넌트. (예전에는 페이징을 pages라는 디렉토리를 통해서 했지만 버전이 업그레이드되면서 app 방식을 제공)

- /app/lib : 재사용 가능한 함수들, 유틸리티 등의 js를 넣어두는 곳

- /app/ui : 카드 컴포넌트, 테이블 컴포넌트 등 작은 단위의 ui 컴포넌트를 넣어두는 곳

- /public : 정적인 에셋을 넣어두는 곳

- /scrips : 튜토리얼 따라가다보면 나중에 나올 스크립트 작성하는 곳

 

아무튼, 서버를 실행하기 위해서는 npm i && npm run dev를 터미널에 입력하면 된다. 

https://localhost:3000 에 들어갔을 때 이상한 사이트(아직 css가 적용되지 않음)가 나오면 성공!