[Next.js] 14 변경사항

1. Next.js 컴파일러: 성능 향상

• Next.js 13부터 페이지와 앱 라우터 모두에서 로컬 개발 성능을 개선하기 위해 노력해 왔다.

• 이전 버전에서는 성능 향상을 위하여 next dev 와 Next.js 의 다른 파트를 재정비 하였다.

• 이번 버전에서는 Next.js의 모든 기능 성능 향상에 대해 초점을 맞추었고, 그것은 Rust 기반 컴파일러 안정화로 이어질 것이다.

• Rust 엔진 Turbo pack 의 next dev 검증을 위한 5000개의 통합 테스트는 현재 통과 중에 있으며, 이 테스트에는 7년간의 버그 수정과 재현이 포함되어 있다.

2. Forms and Mutations

• Next.js 9에서는 프론트엔드 코드와 함께 백엔드 엔드포인트를 빠르게 빌드하는 방법인 API Router가 도입되었다.

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

• 클라이언트 측에서 React와 onSubmit 과 같은 이벤트 핸들러를 사용하여 API Route로 fetch 를 만들 수 있다. pages/index.tsx

  import { FormEvent } from 'react';
  

export default function Page() {
async function onSubmit(event: FormEvent) {
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 14버전애서는 data mutations(서버 데이터 수정) 작성을 간소화가 가능하다.
- 또한 저성능 디바이스와 느린 네트워크에서 발생되는 문제를 개선할 수 있다.

app/page.tsx
```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>
  );
}

• Partial Prerendering이 활성화되면, 이 페이지는 경계를 기반으로 정적인 셸(shell)을 생성한다.
• React Suspense의 fallback은 사전 렌더링(prerendered)된다.

app/cart.tsx

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

• 가장 세분화된 정적 셸을 사용하려면 Suspense 경계를 추가해야 할 수 있다.
  그러나 현재 이미 loading.js를 사용하고 있는 경우 이는 암묵적인 Suspense 경계이므로 정적 셸을 생성하 는 데 추가 변경이 필요하지 않다.