[ Next.js ] Next13의 주요 기능에 대해 알아보자.

Vercel팀이 Next.js의 13버전이 2022년 10월 26일 Next.js 공식 페이지에 소개되었지만,

자세히 살펴보지를 않았는데 새로 이직하게된 회사에서 Next13으로 프로젝트를 새로 세팅하기로 이야기가 되어

공식 블로그 내용을 살펴보았다.

++Next.js 13.4(현재 기준 최신 버전)을 사용하려면 아래의 명령어를 통해 설치할 수 있다.

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

앱 라우팅 (App Directory) - Next.13.4(현재)기준 Stable

기존에 pages/ 디렉토리에서 라우팅 되던 방식과 다르게, app/ 디렉토리로 라우팅 하는 방식이 추가되었다.

- Tree : 계층 구조를 시각화 하기위한 규칙으로, 예를 들어 상위 및 하위 구성 요소가 있는 컴포넌트 트리, 폴더 구조이다.

- Subtree : 새 루트(처음)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부이다.

- Root : 루트 레아이웃과 같은 트리 또는 하위 트리의 첫 번째 노드이다.

- Leaf: 하위 트리에 하위 항목이 없는 노드(예: URL 경로의 마지막 segment.)

기존의 pages 라우터 방식

/ Pages Router
// pages/about.js

import React from 'react';
export default () => <h1>About us</h1>;

새로운 앱 라우터 방식

// New: App Router ✨
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

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

1. Layouts

상태를 유지하고, 비용이 많이 드는 리렌더링을 방지하면서 경로 간에 UI를 쉽게 공유할 수 있다.

아래의 파일 시스템을 통해 레이아웃을 정의할 수 있다. 레이아웃은 여러 페이지 간의 UI 를 공유한다.

네비게이션 상에서, 레이아웃은 상태를 유지하고, 상호작용할 수 있으며, 리렌더링 하지 않는다.

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

2. React Server Components

가장 동적인 응용 프로그램에 대해 서버 우선(server-first)을 기본값(default)으로 설정한다.

app/ 디렉토리는 React의 새로운 Server Components 아키텍쳐를 지원한디. 서버 컴포넌트와 클라이언트 컴포넌트는 각각 서버와 클라이언트가 가장 적합한 일에 사용되며, 이를 통해 개발자 경험을 향상시키고 빠르고 매우 인터랙티브한 앱을 단일 프로그래밍 모델로 구축할 수 있다.

서버 구성요소를 사용하면, 복잡한 인터페이스를 구축하는 동시에 클라이언트로 전송되는 JavaScript의 양을 줄여, 초기 페이지 로드 속도를 높일 수 있다.

경로(route)가 로드될 때, Next.js 및 React 런타임이 로드되어 캐시가 가능하고 크기를 예측할 수 있다.

이 런타임은 애플리케이션이 커져도 크기가 증가하지 않고, 비동기로 로드되어 서버로부터 HTML이 클라이언트에서 점진적으로 개선될 수 있도록 한다.

3. Streaming

렌더링 시 즉시 로드 상태 및 스트림을 UI단위로 표시한다. app/ 디렉토리는 UI의 렌더링 단위를 점진적으로 렌더링하고 렌더링된 단위를 클라이언트로 부분적으로 스트리밍할 수 있는 기능을 제공한다.

Next.js의 Server Components와 중첩된 레이아웃을 사용하면, 데이터를 명시적으로 필요로하지 않는 페이지 부분을 즉시 렌더링하고, 데이터를 가져오는 페이지 부분에는 로딩 상태를 표시할 수 있다. 이 방식을 통해 사용자는 전체 페이지가 로드되기를 기다릴 필요 없이, 즉시 상호 작용할 수 있다.

https://nextjs.org/blog/next-13#streaming

