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