NEXT.js 베타 한국어 번역 : Next js 시작하기 / Next js 설치하기 / 업그레이드 가이드

by

다음 공식 문서 한국어 번역

  • 연구 연구를 위한 Next.js 베타 문서 번역을 시작하세요.
  • 저는 DeepL 번역기를 적극적으로 사용할 것이며, 가독성을 위해 누락, 수정 또는 의역이 있을 수 있습니다.
  • 원래 Next.js 베타에 대한 링크는 다음과 같습니다. https://beta.nextjs.org/docs 안돼.
  • 오역이 있거나 문제가 발생하면 [email protected] 또는 https://open.kakao.com/me/100rumi 문의하시기 바랍니다.

시작하기 : 시작하기

Next.js 문서는 두 사이트로 나뉩니다.

다음 13 앱 라우터(베타) 설명서(이 문서): React 서버 구성 요소, 스트리밍, 새 데이터 로드 등을 사용합니다.
다음 13(안정적) 문서: 새로운 글꼴 최적화, 업데이트된 이미지, 링크 및 스크립트 구성 요소 등을 사용해 보세요.

앱 라우터 소개

지난 몇 달 동안 Next.js 팀은 Next.js를 React 서버 구성 요소 및 React 18 기능과 통합하는 작업을 해왔습니다. 이제 새로운 앱 디렉토리에서 이러한 새로운 기능을 사용해 볼 수 있습니다.

'추천 관련글,

앱 라우터는 현재 베타 버전이며 프로덕션 용도로는 권장되지 않습니다.

기능 개요

다음 앱 라우터새로운 기능에 대한 요약은 다음과 같습니다.

라우팅
레이아웃, 중첩 라우팅, 로드 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 새로운 파일 시스템 기반 라우터입니다.

표현
클라이언트 및 서버 구성 요소를 사용하는 클라이언트 측 및 서버 측 렌더링. 서버의 정적 및 동적 렌더링은 Next.js로 더욱 최적화됩니다. Edge 및 Node.js 런타임에서 스트리밍합니다.

데이터 가져오기
반응 구성 요소에서 비동기/대기 React 및 웹 플랫폼을 위한 지원 및 fetch() API를 통해 간소화된 데이터 가져오기.

캐싱
서버 구성 요소 및 클라이언트 측 탐색에 최적화된 새로운 Next.js HTTP 캐시 및 클라이언트 측 캐시.

최적화
기본 브라우저 지연 로딩으로 이미지 구성 요소가 개선되었습니다. 자동 글꼴 최적화 기능이 있는 새로운 글꼴 모듈.

번역
로컬 패키지(예: monorepos) 또는 외부 종속성(예: node_modules)의 종속성을 자동으로 변환하고 묶습니다.

API
Next.js에서 API 디자인 업데이트. 새 API에 대한 API 참조 섹션을 참조하십시오.

압형
최대 700배 빠른 Rust 기반 Webpack 교체 터보팩소개합니다.

자세한 목록은 앱 라우터 로드맵확인 해봐

서버 구성 요소에 대한 생각

React가 UI 구축에 대한 생각 방식을 어떻게 바꾸었는지와 유사하게 React 서버 구성 요소는 서버와 클라이언트를 활용하는 하이브리드 애플리케이션 구축을 위한 새로운 사고 모델을 도입합니다.

전체 애플리케이션 클라이언트 측을 렌더링하는 대신 React는 이제 구성 요소의 목적에 따라 렌더링할 위치를 선택할 수 있는 유연성을 제공합니다.

예를 들어 Next.js 애플리케이션의 페이지를 생각해 보세요.


페이지를 더 작은 구성 요소로 나누면 대부분의 구성 요소가 비대화형이며 서버에서 서버 구성 요소로 렌더링할 수 있음을 알 수 있습니다. 더 작은 대화형 UI의 경우 클라이언트 구성 요소에 뿌릴 수 있습니다. 이는 Next.js의 서버 우선 접근 방식과 일치합니다.

이 전환을 더 쉽게 하기 위해 서버 구성요소는 기본적으로 앱 디렉토리로 지정되므로 추가 단계를 수행할 필요가 없습니다. 그런 다음 필요에 따라 선택적으로 클라이언트 구성 요소를 사용할 수 있습니다.

자세한 내용은 서버 및 클라이언트 구성 요소 가이드보다

설치 : 설치

시스템 요구 사항
먼저 개발 환경이 다음 요구 사항을 충족하는지 확인하십시오.

  • Node.js 16.8 이상.
  • MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다.

메모: 페이지 Node.js 디렉토리 v14 더 필요하지만 앱 디렉토리의 노드 v16.8.0 필요 이상으로.

자동 설치

앱 다음 디렉터리를 사용하여 새 Next.js 프로젝트를 자동으로 만듭니다.

npx create-next-app@latest --experimental-app

다음 앱 만들기이제 기본적으로 TypeScript와 함께 제공됩니다. 자세한 내용은 타입스크립트보다

수동 설치

새 Next.js 앱을 만들려면 필수 패키지를 설치합니다.

npm install next@latest react@latest react-dom@latest eslint-config-next@latest

패키지.json다음 스크립트를 추가합니다.

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

