日本語

nextjs
app-router
server-actions
edge

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

Next.js の新機能である Server Actions を使用して、クッキーに基づいたステートレスセッションを実装し、Server Actions の利点を体験する。

Sijie

Developer

8/21/2023

ユーザー認証に何週間も費やすのはもうやめましょう

Logto でより速く安全なアプリをリリース。数分で認証を統合し、コア製品に集中できます。

始めましょう

はじめに

多くの注目を集めた 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 に統合する方法を探ります。お楽しみに！

Logto に興味がありますか？今日から Logto を試してみましょう。

はじめに#

REST API からの脱出#

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

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

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

さらに2つの Server Actions#

ページの構築#

暗号化の実装#

結論#

はじめに#

REST API からの脱出#

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

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

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

さらに2つの Server Actions#

ページの構築#

暗号化の実装#

結論#

はじめに

REST API からの脱出

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

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

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

さらに2つの Server Actions

ページの構築

暗号化の実装

結論

はじめに

REST API からの脱出

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

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

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

さらに2つの Server Actions

ページの構築

暗号化の実装

結論