Next.js 13.4 - ohiruneuni/blog

Next.js 13.4 がリリースされた。

#Stable App Router

App Router が安定版になり、公式ドキュメントもデフォルトは App Router になった。Using App Router から切り替えられる。

App Router に抵抗感を持っていたり、RSC も含めて PHP の再来と呼んで嘲笑している方々もいるが、普通に便利なので使っていこう。個人的には App Router（RSC）に触れて理解を進めていけば、必然的に良いコードが書けるようになると思うので、その点でもぜひ使ってほしい。

https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

#Server Actions (alpha)

フォームの状態について React は最近意見を持っているらしく、例えば（元々どちらかといえば制御コンポーネントを推奨していた気がするが）現在は非制御コンポーネントを推奨していたり、ミューテーションに対するファーストパーティソリューションの開発に取り組んでいるとのこと。

Server Actions は、中間層を作ることなく直接サーバーの関数を呼び出して、サーバーのデータ更新を可能になる実験的な機能である。次のように記述する。

tsx

import db from "./db";
import { redirect } from "next/navigation";

async function create(formData: FormData) {
  "use server";
  const post = await db.post.insert({
    title: formData.get("title"),
    content: formData.get("content"),
  });
  redirect(`/blog/${post.slug}`);
}

export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  );
}

#参考文献

Next.js 13.4