개요
Next.js 14 주요 업데이트 4가지 중 하나는 공식문서에서 교육과정을 제공해준다는 것입니다.
Next.js framework의 이해는 공식문서 Learn Next.js 를 참조해주시길 바랍니다.
Prerequisites
node : 현재 기준 최신 Next.js 14.0.4는 node version 18.17이상만 지원하므로 버전 20 설치를 추천함.
(현재 LTS 최신 버전은 20.10.0)
Set up
app 이름을 정하고 폴더를 만든다.
예: app 이름 : x2bee-fo-dev
$ mkdir x2bee-fo
$ cd x2bee-fo
$ code . // 자신이 쓰는 IDE 열기
package.json 파일 생성하고 아래 입력
{
"name": "x2bee-fo",
"private": true
}
터미널에서 다음 3가지 패키지 설치
$ pnpm add next react react-dom
( 만약 npm이나 yarn을 쓰는 경우 install, bun을 쓰는 경우 bun add 하면 된다. )
node_modules라는 폴더가 생성되며 설치가 된다.
git 설정
.gitignore 파일 생성 → 다음 입력
# next.js
/.next/
# dependencies
/node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock
README.md 파일 생성
## Getting Started
run in local(dev) environment
```bash
npm run dev
```
run in deployment environment
```bash
npm run build
npm run start
```
git 주소 설정
$ git init
$ git remote add origin [https:// git 주소]
$ git remote -v // 확인 용
git commit하기
$ git add .
$ git commit -m 'x2bee storefront with Next14'
$ git push origin main
root에 src 폴더를 생성 → app 폴더 생성 → layout.jsx 파일 생성 후 다음 복사 붙이기
import React from 'react'
const RootLayout = ({ children }) => {
return (
<html lang="ko">
<body>{children}</body>
</html>
);
};
export default RootLayout;
참고:
$ ls node_modules/.bin
// nextnpx next를 실행할 때 여기가 실행되는 것
$ npx next --help
Available commands
build, start, export, dev, lint, telemetry, info, experimental-compile, experimental-generate
여기 있는 command를 이용해 package.json에 scripts를 작성할 수 있다.
package.json에 "private": true,밑에 다음 코드 4줄 추가
{
"name": "x2bee-fo",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^14.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
이제 다음을 실행
$ npm run dev
.next 폴더가 자동으로 생성되면서
▲ Next.js 14.0.4
- Local: http://localhost:3000
✓ Ready in 2.7s
실행되는 것을 볼 수 있다. (아직 page.jsx 파일이 없으므로 브라우저에서는 404에러가 뜨는 상태)
'Next.js 개발 가이드 > 01. Set up' 카테고리의 다른 글
| 7. Set up - ESLint, Prettier [보완] (1) | 2024.01.15 |
|---|---|
| 6. Set up - 환경 및 metadata (0) | 2023.12.14 |
| 5. Set up - Tailwind CSS (0) | 2023.12.14 |
| 4. Set up - ESLint, Prettier (0) | 2023.12.14 |
| 3. Set up - typescript (0) | 2023.12.14 |
