이 시리즈의 글은 Next.js Documentation을 번역하는 글이다.
프론트엔드 개발자로서 Next.js에 대해서는 꼭 알아둬야 할 것 같아서 공부를 시작한다.
그럼 렛츠 고우!

---

원본: https://nextjs.org/docs/getting-started

Getting Started

Next.js System Requirements

• Node.js 12.22.0 버전 이상
• MacOS, Windows(WSL), Linux

Next.js 프로젝트 만들기(자동 설정)

1) 'create-next-app'을 사용하여 Next.js 앱을 자동으로 생성하고 설정해줄 수 있다.

npx create-next-app@latest
# or
yarn create next-app

2) typescript를 사용하고 싶다면 '--typescript'를 추가하면 된다.

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

3) 설치 후 실행하기
'npm run dev', 'yarn dev', 'pnpm dev'를 실행하면 'https://localhost:3000' 에서 개발 서버(dev)를 실행할 수 있다. 브라우저에서 이 주소를 열면 pages/index.js의 내용이 보인다.

수동 설정

1) next, react, react-dom을 설치한다.

npm install next react react-dom
# or
yarn add next react react-dom

2) package.json 파일에 아래의 스크립트를 추가해준다.

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

• dev: Next.js를 개발 모드로 실행한다.
• build: 배포 목적으로 앱을 빌드한다.
• start: 운영 서버를 실행한다.
• lint: Next.js의 내장 ESLint를 설정한다.

3) root에 pages와 public 디렉토리를 생성한다.

• pages: 파일 이름에 따라 라우팅을 제공한다. 예를 들어 pages/about.js 파일은 브라우저에서 /about으로 접근할 수 있다.
• public: 이미지, 폰트와 같은 정적 자원(static assets)을 저장한다. public 내부의 파일은 기본 url(/)에서 시작하는 코드로 참조할 수 있다.

Next.js는 기본적으로 page라는 개념을 기반으로 구축되었다. page란 pages 디렉토리 안의 .js, .jsx, .ts, .tsx 파일에서 export된 리액트 컴포넌트를 의미한다.
pages 내부의 index.js 파일은 앱을 처음으로 방문했을 때 렌더링되는 페이지이다.

---

여기까지 하면 Next.js의 기본 구성은 끝났고, 다음과 같은 기능이 제공된다.

• 자동 컴파일 및 번들링
• React Fast Refresh
• 페이지의 정적 생성 및 SSR
• 기본 url(/)을 통해 제공되는 정적 파일