Squadbase
Apr 30
Next.jsをSquadbaseにデプロイする
三橋 啓多
Co-founder, COO

Squadbaseでは、ReactベースのフルスタックWebアプリケーションフレームワークであるNext.jsをサポートしています。本記事では、Next.jsを使用してSquadbaseの機能を活用する方法を学びます。

Next.jsがAIアプリ開発に採択される理由

Next.jsは言わずと知れたReactのフルスタックフレームワークです。主にWebアプリのフロントエンドとバックエンドを一つのフレームワークで完結することができます。

Next.jsはサーバーサイドのNode.jsランタイムを使った開発をフレームワークの一部として実装することができるため、サーバーサイド実行されるべきLLM APIへのリクエストやエージェントアーキテクチャを用いたマルチステップワークフローから、それを表示するUIまでを一つのコードベースに統合することができます。この点がAIアプリ構築のためのフレームワークとして人気の理由です。

AI SDK by Vercel

この特徴をレバレッジするのがAI SDK by Vercelです。

AI SDK by Vercelは、AIアプリを開発するためのツールキットで、OpenAI・Anthropic・Googleなど複数のLLMプロバイダーのAPIとの接続を一つのインターフェースでハンドリングし、AIアプリのフロントエンドロジックで使うさまざまなパターンをReact hookとして提供しています。

特に、AIアプリ開発において扱いが非常に難しいストリーミング処理を、サーバーサイド向けにもクライアントサイド向けにも便利な機能を提供してくれています。

このようにAIアプリ構築向けに人気のNext.jsですが、同様にAIアプリ開発で人気のPythonフレームワークであるStreamlitと比べると、フロントエンドでのリッチなインタラクションに強みがあります。

なぜNext.jsとSquadbaseがベストフィットなのか

Next.jsのホスティング環境としては、Vercelがファーストチョイスとして名前が挙がります。Vercelは素晴らしい開発者体験と高パフォーマンスのインフラを提供するクラウドプラットフォームです。しかし、あらゆるユースケースでVercelが最善の選択肢ではありません。公開アクセスを禁止し特定のユーザーのみにアクセスを許したい場合、すなわち組織向けアプリの場合はそれに当たります。

ユーザー認証とアクセスコントロール

実際にNext.jsアプリを組織内で運用しようとなると、必ず認証やRBACの対応が必要になります。Next.jsで組織向けのユーザー認証を実装する方法はいくつかのパータンがありますが、多くの場合IDプロバイダーを構成し、Next.jsアプリに接続する必要があります。特に複数アプリを運用する必要があり、さまざまなパターンのロール管理を実現しようとすると、IDプロバイダーの構成は複雑化し、ユーザー管理のデータベースを構築することも避けられません。

Squadbaseを使えば、ユーザー認証をコードの追加なしに実現することができ、アプリごとのユーザーロール管理もダッシュボードから簡単に行うことができます。

運用支援機能

業務アプリの運用においては、アクセスログやランタイムログの収集とモニタリングや、ユーザーからのレポートラインの構築は不可欠です。Squadbaseでは、業務アプリを運用する際に必ず必要になるこれらの機能をプラットフォームとして提供しています。

このように、Vercelのようなモダンな開発者体験を維持しつつ、組織向けアプリに特化した機能を提供するプラットフォームがSquadbaseです。

Squadbaseの機能をNext.jsで使う

ユーザー認証

Squadbaseにデプロイされたアプリに、Squadbase上のチームメンバーがアクセスすると自動的にユーザー認証が行われます。アプリの公開設定がパブリックでない場合、この認証を通過したユーザーのみがアプリにアクセスできます。また、アプリへのアクセスを持つユーザーには、「プロジェクトロール」という設定値を与えることができます。

Next.jsのコードからも、プロジェクトロールを含むユーザー情報にアクセスすることができ、アプリの挙動をユーザーのロールに応じてカスタマイズすることができます。

コード例:

import { createNextjsServerClient } from "@squadbase/nextjs";

// In your Next.js server component or API route
const client = createNextjsServerClient({
  projectId: "your-project-id",
});

// Get the current authenticated user
const user = await client.getUser();
console.log(user);
// {
//   username: string,
//   email: string,
//   firstName: string,
//   lastName: string,
//   iconUrl: string | null,
//   roles: string[]
// }

ロールによるアクセスコントロール

Morph マーケティング マスターページ

Squadbaseのチームに追加されたメンバーの一人一人に、それぞれのアプリでのみ有効な「プロジェクトロール」を付与することができます。プロジェクトロールは自由な文字列を設定できるので、あなたのニーズに合わせて柔軟なロール管理を実現できます。

設定されたロールは、上記の例のようにNext.jsのコードからアクセスすることができます。

利用分析

Squadbaseは、ユーザーのアクセスログを収集し、ユーザーアナリティクスを提供します。SquadbaseにデプロイしたNext.jsアプリを、チームメンバーがどのくらい利用しているのかを把握することができます。

Squadbaseの組み込みのユーザーアナリティクスを利用するために、コードを追加する必要はありません。Streamlitアプリをデプロイし、ダッシュボードからすぐにアナリティクスを確認することができます。

ログモニタリング

Squadbaseは、デプロイされたアプリのログを収集し、ログモニタリングを提供します。ログモニタリングを利用することで、アプリのデプロイやデプロイのバージョンごとのログを確認することができます。

フィードバック

Squadbase上にデプロイされたアプリには、自動でフィードバック用のコメントボックスが追加されます。チームメンバーはこのコメントボックスから、アプリのフィードバックを送信することができます。

SquadbaseにNext.jsをデプロイする

Next.jsをSquadbaseにデプロイするのはとても簡単です！次の4ステップで、継続的デプロイメントを構築することができます。

  1. プロジェクトに squadbase.yml を追加する
  2. Next.jsのアウトプットモードを standalone に設定する
  3. SquadbaseのダッシュボードからGithubリポジトリをインポートする
  4. コードをプッシュする

詳しくは、ドキュメントを参照してください！

まとめ

いかがでしたでしょうか！SquadbaseはNext.jsアプリをプロトタイプから本番運用へとシームレスに移行し、スケーラビリティと安定した運用体制、そしてアプリの改善による組織の進化をサポートします。

SquadbaseへのNext.jsアプリのデプロイはたった数分で完了します。ぜひサインアップして試してみてください！