Next.js 13

Dec 30 2022

인기 있는 React 프레임워크 Next.js의 배후에 있는 회사인 Vercel은 2022년 10월 25일에 프레임워크의 최신 버전을 출시했습니다.

https://nextjs.org/

인기 있는 React 프레임워크 Next.js의 배후에 있는 회사인 Vercel은 2022년 10월 25일에 프레임워크의 최신 버전을 출시했습니다. 이 새 버전인 Next.js 13에는 레이아웃, 데이터 가져오기 및 라우팅과 같은 기능에 대한 업데이트 및 개선 사항이 포함되어 있습니다. , 뿐만 아니라 더 빠른 번 들러. 이러한 변경 사항은 개발자가 React를 사용하여 빠르고 확장 가능하며 안정적인 웹 애플리케이션을 더 쉽게 만들 수 있도록 하기 위한 것입니다.

Next.js 13의 새로운 기능 중 하나는 경로 세그먼트의 도입으로, 이를 통해 개발자는 앱 디렉토리 내의 폴더 내에 페이지를 배치하여 중첩된 경로를 만들 수 있습니다. 이러한 폴더 내에서 경로를 만들 때 개발자는 index.jsx 대신 page.jsx를 사용할 수 있습니다.

이전 버전의 Next.js에서는 개발자가 여러 페이지 간에 UI를 공유하기 위해 레이아웃 폴더를 만들어야 했습니다. 그러나 Next.js 13 릴리스에서는 새 프로젝트를 만들 때 레이아웃이 기본적으로 포함되므로 더 이상 필요하지 않습니다. Next.js 13의 레이아웃은 대화형이며 다시 렌더링할 필요가 없으므로 개발자가 더 쉽게 작업할 수 있습니다.

기본 레이아웃을 포함하는 것 외에도 Next.js 13은 데이터 가져오기를 위한 API를 단순화합니다. 이전 API getServerSideProps , getStaticProps 및 getInitialProps 는 더 이상 지원되지 않으며 사용하기 쉽게 설계된 새 API로 대체되었습니다.

'getServerSideProps'와 유사

getServerSideProps.를 사용하여 요청을 보낼 때 'no-store'를 캐시해야 합니다.

fetch(URL, { cache: 'no-store' });

getServerSideProps를 사용하여 전송 요청을 할 때 'force-cache'를 캐시해야 합니다.

fetch(URL, { cache: 'force-cache' });

초의 수명으로 캐시된 경우

fetch(URL, { next: { revalidate: 30 } });

Turbopack은 Webpack, Vite에 비해 더 빠른 번들러입니다. 또한 Turbopack은 영리한 캐싱 기술을 사용하여 최적화된 방식으로 소스 변경 처리를 개선합니다. Turbopack은 이미 구축된 변경 사항의 모델을 보유하고 있으며 진행 중인 변경 사항을 기반으로만 구축합니다. ' next dev — — turbo' 를 실행하면 Turbopack을 사용해 볼 수 있습니다 .

터보팩 결과:

Webpack보다 700배 빠른 업데이트

Vite보다 10배 빠른 업데이트

Webpack보다 4배 빠른 콜드 스타트

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

'사용 클라이언트'

구성 요소는 자동으로 서버 구성 요소로 렌더링될 수 있으며 'useState' 및 'useEffect' 클라이언트 후크를 사용하려면 파일 시작 부분에 'use client'를 작성해야 합니다.

'use client';

import { useState } from 'react';

export default function Navbar() {
  const [title, setTitle] = useState('React');

  return (
    <div>
      <p>{title}</p>
    </div>
  );
}

이전 버전의 Next.js에서는 링크를 제대로 렌더링하려면 <a>가 <Link> 내에 중첩되어야 했습니다. 그러나 Next.js 13이 출시되면서 <Link>는 이제 기본적으로 항상 <a>를 렌더링합니다.

import Link from 'next/link'

// Next.js 12: 
<Link href="/checkout">
  <a>About</a>
</Link>

// Next.js 13
<Link href="/checkout">
  About
</Link>

이전 버전의 Next.js에서는 오류를 방지하기 위해 이미지에 'alt' 속성을 지정해야 했습니다. 그러나 Next.js 13 릴리스에서는 더 이상 'alt' 속성이 필요하지 않습니다.

import Image from 'next/image';
import logo from './logo.png';

function Navbar() {
  return <Image alt="logo" src={logo} />;
}

Next.js 13의 새로운 글꼴 시스템에 따르면 사용자 지정 글꼴을 최적화할 수 있으며 브라우저의 요청 없이 Google 글꼴을 사용할 수도 있습니다. @next/font 패키지를 설치하기만 하면 됩니다. 다음과 같이 사용할 수 있습니다.