[Next.js] Next.js 시작하기

Next.js 프로젝트 개발환경 구성(create-next-app, manual setup)

create-next-app

create-next-app을 이용합니다.

npx create-next-app@latest
# 또는
yarn create next-app

타입스크립트를 사용할 경우

npx create-next-app@latest --typescript
# 또는
yarn create next-app --typescript

 

직접 패키지를 설치하고 구조를 만듭니다.

 

npm init 혹은 직접 package.json 파일을 만들고 시작합니다.

npm install next react react-dom
# 또는
yarn add next react react-dom

package.json 파일에 scripts를 작성합니다.

"scripts": {

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

최상위에 pages 폴더를 만들고 그 안에 index.js 파일을 작성합니다.

터미널에 npm run dev를 입력하고 웹 브라우저에서 localhost:3000을 입력 해 봅니다.

 

간단하게 프로젝트 구성을 마쳤습니다.

 

- Pre-rendering

- Page Navigation / Routing

- Styling (with Styled JSX)

- Loading data

- Dynamic Route

- Dark Mode switch

- Hydration

- Deployment