Next.js 설치 방법

시작

다음.js 문서에 오신 것을 환영합니다!

Next.js를 처음 접하는 경우 학습 과정으로 시작하는 것이 좋습니다. 퀴즈가 포함된 대화형 과정은 Next.js를 사용하기 위해 알아야 할 모든 것을 안내합니다.

Next.js와 관련된 질문이 있는 경우 언제든지 GitHub 토론에서 커뮤니티에 질문할 수 있습니다.

System Requirements

• Node.js 14.6.0 or newer
• MacOS, Windows (including WSL), and Linux are supported

Automatic Setup

모든 항목이 자동으로 설정되는 create-next-app을 사용하여 새 다음.js 앱을 만드는 것이 좋습니다. (빈 디렉터리를 만들 필요가 없습니다. create-next-app 당신을 위해 하나를 만들 것입니다.) 프로젝트를 만들려면 다음을 실행합니다.

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

TypeScript 프로젝트로 시작하려면 --typescript 플래그를 사용할 수 있습니다.

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

설치가 완료된 후:

• npm 실행 dev 또는 yarn dev 또는 pnpm dev를 실행하여 http://localhost:3000 에서 개발 서버를 시작합니다.
• http://localhost:3000 방문하여 신청서를 확인하십시오.
• 페이지/색인을 편집하고 브라우저에서 업데이트된 결과를 .js 확인합니다.

다음-만들기-앱을 사용하는 방법에 대한 자세한 내용은 다음-만들기-앱 설명서를 검토할 수 있습니다.

Manual Setup

다음으로 설치하고 프로젝트에서 반응하고 반응하십시오.

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

package.json을 열고 다음 스크립트를 추가합니다.

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

이러한 스크립트는 응용 프로그램 개발의 여러 단계를 나타냅니다.

• dev - Runs next dev to start Next.js in development mode
• build - Runs next build to build the application for production usage
• start - Runs next start to start a Next.js production server
• lint - Runs next lint to set up Next.js' built-in ESLint configuration

두 개의 디렉토리 페이지를 만들고 응용 프로그램의 루트에 public을 만듭니다.

• pages - 파일 이름을 기반으로 하는 경로와 연결됩니다. 예를 들어 페이지/정보.js는 /about에 매핑됩니다.
• public - 이미지, 글꼴 등과 같은 정적 자산을 저장합니다. 공용 디렉토리 내의 파일은 기본 URL (/)에서 시작하는 코드에서 참조 할 수 있습니다.

Next.js는 페이지 개념을 중심으로 구축됩니다. 페이지는 페이지 디렉토리의 .js, .jsx, .ts 또는 .tsx 파일에서 내보낸 React 구성 요소입니다. 파일 이름으로 동적 경로 매개 변수를 추가 할 수도 있습니다.

pages 디렉토리 내에 index.js 파일을 추가하여 시작합니다. 이 페이지는 사용자가 응용 프로그램의 루트를 방문할 때 렌더링됩니다.

페이지/인덱스.js를 다음 내용으로 채웁니다.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

설정이 완료되면 다음 단계를 따르세요.

• npm 실행 dev 또는 yarn dev 또는 pnpm dev를 실행하여 http://localhost:3000 에서 개발 서버를 시작합니다.
• http://localhost:3000 방문하여 신청서를 확인하십시오.
• 페이지/색인을 편집하고 브라우저에서 업데이트된 결과를 .js 확인합니다.

지금까지 우리는 다음을 얻습니다.

• 자동 컴파일 및 번들링
• 빠른 새로 고침 반응
• 페이지의 정적 생성 및 서버 측 렌더링/
• 기본 URL(/)에 매핑된 public/을 통해 제공되는 정적 파일

또한 모든 Next.js 애플리케이션은 처음부터 프로덕션에 사용할 수 있습니다. 자세한 내용은 배포 설명서를 참조하십시오.