Nextjs 14 공개

드디어 4달간에 프로젝트를 끝나고 여유가 생겼는데

프로젝트 진행하는 와중에 NextJs 컨퍼런스에서 Nextjs 14 가 발표가 되었네요

 

그러므로 오늘은 Nextjs 14에 변경되는 사항을 한번 정리해 보겠습니다

 

Nextjs 공식 블로그 글에 내용을 참고하였습니다

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

Next.js 14

 

 

우선 가장 크게 변경되는 점은 3가지입니다

• Turobpack
  • 최대 53% 더 빠른 로컬 서버 구동 속도
  • 빠른 새로 고침으로 최대 94% 더 빠른 코드 업데이트
• Server Action 안정화
  • 캐싱 및 재검증과 통합
  • 단순한 함수 호출이 가능하며 폼과 함께 네이티브로 작동
• 부분 사전 렌더링
  • 빠른 초기 정적 응답과 스트리밍 동적 콘텐츠

 

Nextjs 14는 아래 명령어로 시작할 수 있습니다

npx create-next-app@latest

 

 

Nextjs Complier : Turbochargeed

Nextjs 13에서는 페이지와 앱 라우터 모든 곳에서 Nextjs의 로컬 개발 성능을 개선하기 위해 노력해 왔습니다

 

이전에는 이러한 노력을 지원하기 위해 next dev 및 Nextjs의 다른 부분을 다시 작성하였습니다

이후 Nextjs는 접근 방식을 좀 더 점진적으로 변경하였고 모든 Nextjs 기능을 지원하는데 다시 집중했기 때문에 Rust 기반 컴파일러가 곧 안성성에 도달할 것임을 의미합니다

 

next dev는 Turbopack을 통해 5000개의 통합 테스트를 통과했으며, 기본적으로 Rust엔진을 사용합니다

이 테스트는 7년간의 버그 수정 및 재현이 포합니다

 

대표적으로 vercel.com 페이지로 테스트하였을 때 아래 결과를 확인하였습니다

• 최대 53.3% 빠른 로컬 서버 시작
• 빠른 새로고침으로 최대 94.7% 더 빠른 코드 업데이트

이러한 벤치마크는 대규모 어플리케이션에서 기대할 수 있는 성능 향상의 실제 결과이며

next dev를 위한 테스트의 90%가 통과되었으며, next dev --turbo를 사용할 때 더 빠르고 안정적인 성능을 지속적으로 확인할 수 있습니다

 

추후 테스트를 100% 통과하면 마이너 릴리스에서 Turbopack을 안정적으로 이동시킬 예정이며, Webpack 사용을 계속 지원할 예정입니다

 

Form and Mutation

Nextjs9 버전에서 프론트엔드 코드와 함께 백엔드 엔드포린트를 빠르게 구축할 수 있는 API 경로가 도입되었습니다

 

예를 들어 아래와 가이 api/ 디렉토리에 새 파일을 생성합니다

page/api/submit.ts

import type { NextApiRequest, NextApiResponse } from 'next';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const data = req.body;
  const id = await createItem(data);
  res.status(200).json({ id });
}

 

이후 클라이언트 측에서 React 및 onSubmit과 같은 이벤트 핸들러를 사용하여 API를 fetch 할 수 있습니다

page/index.tsx

import { FormEvent } from 'react';
 
export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });
 
    // Handle response if necessary
    const data = await response.json();
    // ...
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

 

이러한 부분을 Nextjs 14를 통해 데이터 mutation에 대한 개발자 경험을 더욱 단순화하고자 하며 또한 사용자가 네트워크 연결이 느리거나 저전력 장치에서 form을 제출할 때 사용자 경험을 개선하고자 합니다

 

Server Action

만약 API 경로를 수동으로 생성할 필요가 없다면 어떻게 될까요? 그 대신 React 구성 요소에서 직업 호출하여 서버에서 안전하게 실행되는 함수를 정의할 수 있습니다

 

앱 라우터는 새로운 기능을 채택하기에 안정적인 React Canary 채널에서 구축되어 있습니다

v14 버전의 Nextjs는 안정적인 서버 액션을 포함하는 최신 React Canary로 업그레이드 외었습니다

 

이전 라우터 예제는 하나의 페이지 파일 하나로 단순화할 수 있습니다

app/page.tsx

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

 

이전 서버 중싱 프레임워크를 사용해 본 적인 있는 개발자분들에게는 친숙하게 느껴질 것입니다

Form과 FormData Web API와 같은 웹 기본 사항을 기반으로 구축되었습니다

 

Form을 통해 서버 작업을 사용하는 것을 점진적인 향상에 도움이 되지만 필수항은 아닙니다 Form 없이 함수로 직접 호출할 수 있습니다

또한 TypeScript를 사용하면 클라이언트와 서버 간에 안전한 엔드투엔드 유형 안정성이 제공됩니다

 

