Next.js 14までの進化を振り返る──App Routerを強化する新機能を解説！

Next.jsがApp Routerの"次"に目指すもの 第1回

　Next.js 14では、Next.js 13で導入されたApp Routerを更に強化するための新機能が追加されました。本記事では、大きなトピックであるPartial PrerenderingとServer Actionsを中心に解説します。

対象読者

• 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を記述する例です。

［リスト1］コンポーネント内に記述する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を外部ファイルに記述してインポートする例です。

［リスト2］外部ファイルに記述するServer Actionの例

// app/server-actions/update.js
"use server" // (1)

// (2)
export async function update() {
  // Web APIの呼び出しやデータベースへのアクセスなどを行う
}

　ファイルの最上部で（1）のようにuse serverディレクティブを指定することで、（2）の関数にはディレクティブ指定が不要になっています。これは、ページからリスト3のようにインポートして利用します。

［リスト3］Server Actionをインポートして利用する例

// 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の記事で詳しく解説しているので、そちらを参照してください。