Closed4

Next.js 14まとめ

Next.js
プリンプリン

Server Action の安定版

API Routeを実装せずに、サーバーサイドの処理(非同期ハンドラ)を直接 form要素の actionに渡すことができるようになった。
非同期ハンドラは別のファイルに書くこともできる。

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

個人的に嬉しいしいのが、非同期ハンドラ内で revalidatePath() や revalidateTag() を呼び出すことで画面を更新できること。

'use server'
 
import { revalidatePath } from 'next/cache'
 
export default async function submit() {
  await submitForm()
  revalidatePath('/')
}
プリンプリン

Turbopack(開発モード)の高速化

  • ローカルの起動が53%高速化
  • コード変更時のreact refreshが94%高速化
このスクラップは2023/12/17にクローズされました