Next.js 14

Next.js 14

Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more.

https://nextjs.org/blog/next-14#partial-prerendering-preview

Next.js 14

• Turbopack: App & Pages Router에 대한 5,000개의 테스트 통과
• 53% 더 빠른 로컬 서버 시작
• 빠른 새로 고침으로 94% 더 빠른 코드 업데이트

• 서버 작업(안정): 점진적으로 향상된 mutation
• 통합된 캐싱 및 재검증
• 간단한 함수 호출 또는 기본적으로 form에서 작동

• 부분 pre-rendering: 빠른 초기 정적 응답 + 스트리밍 동적 콘텐츠

• Next.js 학습(신규): 앱 라우터, 인증, 데이터베이스 등을 가르치는 무료 과정입니다.

npx create-next-app@latest

Next.js 컴파일러: Turbocharged

• 53.3% 더 빠른 로컬 서버 시작

• 빠른 새로 고침으로 94.7% 더 빠른 코드 업데이트

Forms and Mutations

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

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

서버 작업(안정적)

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

캐싱, 재검증(Revalidating), 리다이렉션 등

• revalidatePath() 또는 revalidateTag()를 사용하여 캐시된 데이터의 유효성을 다시 검사합니다.

• redirect()를 통해 다른 경로로 리다이렉션

• cookie()를 통해 쿠키 설정 및 읽기

• useOptimistic()을 사용하여 낙관적 UI 업데이트 처리

• useFormState()를 사용하여 서버에서 오류를 포착하고 표시합니다.

• useFormStatus()를 사용하여 클라이언트에 로딩 상태 표시

부분적 Pre-rendering

Motivation

React Suspense를 기반으로 구축

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

<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>

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

Coming soon

메타데이터 개선

• viewport: 뷰포트의 초기 확대/축소 및 기타 속성을 설정합니다.

• colorScheme: 뷰포트의 지원 모드(밝음/어두움)를 설정합니다.

• themeColor: 뷰포트 주변의 크롬이 렌더링해야 하는 색상을 설정합니다.

Next.js Learn Course

• The Next.js App Router

• Styling and Tailwind CSS

• Optimizing Fonts and Images

• Creating Layouts and Pages

• Navigating Between Pages

• Setting Up Your Postgres Database

• Fetching Data with Server Components

• Static and Dynamic Rendering

• Streaming

• Partial Prerendering (Optional)

• Adding Search and Pagination

• Mutating Data

• Handling Errors

• Improving Accessibility

• Adding Authentication

• Adding Metadata

Other Changes

• [Breaking] 이제 최소 Node.js 버전은 18.17입니다.

• [Breaking] next-swc 빌드를 위한 WASM 대상을 제거합니다.

• [Breaking] next/font를 위해 @next/font에 대한 지원이 중단되었습니다.

• [Breaking] ImageResponse 가져오기를 next/server에서 next/og로 변경했습니다.

• [Breaking] next export 명령은 더 이상 사용되지 않습니다: output: 'export’

• [Deprecation] onLoad를 위해 next/image에 대한 onLoadingComplete가 지원 중단되었습니다.

• [Deprecation] next/image에 대한 도메인은 remotePatterns을 위해 더 이상 사용되지 않습니다.

• [Feature] fetch 캐싱에 대해 더 자세한 logging을 활성화할 수 있습니다.

• [Improvement] 기본 create-next-app 애플리케이션의 크기가 80% 더 작아졌습니다.

• [Improvement] 개발 시 Edge 런타임을 사용할 때 향상된 메모리 관리

느낀점