Next 공식문서 한글번역
- 스터디 공부용으로 Next.js beta문서 번역을 시작합니다.
- DeepL 번역기를 적극 사용 할거고, 가독성을 위해 생략,수정 혹은 의역한 부분이 있을 수 있습니다.
- Next.js beta 원문 링크는 https://beta.nextjs.org/docs 입니다.
- 오역된 부분이 있거나, 문제 발생시 dnjfdnjf22@gmail.com 혹은 https://open.kakao.com/me/100rumi 으로 연락주세요.
Getting Started : 시작하기
Next.js 문서는 두 개의 사이트로 나뉘어져 있습니다:
Next 13 앱 라우터(베타) 문서(이 문서): React 서버 컴포넌트, 스트리밍, 새로운 데이터 불러오기 등을 사용해 보세요.
Next 13 (안정) 문서: 새로운 글꼴 최적화, 업데이트된 이미지, 링크 및 스크립트 컴포넌트 등을 사용해 보세요.
앱 라우터 소개
지난 몇 달 동안 Next.js 팀은 Next.js와 React 서버 컴포넌트 및 React 18 기능을 통합하기 위해 노력해왔습니다. 이제 새로운 앱 디렉토리에서 이러한 새로운 기능을 사용해 볼 수 있습니다.
앱 라우터는 현재 베타 버전이며 프로덕션 환경에서 사용하지 않는 것이 좋습니다.
기능 개요
다음은 앱 라우터의 새로운 기능을 요약한 것입니다:
라우팅
레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 새로운 파일 시스템 기반 라우터입니다.
렌더링
클라이언트 및 서버 컴포넌트를 사용한 클라이언트 측 및 서버 측 렌더링. 서버의 정적 렌더링과 동적 렌더링은 Next.js를 통해 더욱 최적화됩니다. Edge 및 Node.js 런타임에서 스트리밍.
데이터 가져오기
React 컴포넌트에서 async/await 지원을 통한 간소화된 데이터 불러오기 및 React 및 웹 플랫폼에 부합하는 fetch() API.
캐싱
서버 컴포넌트 및 클라이언트 측 탐색에 최적화된 새로운 Next.js HTTP 캐시 및 클라이언트 측 캐시.
최적화
기본 브라우저 지연 로딩으로 이미지 컴포넌트가 개선되었습니다. 자동 글꼴 최적화 기능을 갖춘 새로운 글꼴 모듈.
변환(Transpilation)
로컬 패키지(ex: monorepos) 또는 외부 종속성(ex예: node_modules)에서 종속성을 자동으로 변환하고 번들링합니다.
API
Next.js 전반에 걸친 API 디자인 업데이트. 새로운 API는 API 참조 섹션을 참고하세요.
Tooling
최대 700배 빠른 Rust 기반 Webpack을 대체하는 Turbopack을 소개합니다.
더 자세한 목록은 앱 라우터 로드맵에서 확인하세요.
서버 컴포넌트에서 사고하기
React가 UI 구축에 대한 사고방식을 바꾼 것과 유사하게, React 서버 컴포넌트는 서버와 클라이언트를 활용하는 하이브리드 애플리케이션을 구축하기 위한 새로운 사고 모델을 도입합니다.
React는 이제 전체 애플리케이션을 클라이언트 측에서 렌더링하는 대신, 컴포넌트의 목적에 따라 렌더링할 위치를 선택할 수 있는 유연성을 제공합니다.
예를 들어 Next.js 애플리케이션의 페이지를 생각해 보세요:
페이지를 더 작은 컴포넌트로 분할하면 대부분의 컴포넌트가 비대화형이며 서버에서 서버 컴포넌트로 렌더링할 수 있음을 알 수 있습니다. 더 작은 인터랙티브 UI의 경우 클라이언트 컴포넌트를 뿌릴 수 있습니다. 이는 Next.js의 서버 우선 접근 방식과 일치합니다.
이러한 전환을 더 쉽게 하기 위해 서버 컴포넌트는 앱 디렉토리의 기본값이므로 추가 단계를 수행하지 않아도 됩니다. 그런 다음 필요에 따라 클라이언트 컴포넌트를 선택적으로 사용할 수 있습니다.
자세한 내용은 서버 및 클라이언트 컴포넌트 가이드를 참조하세요.
Installation : 설치
시스템 요구 사항
먼저 개발 환경이 다음 요구 사항을 충족하는지 확인하세요:
- Node.js 16.8 이상.
- MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다.
Note: pages 디렉터리에는 Node.js v14 이상이 필요하지만, app 디렉터리에는 Node v16.8.0 이상이 필요합니다.
자동 설치
app 디렉터리를 사용하여 새 Next.js 프로젝트를 자동으로 생성합니다:
npx create-next-app@latest --experimental-app
create-next-app는 이제 기본적으로 TypeScript와 함께 제공됩니다. 자세한 내용은 TypeScript를 참조하세요.
수동 설치
새 Next.js 앱을 만들려면 필요한 패키지를 설치합니다:
npm install next@latest react@latest react-dom@latest eslint-config-next@latestpackage.json을 열고 다음 스크립트를 추가합니다:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}이 스크립트는 애플리케이션 개발의 여러 단계를 나타냅니다:
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;app 폴더를 생성하고 layout.tsx 및 page.tsx 파일을 추가합니다. 사용자가 애플리케이션의 루트를 방문할 때 렌더링됩니다.
필수적으로 <html> 및 <body> 태그를 사용하여 app/layout.tsx 내에 루트 레이아웃을 생성합니다:
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}마지막으로 몇 가지 초기 콘텐츠로 홈페이지 app/page.tsx를 만듭니다:
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}알아두면 좋습니다: layout.tsx를 만드는 것을 잊어버린 경우, next dev 서버로 개발 서버를 실행할 때 Next.js가 이 파일을 자동으로 생성합니다.
개발 서버 실행하기
- npm run dev를 실행하여 개발 서버를 시작합니다.
- http://localhost:3000 를 방문하여 애플리케이션을 확인합니다.
- app/layout.tsx 또는 app/page.tsx를 편집하고 저장하면 브라우저에서 업데이트된 결과를 확인할 수 있습니다.
Upgrade Guide : Next.js 13 업그레이드 가이드
이 가이드가 도움이 될 것입니다:
- Next.js 애플리케이션을 버전 12에서 버전 13(안정)으로 업데이트하기.
- pages와 app 디렉터리 모두에서 작동하는 기능 업그레이드.
- 기존 애플리케이션을 pages에서 app으로 점진적으로 마이그레이션합니다.
업그레이드
Node.js 버전
이제 최소 Node.js 버전은 v16.8입니다. 자세한 내용은 Node.js 설명서를 참조하세요.
Next.js 버전
Next.js 버전 13으로 업데이트하려면 선호하는 패키지 관리자를 사용하여 다음 명령을 실행합니다:
npm install next@latest react@latest react-dom@latestESLint 버전
ESLint를 사용하는 경우, ESLint 버전을 업그레이드해야 합니다:
npm install -D eslint-config-next@latestNote : ESLint 변경 사항을 적용하려면 VS Code에서 ESLint 서버를 다시 시작해야 할 수 있습니다. 명령 팔레트(Mac의 경우 cmd+shift+p, Windows의 경우 ctrl+shift+p)를 열고 ESLint를 검색합니다: ESLint 서버를 재시작합니다.
새로운 기능 업그레이드
Next.js 13에서는 새로운 기능과 규칙을 갖춘 새로운 App Router가 도입되었습니다. 새로운 라우터는 app 디렉터리에서 사용할 수 있으며 pages 디렉터리와 공존합니다.
Next.js 13으로 업그레이드할 때 새 앱 라우터를 사용할 필요는 없습니다. 업데이트된 이미지 컴포넌트, 링크 컴포넌트, 스크립트 컴포넌트, 글꼴 최적화 등 두 디렉터리 모두에서 작동하는 새로운 기능이 포함된 페이지를 계속 사용할 수 있습니다.
<Image/> Component
Next.js 12에서는 임시 임포트가 가능한 이미지 컴포넌트(next/future/image)에 새로운 개선 사항이 도입되었습니다. 이러한 개선 사항에는 클라이언트 측 자바스크립트 감소, 더 쉬운 이미지 확장 및 스타일 지정 방법, 접근성 향상, 네이티브 브라우저 지연 로딩 등이 포함됩니다.
버전 13에서는 이제 이 새로운 동작이 다음/이미지에 대한 기본값이 됩니다.
새로운 이미지 컴포넌트로 마이그레이션하는 데 도움이 되는 두 가지 코드 모드가 있습니다:
next-image-to-legacy-image 코드모드
next/image imports 이름을 next/legacy/image로 안전하고 자동으로 바꿉니다. 기존 컴포넌트는 동일한 동작을 유지합니다.
next-image-experimental 코드모드
인라인 스타일을 위험하게 추가하고 사용하지 않는 props를 제거합니다. 이렇게 하면 기존 컴포넌트의 동작이 새로운 기본값과 일치하도록 변경됩니다. 이 코드 모드를 사용하려면 먼저 next-image-to-legacy-image 코드 모드를 실행해야 합니다.
<Link> Component
<Link> 컴포넌트는 더 이상 하위에 <a> 태그를 수동으로 추가할 필요가 없습니다. 이 동작은 버전 12.2에서 실험적 옵션으로 추가되었으며 이제 기본값이 되었습니다. Next.js 13에서 <Link>는 항상 <a>를 렌더링하고 기본 태그에 props를 전달할 수 있습니다.
import Link from 'next/link'
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
About
</Link>link를 Next.js 13으로 업그레이드하려면 new-link 코드모드를 사용하면 됩니다.
<Script> Component
next/script의 동작이 pages와 app을 모두 지원하도록 업데이트되었지만 원활한 마이그레이션을 위해 몇 가지 변경이 필요합니다:
- 이전에 _document.js에 포함했던 모든 beforeInteractive 스크립트를 루트 레이아웃 파일(app/layout.tsx)로 이동하세요.
- 실험적인 worker 전략은 아직 app에서 작동하지 않으며 이 전략으로 표시된 스크립트는 제거하거나 다른 전략(예: lazyOnload)을 사용하도록 수정해야 합니다.
- 서버 컴포넌트에서는 onLoad, onReady 및 onError 핸들러가 작동하지 않으므로 클라이언트 컴포넌트로 이동하거나 완전히 제거해야 합니다.
글꼴 최적화
이전에는 Next.js가 글꼴 CSS를 인라이닝하여 글꼴을 최적화하는 데 도움을 주었습니다. 버전 13에서는 글꼴 로딩 환경을 사용자 정의하는 동시에 뛰어난 성능과 개인정보 보호를 보장하는 새로운 next/font 모듈(beta)이 도입되었습니다. next/font는 pages와 app 디렉터리 모두에서 지원됩니다.
pages에서는 인라이닝 CSS가 여전히 작동하지만 app에서는 작동하지 않습니다. 대신 next/font을 사용해야 합니다.
next/font 사용 방법은 글꼴 최적화 페이지를 참조하세요.
페이지에서 앱으로 마이그레이션
경고
App Router는 베타 버전이며 안정성이 확보되기 전에 일부 규칙이 변경될 수 있습니다. 프로덕션 환경에서 app 디렉터리를 사용하지 않는 것이 좋습니다.
많은 분들이 이번 릴리스에서 서버 컴포넌트, 서스펜스, 컴포넌트 내부의 프로미스 등 Next.js 13이 기반으로 구축한 React 기능을 처음 사용하게 될 것입니다. 특수 파일 및 레이아웃과 같은 새로운 Next.js 13 기능과 결합하면 마이그레이션은 새로운 개념, 사고 모델 및 행동 변화를 학습해야 한다는 것을 의미합니다.
마이그레이션을 더 작은 단계로 세분화하여 이러한 업데이트의 복잡성을 줄이는 것이 좋습니다. app 디렉터리는 pages 디렉터리와 동시에 작동하도록 의도적으로 설계되어 페이지 단위로 점진적으로 마이그레이션할 수 있습니다.
- app 디렉토리는 중첩된 경로와 레이아웃을 지원합니다. 자세히 알아보기.
- 중첩된 폴더를 사용하여 경로를 정의하고 특수 page.js 파일을 사용하여 경로 세그먼트를 공개적으로 액세스할 수 있도록 설정하세요. 자세히 알아보기.
- 특수 파일 규칙은 각 경로 세그먼트에 대한 UI를 만드는 데 사용됩니다.
가장 일반적인 특수 파일은 page.js와 layout.js입니다.
- page.js를 사용하여 경로에 고유한 UI를 정의합니다.
- 여러 경로에서 공유되는 UI를 정의하려면 layout.js를 사용합니다.
- 특수 파일에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다. - 컴포넌트, 스타일, 테스트 등과 같은 다른 파일을 app 디렉터리 내에 배치할 수 있습니다.
getServerSideProps, getStaticProps, getStaticPaths와 같은 데이터 가져오기 함수가 app 내부의 새로운 API로 대체되었습니다. - pages/_app.js 및 pages/_document.js가 단일 app/layout.js 루트 레이아웃으로 대체되었습니다.
- pages/_error.js가 더 세분화된 error.js 특수 파일로 대체되었습니다.
- pages/404.js가 not-found.js 파일로 대체되었습니다.
- pages/api/*는 현재 pages 디렉터리 안에 남아 있습니다.
셀프 실습
오늘은 여기까지...