Next.js でのサーバーアクションとステートレスセッション管理の詳細な説明

はじめに

広く普及している App Router のリリースに伴い、Next.js は重要な新機能であるサーバーアクションを導入しました。サーバーアクションは、サーバーサイドのデータ操作を支援するように設計されています。クライアントサイドの JavaScript への依存を減らすことで、フォームの機能を徐々に強化します。この機能により、開発者は従来の REST API に頼ることなく、JavaScript と React を使用して強力な Web アプリケーションを作成できます。

この記事では、サーバーアクションの利点を詳しく掘り下げ、Cookie に基づくステートレスセッションを実装することで、その実用的な応用を実証します。同時に、この記事はステップバイステップのガイドとして、App Router を使用したデモンストレーションプロジェクトの構築プロセス全体を詳細に紹介します。

REST API の排除

従来の開発モデルでは、バックエンドでデータベースをクエリする Next.js Web アプリケーションを作成する場合、通常、ID ステータスを検証し、データベースをクエリするために REST API を作成する必要があります。フロントエンドの React アプリケーションは、これらの API を呼び出す役割を担います。ただし、React アプリケーションが唯一のクライアントであり、API を公開する必要がない場合、これらの API はアプリケーション自体によってのみ呼び出されるため、REST API を使用すると冗長になる可能性があります。

サーバーアクションを使用すると、React コンポーネントはサーバーサイドのコードを直接実行できます。開発者は API エンドポイントを手動で作成する必要はなく、Next.js はバックグラウンドでサーバーアクションに対応するエンドポイントを自動的に作成します。サーバーアクションが呼び出されると、Next.js は操作メタデータを含む POST リクエストを現在のページに送信して、対応する操作を実行します。

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

ステートレスアプリケーションを作成するための推奨フレームワークである Next.js は、多くの場合、サーバーレス環境で実行されます。つまり、セッションデータのインメモリストレージは不可能です。従来のセッション管理は通常、Redis やデータベースなどの外部ストレージサービスに依存しています。

ただし、セッションデータの量が少ない場合、別の解決策は、安全な暗号化メソッドとクライアント側に保存された Cookie を介してステートレスセッションを設計することです。このアプローチでは、外部ストレージは不要で、セッションデータが分散化され、サーバーの負荷を軽減し、アプリケーション全体のパフォーマンスを向上させる上で大きな利点があります。したがって、私たちの目標は、クライアント側のストレージ機能を最大限に活用し、厳格な暗号化対策を通じてデータのセキュリティを確保する、軽量で効率的なステートレスセッションシステムを構築することです。

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

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

npx create-next-app@latest

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

セッションライブラリの構築

サーバーアクションを理解しやすくするために、最初に簡略化されたセッションシステムを作成します。このバージョンでは、JSON を使用してセッションデータを Cookie に保存します。

session/index.ts ファイルを作成し、次のコードを追加します。

"use server";

import { cookies } from 'next/headers';

export type Session = {
  username: string;
};

export const getSession = async (): Promise<Session | null> => {
  const cookieStore = cookies();
  const session = cookieStore.get('session');

  if (session?.value) {
    return JSON.parse(session.value) as Session;
  }

  return null;
};

export const setSession = async (session: Session) => {
  const cookieStore = cookies();
  cookieStore.set('session', JSON.stringify(session));
};

export const removeSession = async () => {
  const cookieStore = cookies();
  cookieStore.delete('session');
};

コードの最初の行 `