시작

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

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

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

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 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"
}

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

두 개의 디렉토리 페이지를 만들고 응용 프로그램의 루트에 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

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

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

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