Vercel에 배포된 Next.js 13 애플리케이션은 app/ 디렉토리를 사용하며, 기본적으로 응답을 스트리밍하여 성능을 향상시킨다. 이 스트리밍은 Node.js 및 Edge 런타임에서 모두 적용된다.

Turbopack (Beta - Next.js 13.4 현재 기준)

최대 700배 빠른 Rust기반 Webpack 대체.

Vite보다 10배 빠르다.

https://nextjs.org/blog/next-13#introducing-turbopack-alpha

New next/image

native 브라우저의 느린 로딩으로 더욱 빨라짐.

Next.js 13 에서는 강력한 새로운 Image 컴포넌트를 도입하여 레이아웃 변동 없이 이미지를 쉽게 표시하고, 성능을 향상시키기 위해 파일을 요청에 따라 최적화할 수 있다.

import Image from 'next/image';
import avatar from './lee.png';

function Home() {
  // "alt" is now required for improved accessibility
  // optional: image files can be colocated inside the app/ directory
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

주요특징

클라이언트 측 JavaScript가 더 적게 포함되었다.
스타일링과 구성이 더 쉽다.
기본적으로 alt태그가 필요하여 접근성이 개선된다.
웹 플랫폼과 일치한다.
네이티브 레이지 로딩을 사용하기 때문에 성능이 빨라 수분화(hydration)가 필요하지 않다.

New @next/font

레이아웃 이동이 필요 없는 자동 자체 호스팅 폰트.

import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

Next.js 13에서는 다음과 같은 새로운 폰트 시스템을 도입했다.

사용자 정의 폰트를 포함한 폰트를 자동으로 최적화한다.
개인 정보 보호와 성능을 향상시키기 위해 외부 네트워크 요청을 제거한다.
폰트 파일에 대한 내장 자동 셀프 호스팅 기능을 제공한다.
CSS의 size-adjust 속성을 사용하여 자동으로 레이아웃 변동을 제거한다.

이런 새로운 폰트 시스템을 사용하면 성능과 개인 정보 보호를 고려하여 모든 Google Font를 편리하게 사용할 수 있다. CSS와 폰트 파일은 빌드 시간에 다운로드 되며, static assets과 함께 자체 호스팅 된다. 브라우저에서 Google로 요청이 전송되지 않는다.

Improved next/link

자동 <a>를 감싸는 단순화된 API

next/link는 더 이상 수동으로 <a>태그를 하위로 추가할 필요가 없다. Next.js 13에서 <Link>는 항상 <a>를 렌더링한다.

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>`
<Link href="/about">
  About
</Link>

🌸 출처 🌸

nextjs.org-Blog

nextjs.org-Using App Router Docs

저작자표시 비영리 동일조건

'React' 카테고리의 다른 글

[ React ] Suspense란 무엇일까? (0)	2023.07.16
[ Next.js ] Next13에서 커스텀 Font 세팅하기. (App Router 기준) (0)	2023.06.20
[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand (0)	2023.05.21
[ React ] React Props 알아보기. (0)	2023.03.20
[ webpack ] React(리액트)와 webpack(웹팩) (0)	2023.03.05

🧚🏻 D_Dual Dev Blog🧚🏻

[ Next.js ] Next13의 주요 기능에 대해 알아보자.

앱 라우팅 (App Directory) - Next.13.4(현재)기준 Stable

1. Layouts

2. React Server Components

3. Streaming

Turbopack (Beta - Next.js 13.4 현재 기준)

New next/image

New @next/font

Improved next/link

'React' 카테고리의 다른 글

티스토리툴바

[ Next.js ] Next13의 주요 기능에 대해 알아보자.

앱 라우팅 (App Directory) - Next.13.4(현재)기준 Stable

1. Layouts

2. React Server Components

3. Streaming

Turbopack (Beta - Next.js 13.4 현재 기준)

New next/image

New @next/font

Improved next/link

'React' 카테고리의 다른 글

'React' Related Articles

티스토리툴바