설치

npm i next@latest
# or
yarn upgrade next --latest
# or
pnpm up next --latest

요약

• 지원하는 브라우저에서 Internet Explorer를 삭제하고, 최신 브라우저를 지원하는걸로 변경되었습니다.

  • Chrome 64+
  • Edge 79+
  • Firefox 67+
  • Opera 51+
  • Safari 12+

• 최소 Node 버전이 12.22.0 → 18.17.x 으로 변경되었습니다.

• Turbopack App & Pages Router에 대한 5,000개의 테스트 통과

  • 53% 더 빠른 로컬 서버 시작
  • 빠른 새로 고침으로 94% 더 빠른 코드 업데이트

• Forms and Mutations

  • 프런트엔드 코드와 함께 백엔드 엔드포인트를 빠르게 구축하는 방법인 API 경로가 도입(NextJS 9 도입된 기능)

  // app/api/submit.js
  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 });
  }
  
  // client
  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>
    );
  }

• Server Actions (Stable)

  • 리액트의 Canary 버전에 서버 액션을 포함한 최신 React로 업그레이드되었습니다.
  • 데이터 변경, 페이지 다시 렌더링 또는 리디렉션 등의 성능에 저하가 되는 액션에 대해서 클라이언트 사용자에게 해당 상태에 맞는 화면을 보여줄 수 있습니다.
  • Caching, Revalidating, Redirecting, and more
    • 서버 액션 작업이 app 라우트와 통합됨에 따라서 아래 API 사용이 가능합니다.
    • Revalidate cached data with revalidatePath() or revalidateTag()
    • Redirect to different routes through redirect()
    • Set and read cookies through cookies()
    • Handle optimistic UI updates with useOptimistic()
    • Catch and display errors from the server with useFormState()
    • Display loading states on the client with useFormStatus()

• Metadata Improvements 유저 경험에 영향을 주는 viewport, colorScheme, themeColor 정보는 기존 Metadata 타입과 분리되어 별도로 정의해야 합니다. viewport 데이터를 페이지 콘텐츠와 함께 전송한다면, 테마 색상을 변경하거나 뷰포트 변경으로 레이아웃이 이동하거나 깜박임을 방지할 수 있습니다.

  • viewport : 뷰포트의 초기 확대/축소 및 기타 속성을 설정합니다.
  • colorScheme : 뷰포트의 지원 모드(밝음/어두움)를 설정합니다.
  • themeColor : 뷰포트 주변의 크롬이 렌더링할 색상을 설정합니다. 기존 meta에 정의되었던 속성들은 viewport and generateViewport 를 사용하여서 추가가 가능합니다. (정적 필드 사용: viewport, 런타임 동적 필드 사용: generateViewport)

  // v13
  export const metadata: Metadata = {
    viewport: {
      width: 'device-width',
      initialScale: 1,
      maximumScale: 1,
    },
  };
  
  // v14
  //// The viewport object
  import { Viewport } from 'next';
  
  //// viewport(정적 뷰포트 생성)
  export const viewport: Viewport = {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
    // Also supported by less commonly used
    // interactiveWidget: 'resizes-visual',
  };
  
  export default function Page() {}
  
  //// generateViewport(동적 뷰포트 생성)
  type Props = {
    params: { id: string };
    searchParams: { [key: string]: string | string[] | undefined };
  };
  
  export function generateViewport({ params, searchParams }: Props): Viewport {
    return {
      themeColor: 'black',
    };
  }
  
  export default function Page({ params, searchParams }: Props) {}
  
  //// output
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1"
  />;

참고페이지

• Next.js 14