Next.js 개발환경 구축하기

Next.js 개발환경 구축하기

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 효율적이고 빠른 웹 애플리케이션을 개발할 수 있게 해줍니다. 그럼 바로 Next.js 개발 환경을 구축하는 과정을 단계별로 살펴보겠습니다.

1. Node.js와 npm 설치

Next.js를 사용하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. Node.js는 JavaScript 런타임이고, npm은 패키지 매니저입니다. Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하여 설치합니다. 설치가 완료되면 터미널에서 다음 명령어로 버전이 제대로 설치되었는지 확인합니다.

node -v
npm -v

 

2. Next.js 프로젝트 생성

이제 Next.js 프로젝트를 생성해보겠습니다. `create-next-app` 패키지를 사용하면 기본 설정이 완료된 Next.js 프로젝트를 쉽게 생성할 수 있습니다. 다음 명령어를 실행하세요.

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

 

여기서 `my-next-app`은 생성할 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다. 명령어를 실행하면 몇 가지 설정을 물어보는 프롬프트가 나타납니다. 원하는 대로 선택하면 됩니다. 기본값을 사용해도 무방합니다.

3. 프로젝트 구조 이해

생성된 프로젝트의 디렉토리 구조는 다음과 같습니다.

my-next-app/
├── node_modules/
├── public/
├── styles/
├── pages/
│   ├── api/
│   └── index.js
├── .gitignore
├── package.json
├── README.md
└── next.config.js

`pages/`: Next.js에서 가장 중요한 디렉토리로, 페이지 컴포넌트들이 위치합니다. 파일 이름이 URL 경로가 됩니다.
`public/`: 정적 파일을 저장하는 곳입니다. 여기 저장된 파일은 `/` 경로로 접근할 수 있습니다.
`styles/`: 전역 및 모듈 CSS 파일들이 위치합니다.
`node_modules/`: 프로젝트 의존성 패키지들이 저장되는 디렉토리입니다.
`package.json`: 프로젝트 설정 파일로, 의존성 목록 및 스크립트 명령어 등이 정의되어 있습니다.
`next.config.js`: Next.js 설정 파일로, 커스텀 설정이 필요한 경우 수정합니다.

4. 개발 서버 실행

프로젝트 디렉토리로 이동하여 개발 서버를 실행합니다.

cd my-next-app
npm run dev

 

이제 브라우저에서 `http://localhost:3000`으로 접속하면 기본 설정된 Next.js 애플리케이션을 확인할 수 있습니다.

5. ESLint 및 Prettier 설정 (선택 사항)

코드 스타일을 유지하고 오류를 방지하기 위해 ESLint와 Prettier를 설정할 수 있습니다. 먼저 필요한 패키지를 설치합니다.

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier

프로젝트 루트 디렉토리에 `.eslintrc.json` 파일을 생성하고 다음과 같이 설정합니다.

{
  "extends": ["next", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

 

또한, `.prettierrc` 파일을 생성하고 원하는 Prettier 설정을 추가합니다. 예를 들어:

{
  "semi": false,
  "singleQuote": true
}

 

이제 ESLint와 Prettier를 사용하여 코드 스타일을 일관되게 유지할 수 있습니다.

6. Git 저장소 초기화

프로젝트를 버전 관리하기 위해 Git 저장소를 초기화합니다.

git init
git add .
git commit -m "Initial commit"

 

이제 Git을 사용하여 프로젝트 변경 사항을 관리할 수 있습니다.

마무리

이로써 Next.js 개발 환경 구축이 완료되었습니다. 이제 Next.js를 사용하여 강력하고 효율적인 웹 애플리케이션을 개발할 준비가 되었습니다.

추가적으로 Next.js의 다양한 기능과 최적화 방법을 학습하여 더 나은 성능과 사용자 경험을 제공할 수 있습니다.