이 스크립트는 애플리케이션 개발의 다양한 단계를 나타냅니다.

개발자:next dev를 실행하여 개발 모드에서 Next.js를 시작합니다.
짓다: ndex 빌드를 실행하여 프로덕션용 애플리케이션을 빌드합니다.
시작:next start를 실행하여 Next.js 프로덕션 서버를 시작합니다.
보푸라기:next lint를 실행하여 Next.js의 내장 ESLint 구성을 설정합니다.

다음으로 베타 앱 디렉토리를 선택합니다. 프로젝트의 루트 디렉토리에서 next.config.js 파일을 만들고 다음 코드를 추가합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

앱 폴더 만들기 레이아웃.tsx 그리고 페이지.tsx 파일 추가. 사용자가 애플리케이션의 루트를 방문할 때 렌더링됩니다.


반드시 그리고 태그 사용 앱/레이아웃.tsx 다음 내에서 루트 레이아웃을 만듭니다.

// app/layout.tsx

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

마지막으로 일부 초기 콘텐츠와 함께 홈페이지 앱/페이지.tsx생성:

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

~ 알아 둘만 한: 레이아웃.tsx만드는 것을 잊은 경우 다음 개발자 Next.js는 개발 서버를 서버로 실행할 때 자동으로 이 파일을 생성합니다.

개발 서버 실행

  1. npm 실행 개발개발 서버를 시작합니다.
  2. http://로컬 호스트:3000 응용 프로그램을 보려면.
  3. 앱/레이아웃.tsx 또는 앱/페이지.tsx브라우저에서 업데이트된 결과를 보려면 편집하고 저장하십시오.

업그레이드 가이드 : Next.js 13 업그레이드 가이드

이 가이드는 다음에 도움이 될 것입니다.

  • Next.js 애플리케이션을 버전 12에서 버전 13(안정적)으로 업데이트합니다.
  • 페이지그리고 앱 디렉터리 전체에서 작동하는 기능 업그레이드.
  • 기존 애플리케이션 페이지~에 앱점진적으로 마이그레이션

업그레이드

Node.js 버전
이제 최소 Node.js 버전은 v16.8안돼. 자세한 내용은 Node.js 문서보다

Next.js 버전
Next.js 버전 13으로 업데이트하려면 선호하는 패키지 관리자를 사용하여 다음 명령을 실행하세요.

npm install next@latest react@latest react-dom@latest

ESLint 버전
ESLint를 사용하는 경우 ESLint 버전을 업그레이드해야 합니다.

npm install -D eslint-config-next@latest

메모 : ESLint 변경 사항을 적용하려면 VS Code에서 ESLint 서버를 다시 시작해야 할 수 있습니다. 명령 팔레트(Mac에서는 cmd+shift+p, Windows에서는 ctrl+shift+p)를 열고 ESLint를 검색합니다. ESLint 서버를 다시 시작합니다.

새로운 기능 업그레이드

Next.js 13에는 새로운 기능과 규칙이 포함된 새로운 앱 라우터가 도입되었습니다. 새로운 라우터 앱 디렉토리에서 사용 가능 페이지 디렉토리와 공존합니다.

Next.js 13으로 업그레이드할 때 새 앱 라우터를 사용할 필요가 없습니다. 업데이트된 이미지 구성 요소, 링크 구성 요소, 스크립트 구성 요소 및 글꼴 최적화와 같이 두 디렉토리 모두에서 작동하는 새로운 기능과 함께 페이지를 계속 사용할 수 있습니다.

요소

Next.js 12는 임시 가져오기를 가능하게 하는 이미지 구성 요소(next/future/image)에 대한 새로운 개선 사항을 도입합니다. 이러한 개선 사항에는 클라이언트 측 JavaScript 감소, 이미지 크기 조정 및 스타일 지정이 더 쉬운 방법, 향상된 접근성, 기본 브라우저 지연 로딩 등이 포함됩니다.

버전 13에서 이 새로운 동작은 이제 next/image의 기본값입니다.

새 이미지 구성 요소로 마이그레이션하는 데 도움이 되는 두 가지 코드 모드가 있습니다.

next-image-to-legacy-image 코드 모드
다음/이미지 수입품 이름 다음/레거시/이미지안전하고 자동으로. 기존 구성 요소는 동일한 동작을 유지합니다.

다음 이미지 실험 코드 모드
위험하게 인라인 스타일을 추가하고 사용하지 않는 소품을 제거합니다. 이렇게 하면 새 기본값과 일치하도록 기존 구성 요소의 동작이 변경됩니다. 이 코드 모드를 사용하려면 먼저 next-image-to-legacy-image 코드 모드를 실행해야 합니다.

요소

구성 요소는 더 이상 수동으로 추가할 필요가 없습니다. 자녀에게 태그를 지정합니다. 이 동작은 버전 12.2에서 실험적 옵션으로 추가되었으며 이제 기본값입니다. Next.js 13에서 항상 렌더링 기본 태그에 소품을 전달할 수 있습니다.

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="http://space-rumi.about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="http://space-rumi.about">
  About
</Link>

Next.js 13에 대한 링크를 업그레이드하려면 새 링크 코드 모드를 사용할 수 있습니다.