[Next.js] 프로젝트 생성하기

소요 시간: 5분 조회수: 84

이 글에서는 Next.js 프로젝트를 시작하는 기본적인 단계들을 소개합니다.

Node.js와 npm 설치부터 시작하여, Next.js 프로젝트를 생성하고 실행하는 방법, 기본 파일 구조 이해, 그리고 새로운 페이지 추가까지의 과정을 다룹니다. 이 가이드를 통해 Next.js의 주요 기능과 활용법을 익히고, 첫 번째 Next.js 애플리케이션을 만들어보겠습니다.


1. Node.js 설치

먼저 Node.js와 npm이 설치되어 있는지 확인합니다.

Node.js는 JavaScript 런타임 환경으로, 서버 사이드 애플리케이션을 개발하는 데 사용됩니다. npm(Node Package Manager)은 Node.js 패키지 관리 도구로, 다양한 패키지를 설치하고 관리할 수 있습니다. 최신 버전의 Node.js를 Node.js 공식 웹사이트에서 다운로드하여 설치합니다.

설치가 완료되면 터미널에서 다음 명령어를 실행하여 버전이 제대로 설치되었는지 확인합니다:

node -v
npm -v

이 명령어를 통해 설치된 Node.js와 npm의 버전을 확인할 수 있습니다.


2. Next.js 프로젝트 생성

터미널에서 다음 명령어를 실행하여 새로운 Next.js 프로젝트를 생성합니다.

npx create-next-app@latest

npx create-next-app@latest 명령어는 최신 버전의 Next.js 애플리케이션을 생성하는 도구입니다. npx는 Node.js 패키지 실행 도구로, 특정 패키지를 전역 설치하지 않고 실행할 수 있게 합니다. create-next-app@latest는 Next.js 프로젝트 생성을 위한 CLI 도구로 최신 버전을 사용합니다.

프로젝트 이름을 묻는 질문에 답하고, 필요에 따라 추가적인 설정을 합니다.

이 명령어를 실행하면:

  1. 프로젝트 이름 입력을 요구합니다.
  2. 입력한 이름으로 새로운 디렉토리가 생성됩니다.
  3. 기본적인 Next.js 프로젝트 구조가 설정됩니다.
  4. Next.js와 필요한 패키지들이 자동으로 설치됩니다.


3. 프로젝트 디렉토리로 이동

생성된 프로젝트 디렉토리로 이동합니다.

cd 프로젝트_이름


4. 프로젝트 실행

다음 명령어를 사용하여 프로젝트를 실행합니다.

$ npm run dev

$ npm run dev 명령어는 Next.js 애플리케이션의 개발 서버를 시작합니다. 이 명령어는 package.json 파일에 정의된 scripts 섹션에서 dev 스크립트를 실행합니다.

개발 서버가 시작되면, 로컬 환경에서 코드를 변경할 때마다 자동으로 페이지가 리로드되어 변경 사항을 실시간으로 확인할 수 있습니다.

기본적으로 서버는 http://localhost:3000에서 실행됩니다. 브라우저에서 http://localhost:3000으로 이동하면 Next.js 애플리케이션을 확인할 수 있습니다. 이 명령어를 통해 개발 중인 애플리케이션을 실시간으로 테스트하고 디버깅할 수 있습니다.


5. 파일 구조 이해

Next.js 프로젝트의 기본 파일 구조는 다음과 같습니다:

my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── _app.js
│   ├── index.js
├── .gitignore
├── package.json
├── README.md
└── next.config.js


6. 기본 페이지 추가

pages/ 디렉토리에 새로운 페이지를 추가해보겠습니다. 예를 들어, about.js 파일을 생성하고 아래와 같이 작성합니다:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page</p>
    </div>
  );
}

브라우저에서 http://localhost:3000/about으로 이동하면 새로 만든 About 페이지를 확인할 수 있습니다.

이로써 Next.js 프로젝트의 기본적인 설정이 완료되었습니다. 필요한 추가 기능이나 설정은 공식 문서를 참고하여 구현할 수 있습니다.

Next.js 공식 문서: Next.js Documentation


인기글

Next.js 리스트