개요
이번 블로그 포스트에서는 React 프레임워크인 Next.js를 설치하고 사용하는 방법에 대해서 설명합니다. 또한, 생성된 프로젝트의 폴더 구조와 역할에 대해서 알아봅시다.
- Next.js: https://nextjs.org/
Webpack 설정을 통해 React를 시작하는 방법이나, create-react-app를 사용하여 React 프로젝트를 생성하는 방법에 대해서는 이전 블로그 포스트를 확인해 주시기 바랍니다.
여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.
블로그 리스트
이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js의 시리즈 리스트입니다.
- [Next.js] 시작하기
- [Next.js] TypeScript
- [Next.js] Prettier
- [Next.js] 절대 경로로 컴포넌트 추가
- [Next.js] 테스트
- [Next.js] Storybook
- [Next.js] Storybook 배경색 변경
- [Next.js] 다국어 지원
- [Next.js] MUI
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을 통해 Next.js 프로젝트를 실행하는 방법에 대해서 알아보았습니다. 여러분도 이제 create-next-app을 통해 좀 더 쉽게 React 프로젝트를 시작해 보시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)