[Next.js] 시작하기

2022-04-01 hit count image

Next.js를 사용하여 React 프로젝트를 생성하고 실행하는 방법에 대해서 알아봅시다.

개요

이번 블로그 포스트에서는 React 프레임워크인 Next.js를 설치하고 사용하는 방법에 대해서 설명합니다. 또한, 생성된 프로젝트의 폴더 구조와 역할에 대해서 알아봅시다.

Webpack 설정을 통해 React를 시작하는 방법이나, create-react-app를 사용하여 React 프로젝트를 생성하는 방법에 대해서는 이전 블로그 포스트를 확인해 주시기 바랍니다.

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

블로그 리스트

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js의 시리즈 리스트입니다.

Node 설치

Next.js를 사용하여 React 프로젝트를 개발하기 위해서는 Node를 설치할 필요가 있습니다. 각각의 OS에 맞게 Node를 설치합니다.

macOS

Homebrew는 맥에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자입니다. Homebrew를 통해 맥에 필요한 패키지를 간단하게 설치할 수 있다. 다음 명령어를 실행하여 Homebrew를 설치합니다.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

설치가 완료되었다면, 다음 명령어를 실행하여 잘 설치되었는지 확인합니다.

brew --version

만약 버전이 표시되지 않는다면, 터미널을 종료하고, 다시 실행시킵니다. 이미 Homebrew가 설치된 분들은 다음 명령어를 실행하여 Node를 설치합니다.

brew install node

Windows

윈도우에는 Chocolatey라는 패키지 매니저를 사용합니다. 관리자 권한으로 실행된 명령어 프롬프트 또는 파워쉘을 열고 다음 명령어를 실행하여 Chocolatey를 설치합니다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

설치가 완료되었다면, 다음 명령어를 실행하여, 설치가 잘 되었는지 확인합니다.

choco –version

Chocolatey의 버전이 표시되지 않는다면, 명령어 프롬프트 또는 파워쉘을 종료하고 다시 실행시킵니다. Chocolatey가 설치되었다면, 다음 명령어를 실행하여 Node를 설치합니다.

choco install -y nodejs.install

create-next-app 설치

React 프레임워크인 Next.js를 사용하기 위해서는 create-next-app를 설치할 필요가 있습니다. 다음 명령어를 사용하여 create-next-app를 설치합니다.

npm install -g create-next-app

설치가 완료되었다면, 다음 명령어를 실행하여 create-next-app이 잘 설치되었는지 확인합니다.

create-next-app --version

문제없이 설치하였다면, 다음과 같이 create-next-app의 버전이 표시됩니다.

12.0.10

Next.js 프로젝트 생성

이제 설치한 create-next-app을 사용하여 Next.js 프로젝트를 생성해 봅시다.

npx create-next-app my-app

위에 명령어를 실행하면 다음과 같이 Next.js 프로젝트가 생성되는 것을 확인할 수 있습니다.

|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- next.config.js
|-- package.json

이렇게 create-next-app을 사용하여 생성한 Next.js 프로젝트의 폴더와 파일을 살펴보면 다음과 같습니다.

  • public: create-next-app으로 개발할 Next.js 프로젝트의 Static 파일들(이미지 파일 등)이 저장된 폴더입니다.
  • pages: Next.js 프로젝트에서 화면에 표시될 페이지들을 저장하는 폴더입니다.
  • pages/index.js: index 페이지(/)에 해당하는 파일입니다.
  • pages/_app.js: 모든 페이지에 공통으로 사용되는 컴포넌트입니다. 모든 페이지에 레이아웃 등을 설정할 때 사용합니다.
  • styles: 스타일 파일(css)을 저장하는데 사용하는 폴더입니다.
  • styles/globals.css: 전체 페이지에 적용되는 스타일 파일입니다.
  • styles/Home.module.css: index.js 파일에서 사용하는 스타일 파일입니다.
  • .eslintrc.json: 정적 코드 분석 툴인 ESLint 설정에 관한 파일입니다.
  • next.config.js: Next.js 프로젝트 설정에 관한 파일입니다.
  • package.json: 개발에 필요한 라이브러리를 관리하는 파일입니다.

프로젝트 실행

create-next-app으로 생성한 Next.js 프로젝트의 package.json 파일을 열면 다음과 같은 내용을 확인할 수 있습니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

다음은 create-next-app으로 생성한 Next.js 프로젝트에서 사용 가능한 스크립트입니다.

  • dev: Next.js 프로젝트를 개발 모드(development mode)로 실행합니다.
  • build: Next.js 프로젝트를 production mode로 빌드합니다.
  • start: Next.js 프로젝트를 productoin mode로 실행합니다.
  • lint: Next.js에 기본 설정된 ESLint 설정을 사용하여 ESLint를 실행합니다.

새롭게 생성한 Next.js 프로젝트를 실행하기 위해서 다음의 명령어를 실행합니다.

npm run dev

위에 명령어가 정상적으로 실행되면, 브라우저에 http://localhost:3000가 자동으로 열리면서 다음과 같은 화면이 표시됩니다.

create-next-app first app

완료

이번 블로그 포스트에서는 create-next-app을 통해 Next.js 프로젝트를 실행하는 방법에 대해서 알아보았습니다. 여러분도 이제 create-next-app을 통해 좀 더 쉽게 React 프로젝트를 시작해 보시기 바랍니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts