こんにちは。プログラミングスクールHappiness Chainでメンターをしているryoです。
2023年10月27日（金）午前2時から開催されたNext.jsカンファレンスにてNext.js14の発表がありましたので、今回のアップデート内容を記載していきたいと思います。
以下公式のリリースノートになります。
Turbopack使用時の信頼性向上（Turbopackの5000の統合テストがパス）
Next.js13にて発表されたTurbopack（Next.js向けに開発された試験的なもの）ですが、最初にNext.jsの全機能にサポートするようになりました。
100%のテストが合格したら安定版に移行するとのことです。
Turbopack未使用でも起動・リフレッシュが早いと思っていましたが、大規模になるほどその恩恵は大きくなるみたいです。
以下はNext.jsで開発されたvercel.comでのベンチマークですが、
- ローカルサーバーの起動が53.3%高速化
- コード更新によるリフレッシュが94.7%高速化
上記を見ると、現状からnext dev --turoを使わない手はないかなと思いました。
Server Actionsを安定版としてリリース
Next.js9より導入されたAPI Routesにて、バックエンドを構築することができるようになりましたが、そちらをより簡素化することと、クライアント依存でのパフォーマンス低下の際のUX向上を目的として、リリースされました。
App Routeを作成せず、コンポーネントにて関数を呼び出すだけで済むため、かなり簡素化されるなと思いました。
また、データ変更、再レンダリング、リダイレクトが1回の通信にて済むので、UX的にもいいかなと思いました。
こちら詳細を別途記事に書きたいと思います。
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（試験的）
動的コンテンツの初期読み込みの高速化のためで、React Suspenseをサポート(?)しました。
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>
);
}
Partial Prerenderingを有効にすると、以下のHTMLが即座に構築されます。
<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>
※こちらは試験的な機能で、現在開発中になりますので、アップデートされ次第、こちらに記載できればと思います。
メタデータの改善
メタデータをブロッキングメタデータとノンブロッキングメタデータに分離して、ノンブロッキングメタデータによって、UXを損なわないようにされました（初期レンダリング時に一部メタデータが送信されるようになった）。
Next.js14から、メタデータのviewport、colorScheme、themeColorのオプションがgenerateViewportを使う形になりました。
Next.js学習コースのリリース
Next.jsの一通りの知見がハンズオン形式で学べます。
コース内容を見た感じ、かなりクオリティが高いなと思いましたので、おすすめです。