데이터 변경, 리렌더링 또는 리디렉션은 한 번의 네트워크 왕복 작업으로 수행할 수 있으므로 네트워크 업 스트림 공급자의 속도가 느려도 올바른 데이터가 클라이언트에 표시되도록 보장할 수 있습니다 또한 동일한 경로의 다양한 작업을 포함하여 다양한 작업을 구성하고 재사용할 수 있습니다.

 

캐싱, 재검증, 리디렉션 등

Server Action은 전체 앱 라우터 모델에 깊이 통합되어 있으며 다음을 수행할 수 있습니다

• revalidatePath() 또는 revalidateTag()를 사용하여 캐시돈 데이터의 유효성을 다시 검사합니다
• redirect()를 통해 다른 경로로 리다이렉션 합니다
• cookie()를 통해 쿠키를 설정하고 읽습니다
• useOptimistic()을 사용하여 낙관 전인 UI 업데이트를 처리합니다
• useFormState()를 사용하여 서버에서 오류를 포착하고 표시합니다
• useFormState()를 사용하여 클라이언트에 로딩 상태를 표시합니다

 

부분 사전 렌더링(Preview)

빠른 초기 정적 응답을 갖춘 동적 콘텐츠에 대한 컴파일러 최적화(부분 사전렌더링)를 미리 공유하고 싶습니다

 

부분 사전 렌더링은 SSR, SSG, ISR에 대한 10년간의 연구 개발을 기반으로 구축되었습니다

부분 사전 렌더링을 학습하는 데는 새로운 API가 필요하지 않습니다

 

React Suspense를 기반으로 구축

부분 사전 렌더링은 Suspense 경계에 따라 정의되며 다음과 같은 작동방식을 가지고 있습니다

app/page.tsx

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

 

부분 사전 렌더링이 활성화게 되면 이 페이지는 <Suspense/> 경계를 기반으로 정적 shell를 생성합니다 fallback은 React Suspense의 내용이 사전 렌더링 되어있습니다

 

그런 다음 shell의 일시 중단 폴백은 쿠키를 읽어 카트를 결정하거나 사용자를 기반으로 배너를 표시하는 등의 동적 구성 요소로 대체됩니다

 

요청이 이루어지면 정적 HTML shell 이 즉시 제공됩니다

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

 

<ShoppingCart/> 사용자 세션을 확인하기 위해 Cookie를 읽고, 이 컴포넌트는 정적 shell과 동일한 HTTP 요청의 일부로 스트리밍 되며 추가적인 네트워크 왕복이 필요하지 않습니다

 

app/cart.tsx

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

 

가장 세부적인 정적 shell를 가지려면 Suspense 경계를 추가해야 될 수도 있습니다. 그러나 현재 이미 사용하고 있다면 loading.js는 암시적 Suspense 경계이므로 정적 shell 생성하는데 변경이 필요하지 않습니다

 

부분 사전 렌더링은 활발히 개발 중이며 다가오는 마이너 릴리스에서 더 많은 업데이트를 공유할 예정입니다

 

메타데이터 개선

페이지 콘텐츠를 서버에서 스트리밍 하기 전에 먼저 브라우저에 전송해야 하는 뷰포트, 색 구성표 및 테마에 대한 중요한 메타 데이터를 먼저 브라우저에 전송해야 합니다

 

이러한 meta 태그가 초기페이지 콘텐츠와 함께 전송되도록 하면 원활한 사용자 경험에 도움이 되며, 테마 색상을 변경하거나 뷰포트 변경으로 인해 레이아웃이 이동하여 페이지가 깜박이는 것을 방지할 수 있습니다

 

Nextjs 14에서는 차단 및 비차단 메타데이터를 분리했습니다. 메타데이터 옵션의 작은 하위 집합만 차단되며, 우리는 비차단 메타데이터가 부분적으로 사전 렌더링된 페이지가 정적 shell을 제공하는 것을 방해하지 않도록 하고 싶습니다

 

다음 메타데이터 옵션은 더 이상 사용되지 않으며 metdata 향후 주요 버전에서는 제거될 예정입니다

• viewport : 뷰포트의 초기 확대/축소 및 기타 속성을 설정합니다
• colorScheme: 뷰포트의 지원 모드(밝음/어두움)를 설정합니다.
• themeColor : 뷰포트 주변의 크롬이 렌더링해야 하는 색상을 설정합니다

nextjs14부터는 이러한 옵션을 대체하는 새로운 옵션인 viewport 및 generateViewport가 추가되었으며 다른 모든 metadata 옵션은 동일하게 유지됩니다

https://nextjs.org/docs/app/api-reference/functions/generate-viewport

Functions: generateViewport | Next.js

 

 

 

마치며

여기까지가 Nextjs14의 주요 변경사항입니다 Nextjs13에서 발생하는 버그 및 불편한 사항들을 많이 개선하는 것 같고

개발자 경험을 최대한 살리려고 노력하는 거 같습니다 Server Action 작업은 아직 글로만 봐서 정확히 이해는 안 되지만 Nextjs 개발 트렌드를 바꿀지는 지켜봐야 될 거 같습니다