Next.js (React Framework) 시작하기
개요
친구랑 사이드 프로젝트를 시작했다. React 의 강력한 프레임 워크인 Next.js 로 시작하려고 한다. 프로젝트를 자주 시작하지 않다보니, 다시한번 차근차근 처음부터 시작하는 것을 기록하려고 한다.
Node 설치
Next.js 를 사용하여 React 프로젝트를 개발하기 위해서는 Node 설치할 필요가 있다.
create-next-app 설치
다음 명령어를 사용하여 create-next-app 을 설치한다.
1
npm install -g create-next-app
1
create-next-app --version
설치가 되었다면, 다음과 같이 버전이 표시된다.
1
12.3.1
Next.js 프로젝트 생성
이제 설치한 create-next-app 을 사용해서 Next.js 프로젝트를 생성 해보자.
1
npx create-next-app yabowlja_frontend
위에 명령어를 실행하면 다음과 같이 Next.js 프로젝트가 생성되는 것을 확인할 수 있다.
1
2
3
4
5
6
|--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 파일을 열면 다음과 같은 내용을 확인할 수 있다.
1
2
3
4
5
6
"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 프로젝트를 production mode로 실행한다,
- lint: Next.js에 기본 설정된 ESLint 설정을 사용하여 ESLint 로 실행한다.
새롭게 생성한 Next.js 프로젝트를 실행하기 위해서 다음의 명령어를 실행한다.
1
npm run dev
위 명령어가 정상적으로 실행되면, 브라우저에 http://localhost:3000 이 자동으로 열리면서 화면이 표시된다.