Next.js 14버전 정리

Next.js 13 버전 이후로 호불호가 늘어나는 느낌이 강한 Next.js의 14 버전이 출시되었습니다.

14 버전은 13 버전 때처럼 엄청난 변화내용이라기보다는 13.5 버전의 뒤이은 13.6 버전에 가깝다는 느낌이 드는 업데이트였습니다.

1. Next.js 컴파일러: Turbocharged

이제부터 Next.js는 개발 환경에서 빠른 성능을 제공하기 위해 Rust 기반 컴파일러 'Turbopack'를 사용합니다. 이로 인해 개발 서버의 시작 속도가 최대 53.3% 향상되고 Fast Refresh를 통한 코드 업데이트 속도도 최대 94.7% 향상되었습니다. 이는 특히 큰 애플리케이션 및 모듈 그래프에서 빠른 성능 향상을 의미하며, 'next dev --turbo'를 사용하면 보다 빠르고 안정적인 성능을 기대할 수 있습니다.

추가적으로 테스트 커버리지가 100%를 달성하면 상용으로 변경된다고 합니다.

2. Server Actions (Stable)

Next.js 14에서는 데이터 변이 작성 및 느린 네트워크 연결 또는 저전력 장치에서 양식 제출 시 개발자 및 사용자 경험을 단순화하려고 합니다. API Routes는 이제 'Server Actions'로 안정화되었으며, 개발자는 API 라우트를 수동으로 만들 필요가 없습니다. 대신 서버에서 안전하게 실행되는 함수를 직접 React 컴포넌트에서 호출할 수 있습니다. 이를 통해 데이터 변이, 페이지 다시 렌더링 및 리디렉션을 하나의 네트워크 라운드트립 내에서 처리할 수 있어 빠른 응답과 안정적인 데이터 표시가 가능합니다.

 

API 경로를 수동으로 생성할 필요가 없다면 어떨까요? 대신에 React 컴포넌트에서 직접 호출할 수 있는 안전하게 서버에서 실행되는 함수를 정의할 수 있다면 좋을 것입니다.

App Router는 안정적인 기능을 채용하는 프레임워크에 안성맞춤입니다. Next.js는 v14부터 최신 React canary로 업그레이드되어 안정적인 Server Actions을 제공합니다.

// 이전
// /pages/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 });
}

// /pages/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>
  );
}

// Next.js v14
// /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">제출</button>
    </form>
  );
}

서버 액션은 과거에 서버 중심의 프레임워크를 사용한 개발자들에게 익숙한 느낌일 것입니다. 이는 폼과 FormData Web API와 같은 웹 기본 기술을 기반으로 하고 있습니다.

서버 액션을 폼을 통해 사용하는 것은 점진적인 개선을 위해 유용하지만 필수는 아닙니다. TypeScript를 사용할 때 이를 직접 함수로 호출할 수도 있으며, 이렇게 하면 클라이언트와 서버 간에 완전한 종단 간 형 안전성을 제공받을 수 있습니다.

데이터 변이, 페이지 재렌더링 또는 리디렉션은 하나의 네트워크 라운드트립에서 발생할 수 있으며, 상위 공급자가 느리더라도 올바른 데이터가 클라이언트에 표시됨을 보장합니다. 더 나아가 여러 가지 액션을 조합하고 재사용할 수 있으며, 동일한 라우트 내에서 여러 가지 액션을 함께 사용할 수 있습니다.

4. Caching, Revalidating, Redirecting, and more

Server Actions는 App Router 모델에 깊이 통합되어 캐시 데이터 재검증, 리디렉션, 쿠키 설정 및 읽기, 낙관적 UI 업데이트 및 오류 처리를 지원합니다. 이를 통해 클라이언트와 서버 간의 데이터 및 상호작용을 더 효과적으로 관리할 수 있습니다.

5. Partial Prerendering (미리 보기)

Next.js는 'Partial Prerendering'을 개발 중인데, 이는 동적 콘텐츠에 대한 빠른 초기 정적 응답을 위한 컴파일러 최적화입니다. 이러한 변경 사항은 복잡성 없이 성능 및 개인화를 제공하는 것을 목표로 하며, React Suspense에 기반하여 동작합니다. 이로써 개발자는 정적 셸을 생성하고 다이내믹 컴포넌트를 스트리밍으로 제공함으로써 빠른 초기 응답을 달성할 수 있습니다.

6. Metadata 개선 사항

Next.js 14에서는 메타데이터 처리가 개선되었습니다. 메타데이터 중 'viewport', 'colorScheme', 및 'themeColor'에 해당하는 일부 옵션은 블로킹 및 논블로킹으로 분리되어 페이지 테마 변경 또는 뷰포트 조정으로 인한 페이지 깜박임을 방지하는 것을 목표로 합니다.

 

더 자세한 사항은 Next.js 14 버전 소개 블로그에서 확인하시기 바랍니다.