対象読者
- Next.jsの近年の改善点について知りたい方
前提環境
筆者の検証環境は以下の通りです。
- macOS Sequoia 15.1
- Node.js 23.2.0
- npm 10.9.0
- Next.js 15.0.4-canary.13
Next.js 15リリース以前の変更を振り返る
2024年10月21日にNext.js 15がリリースされました。Next.js 13.4の新機能を紹介した連載「Next.jsの新しい概念を学ぶ」の後もNext.jsは進化を続け、App Routerの機能が更に強化されています。
本連載では、バージョン15でNext.jsがどういった使い勝手になったのか、これからどうなっていくのかを解説します。まず今回は、前述の連載の続きとして、Next.js 14までに登場した機能を振り返っていきます。サンプルコードにはNext.js 15を利用するので、14と15でAPIが変わっている場合は、15でのAPIを採用します。
Next.js 14の大きな目玉は、Next.js 13.4でアルファ版として提供されていたServer Actionsの安定版のリリースと、新たにプレビュー版として追加されたPartial Prerenderingでした。いずれも、App Routerの機能を強化する強力な仕組みです。それぞれ見ていきましょう。
Server Actions
Server ActionsはNext.js 13.4の記事で取り上げたときとAPIはほとんど変わっておらず、Next.js 15でもそのまま利用できます。そのため、本記事では簡単に考え方を解説するのみにとどめます。Server Actionsの基本的な使い方は次の通りです。
- サーバーサイドでデータを作成・更新するための関数（Server Action）を定義する
-
その関数を
form要素のaction属性に指定する - フォームの送信操作により、サーバーサイドの関数が実行される
Server Actionを定義する方法は2種類あり、Server Components内に直接記述する方法と、外部ファイルに記述してインポートする方法があります。リスト1は、Server Components内にServer Actionを記述する例です。
// app/server-actions/page.js
export default function Page() {
// (1) Server Action
async function create() {
'use server'
// Web APIの呼び出しやデータベースへのアクセスなどを行う
}
return (
<form action={create}>{/* (2) */}
<button type="submit">Create</button>
</form>
)
}
（1）はServer Actionである関数の定義です。関数内でuse serverディレクティブを記述することで、この関数がサーバーサイドで実行されることを示します。（2）は、このServer Actionを実行するためのフォームです。フォームのaction属性にServer Actionを指定することで、フォームの送信操作を行った際にServer Actionがサーバーサイドで実行されます。
use serverディレクティブをファイル単位で指定して、そのファイル内の関数をServer Actionとして利用することもできます。この場合、関数内でuse serverディレクティブを指定する必要はありません。リスト2は、Server Actionを外部ファイルに記述してインポートする例です。
// app/server-actions/update.js
"use server" // (1)
// (2)
export async function update() {
// Web APIの呼び出しやデータベースへのアクセスなどを行う
}
ファイルの最上部で（1）のようにuse serverディレクティブを指定することで、（2）の関数にはディレクティブ指定が不要になっています。これは、ページからリスト3のようにインポートして利用します。
// app/server-actions/page.js
import { update } from "./update" // (1)
export default function Page() {
return (
<form action={update}>{/* (2) */}
<button type="submit">Update</button>
</form>
)
}
（1）でServer Actionをインポートし、（2）でフォームのaction属性に指定しています。このように、Server Actionを外部ファイルに記述してインポートすることで、コードの再利用性を高めることができます。
細かい使い方については、Next.js 13.4の記事で詳しく解説しているので、そちらを参照してください。
