Next.js の Server Actions を使用したステートレスセッションの実装

はじめに#

多くの注目を集めた App Router のリリースに続き、Next.js は新たな機能である Server Actions を導入しました。この新しいイノベーションは、サーバー側でのデータ操作を容易にし、クライアントサイド JavaScript への依存を軽減し、フォームを徐々に強化することで、従来の REST API を必要としない堅牢な Web アプリケーションを JavaScript と React を使用して作成することを可能にします。

この記事では、このイノベーションが提供する豊富な利点に触れ、その実際の使用例として Next.js にクッキーに基づいたステートレスセッションを実装します。このガイドは、デモプロジェクトを App Router を使用して構築するすべての段階を順を追って説明するステップバイステップのガイドです。

当実践デモは Edge Runtime を使用して Vercel に簡単にデプロイできます。また、GitHub から完全なソースコードをダウンロードすることができます。

REST API からの脱出#

従来、バックエンドでデータベースをクエリする Next.js Web アプリを作成したい場合、認証状態を検証しデータベースをクエリするためにいくつかの REST API を作成し、フロントエンドの React アプリがこれらの API を呼び出すことになります。しかし、公開 API を作成する必要がなく、この React アプリが唯一のクライアントである場合、それらが自分自身によってのみ呼び出されるのであれば、REST API を使用するのは冗長に思えます。

Server Actions を使用すると、React コンポーネントがサーバー側のコードを実行できるようになります。手動で API エンドポイントを作成する必要はなく、Server Actions は Next.js が背後で使用するエンドポイントを自動的に作成します。Server Action を呼び出すと、Next.js はどのアクションを実行するかのメタデータとともに、現在いるページに POST リクエストを送信します。

ステートレスセッションの必要性#

ステートレスアプリケーションを作成するための好ましいフレームワークとして、Next.js はよくサーバーレスを意味し、その中でセッションデータを保存するためのメモリーを使用できません。伝統的なセッションは、Redis やデータベースなどの外部ストレージサービスを使用する必要があります。

しかし、セッションデータが十分に小さければ、別の方法を選ぶことができます。安全な暗号化方法とクライアントサイドに保存されたクッキーを使用してステートレスセッションを設計します。この方法では外部ストレージを必要とせず、セッションデータを分散化し、サーバーの負荷と全体的なアプリケーションパフォーマンスに関して非トリビアルな利点を提供します。

したがって、目標はクライアントサイドストレージの能力を活用しつつ、適切に実行された暗号化を使ってセキュリティを確保する、軽量で効率的なステートレスセッションの構築です。

基本的なセッションの実装#

まず、新しいプロジェクトを開始する必要があります：

インストールの詳細については、公式ガイド を参照してください。

セッションライブラリの作成#

Server Actions を理解しやすくするために、まず簡略化されたセッションのバージョンを作成します。このバージョンでは、クッキーにセッションデータを保存するために JSON を使用します。

session/index.ts というファイルを作成し、以下のコードを含めます：

最初の行 "use server" はこのファイルの関数を Server Actions としてマークしています。

request と response に直接アクセスできないため、next/headers を使用してクッキーを読み書きします。これは Server Actions でのみ使用可能です。

さらに2つの Server Actions#

セッションライブラリが整ったら、サインインとサインアウト機能を実装して、セッションの使いやすさを示します。

以下のコードを user/index.ts に組み込みます：

ここでは、単にユーザー名が必要な「仮の」サインインプロセスを使用しています。

ページの構築#

App Router では、ページは通常非同期コンポーネントであり、Server Actions はそのようなコンポーネントから直接呼び出すことはできません。"use client" を使ってコンポーネントを作成する必要があります：

components/sign-in.tsx

components/sign-out.tsx

最後に app/page.tsx を構築します

暗号化の実装#

Server Actions の仕事は完了しました。最後の部分は、crypto を使って実現できる暗号化の実装です。

次に、セッションライブラリを修正して以下を実装します：

結論#

おめでとうございます！Next.js のためにステートレスセッションを実装することに成功しました。Vercel でのオンライン プレビュー はこちらから確認でき、完全なソースコードはこちら からダウンロードすることができます。このガイドが新しい Server Actions の理解に役立つことを願っています。

次に、Server Actions を使用して Logto を Next.js に統合する方法を探ります。お楽しみに！