[Next.js 14로 백오피스 만들기] - 2. 프로젝트 생성

이번 글에서는 Mac 환경에서 최신버전의 Next.js 프로젝트를 생성하는 방법과 프로젝트 구조에 대해 설명한다.
프로젝트는 TypeScript, App Router, Tailwind CSS를 사용하는 환경으로 구성했다.

 

1. 프로젝트 생성

 

Next.js는 npx create-next-app@latest 이라는 명령어로 쉽게 시작할 수 있다.
먼저 작업할 경로로 이동한 다음 터미널에서 명령어를 실행한다.
그럼 아래처럼 프로젝트 세부사항을 커스터마이징 할 수 있는 프롬프트가 나온다.

$ npx create-next-app@latest
✔ What is your project named? … nextjs-backoffice
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No 
Creating a new Next.js app in /Users/iksflow/workspace/nextjs-backoffice.

나는 취향에 맞게 설정했는데 선택한 내용은 다음과 같다.

What is your project named? … nextjs-backoffice
생성할 프로젝트 이름이다. 작업경로에 프로젝트 이름으로 새로운 폴더를 만든다.

Would you like to use TypeScript? … Yes
타입스크립트 사용 여부이다. 타입스크립트의 강력한 타입검사 및 추론 기능을 토대로 쾌적한 개발환경을 누리기 위해 Yes를 선택했다.

Would you like to use ESLint? … Yes
ESLint 사용 여부이다. ESLint는 Lint 도구인데 코딩컨벤션을 설정하고 이에 어긋나게 코딩을 하면 피드백을 해준다.
나도 모르게 안티패턴으로 작성하는 상황을 피하고자 ESLint를 사용하는 옵션을 선택했다.
시도 때도 없이 빨간 밑줄이 나타나는 것이 싫다면 No를 선택해도 상관없다.

Would you like to use Tailwind CSS? … Yes
Tailwind CSS의 사용 여부이다. Tailwind CSS는 작은 단위로 재사용 가능하게 만든 CSS 라이브러리이다.
쉽게 얘기하면 Boot Strap 같은 느낌인데 자유도가 높은 라이브러리라고 볼 수 있다.
CSS 클래스 네이밍 및 관리에 신경 쓰고 싶지 않아서 TailwindCSS를 선택했다.

Would you like to use src/ directory? … Yes
프로젝트의 루트 경로로 src를 사용할지 묻는 부분이다. src 하위에 프로젝트 관련 코드를 모아 놓는 것을 선호해서 Yes를 선택했다.
추후 src/app, src/components, src/util, src/config 등과 같이 디렉터리를 구성할 생각이다.

Would you like to use App Router? (recommended) … Yes
Next.js 13 버전부터 도입된 App Router의 사용 여부이다.
기존에 사용하던 방식인 Page Router에서 차차 App Router로 넘어갈 것으로 예상되므로 미리 사용해 보고 적응하면 좋겠다는 판단에서 선택했다.

Would you like to customize the default import alias (@/*)? … No
import alias를 커스터마이징 여부이다. tsconfig.json의 paths를 설정해서 import에 입력하는 경로를 단순하게 만들 수 있다.
기본값은 @/* 로 설정되며 @를 입력하면 ./src/*에 해당하는 경로로 인식한다.
시간이 지나 프로젝트 구조가 깊어지면 ../../../../components/Foo 같은 식으로 상대 경로가 난리나는 상황을 만날수 있다.
이럴 때 import alias를 적절히 활용하면 @components/Foo 와 같이 가독성을 높일 수 있다.
지금은 기본값으로 충분해서 No를 선택했다.

 

2. 프로젝트 구조

.
├── node_modules
├── public
│   ├── next.svg
│   └── vercel.svg
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.ts
└── tsconfig.json

커스터마이징이 끝나면 위와 같은 구조로 프로젝트가 생성된다.
각 폴더 및 파일들의 용도를 간단히 설명하자면 다음과 같다.

node_modules
package.json에 정의된 스크립트, 의존성 등이 설치된 경로.

public
정적 파일을 저장하는 폴더. 대표적인 정적 파일에는 아이콘, 로고, 텍스트 파일 등이 있다.

src
프로젝트의 코드를 저장하는 폴더.

src/app
Next.js가 App Router방식으로 동작하는데 필요한 폴더. 페이지 및 API 라우팅과 관련한 파일을 저장한다. 컨벤션으로 예약된 폴더, 파일 이름이 있기 때문에 사용에 주의해야한다.

.eslintrc.json
ESLint 설정파일.

.gitignore
git에서 변경사항을 추적하지 않고 무시할 파일들의 목록을 저장하는 파일.

next-env.d.ts
Next.js의 TypeScript 선언 파일이다.

next.config.mjs
Next.js 프로젝트 설정파일. https://nextjs.org/docs/app/api-reference/next-config-js

package-lock.json
실제 설치된 프로젝트 의존성 정보를 저장한 파일

package.json
프로젝트 의존성, 스크립트 등의 정보를 관리하는 파일

postcss.config.js
Tailwind CSS 설정 파일2. Tailwind CSS 환경을 초기화하는 과정에서 자동으로 생성된다.
Tailwind CSS 를 사용하는데 필요한 파일이다.
없으면 tailwind css가 적용되지 않는다.

README.md
프로젝트를 소개하는 내용을 저장하는 목적으로 사용하는 마크다운 파일이다.

tailwind.config.ts
Tailwind CSS 설정 파일1. Tailwind CSS 환경을 초기화하는 과정에서 자동으로 생성된다.

tsconfig.json
TypeScript의 설정 파일. 컴파일 옵션, alias 설정 등의 옵션을 설정할 수 있다.

보다 자세한 내용은 공식 문서에 잘 설명되어있다.
https://nextjs.org/docs/getting-started/project-structure

 

3. 프로젝트 정보

 

npx create-next-app@latest 로 프로젝트를 생성하면 실행 시점에서 최신 버전의 의존성들로 프로젝트를 구성하므로 시간이 지나면 글을 작성하는 시점에서 구성한 프로젝트와 차이가 생길 수 있다.
현재 시점에서 구성한 프로젝트에 대한 상세 정보는 github을 참고한다.
https://github.com/iksflow/nextjs-backoffice