.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
Installation : 설치
•
시스템 요구 사항
◦
Node.js 16.8 이상.
◦
MacOS, Windows(WSL 포함) 및 Linux가 지원된다.
pages 디렉터리에는 Node.js v14 이상이 필요하지만, app 디렉터리에는 Node v16.8.0 이상이 필요하다.
자동 설치
•
app 디렉터리를 사용하여 새 Next.js 프로젝트를 자동으로 생성
npx create-next-app@latest--experimental-app
Shell
복사
•
create-next-app는 이제 기본적으로 TypeScript와 함께 제공
수동 설치
•
새 Next.js 앱을 만들려면 필요한 패키지를 설치합니다:
npm install next@latest react@latest react-dom@latest eslint-config-next@latest
Shell
복사
•
package.json을 열고 다음 스크립트를 추가
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
JSON
복사
•
이 스크립트는 애플리케이션 개발의 여러 단계를 나타낸다.
◦
dev: next dev를 실행하여 개발 모드에서 Next.js를 시작합니다.
◦
build: ndex build를 실행하여 프로덕션용으로 애플리케이션을 빌드합니다.
◦
start: next start를 실행하여 Next.js 프로덕션 서버를 시작합니다.
◦
lint: next lint를 실행하여 Next.js의 기본 제공 ESLint 구성을 설정합니다.
•
다음으로 베타 app 디렉토리를 선택
•
프로젝트의 루트 디렉터리에 next.config.js 파일을 생성하고 다음 코드를 추가
/** @type {import('next').NextConfig} */const nextConfig = {
experimental: {
appDir: true,
},
};
module.exports = nextConfig;
TypeScript
복사
•
app 폴더를 생성하고 layout.tsx 및 page.tsx 파일을 추가
•
사용자가 애플리케이션의 루트를 방문할 때 렌더링
•
필수적으로 <html> 및 <body> 태그를 사용하여 app/layout.tsx 내에 루트 레이아웃을 생성
// app/layout.tsxexport default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
TypeScript
복사
•
마지막으로 몇 가지 초기 콘텐츠로 홈페이지 app/page.tsx를 만든다
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
TypeScript
복사
layout.tsx를 만드는 것을 잊어버린 경우, next dev 서버로 개발 서버를 실행할 때 Next.js가 이 파일을 자동으로 생성한다.
개발 서버 실행하기
1.
npm run dev를 실행하여 개발 서버를 시작
2.
http://localhost:3000 를 방문하여 애플리케이션을 확인
3.
app/layout.tsx 또는 app/page.tsx를 편집하고 저장하면 브라우저에서 업데이트된 결과를 확인할 수 있다.
Upgrade Guide : Next.js 13 업그레이드 가이드
•
Next.js 애플리케이션을 버전 12에서 버전 13(안정)으로 업데이트하기.
•
pages와 디렉터리 모두에서 작동하는 기능 업그레이드.
•
기존 애플리케이션을 에서 으로 점진적으로 마이그레이션합니다.
업그레이드
•
•
Next.js 버전
◦
Next.js 버전 13으로 업데이트하려면 선호하는 패키지 관리자를 사용하여 다음 명령을 실행
npm install next@latest react@latest react-dom@latest
Shell
복사
ESLint 버전
•
ESLint를 사용하는 경우, ESLint 버전을 업그레이드해야 합니다:
npm install -D eslint-config-next@latest
Shell
복사
ESLint 변경 사항을 적용하려면 VS Code에서 ESLint 서버를 다시 시작해야 할 수 있다.
명령 팔레트(Mac의 경우 cmd+shift+p, Windows의 경우 ctrl+shift+p)를 열고 ESLint를 검색
ESLint 서버를 재시작
