Next.js

Next.jsは堅牢なReactベースのフレームワークで、サーバーサイドレンダリングと静的サイト生成をビルトインでサポートしているため、LLM APIとシームレスに統合してビジネス効率を高める高性能な社内AIアプリケーションの構築に最適です。

SquadbaseはNext.jsアプリケーションのデリバリーにおいて、以下のような機能・運用を実現します。

• セキュアなクラウド環境へのデプロイ
• 組み込みのユーザー認証
• ユーザーアナリティクス
• ログモニタリング
• ユーザーからのフィードバック収集

サンプル

Next.jsを使用して構築されたAIアプリをチェックしてみてください。Squadbaseを使えば、このようなアプリをセキュアなクラウド環境にデプロイし、組織の中で安全に運用することができます。

リソース

Streamlitでのアプリ開発に役立つリソースを紹介します

Next.jsアプリを新規に作成する

Next.jsアプリを新規に作成するには、以下のコマンドを実行してください。

npx create-next-app@latest

すると、以下のようなセットアッププロンプトが現れるので、適切な設定を行ってください。以下の例はSquadbaseチームのおすすめです。

✔ Would you like to use TypeScript? … No / Yes (Yes)
✔ Would you like to use ESLint? … No / Yes (Yes)
✔ Would you like to use Tailwind CSS? … No / Yes (Yes)
✔ Would you like your code inside a `src/` directory? … No / Yes (No)
✔ Would you like to use App Router? (recommended) … No / Yes (Yes)
✔ Would you like to use Turbopack for `next dev`? … No / Yes (Yes)
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes (No)

つづいて、next.config.ts をカスタマイズします。

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'standalone',
};

export default nextConfig;

これで準備は完了です！🎉

Next.jsの開発に関するより詳しい情報は、Next.js公式ドキュメント をご覧ください。

Github連携を用いてデプロイする

squadbase.ymlを作成する

プロジェクトのコードベースのルートに squadbase.yml を作成します。たとえば、app routerの場合には次のようになります。

例として、最もシンプルな squadbase.yml の内容は以下の通りです。

# squadbase.yml
version: '1'

build:
  framework: nextjs
  runtime: node20 # node18, node20, node22

squadbase.ymlのカスタマイズについては、こちら をご覧ください。

output: standalone を設定する

Next.jsアプリケーションをSquadbaseにデプロイするには、standaloneモードにする必要があります。

next.config.mjs|ts の設定値を以下のように変更して、standaloneモードを有効にしてください。

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'standalone',
};

export default nextConfig;

GithubリポジトリをSquadbaseにインポートする

Squadbaseのダッシュボードのホーム画面から、Githubリポジトリをインポートします。インポートが完了すると、自動的にデプロイが開始されます。

プッシュしてデプロイ

アプリに変更を加えて、Githubリポジトリにプッシュしてデプロイします。プッシュが完了すると、自動的に新しいバージョンのデプロイが開始されます。

Squadbaseの機能を活用する

Squadbaseはデプロイメントだけでなく、組織向けアプリの開発・運用に便利な機能を提供しています。

ユーザー認証とメンバー管理

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

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

// app/api/user/route.ts
import { createNextjsServerClient } from "@squadbase/nextjs";

export async function GET() {
  const client = createNextjsServerClient();
  const user = await client.getUser();
  // {
  //   username: string,
  //   email: string,
  //   firstName: string,
  //   lastName: string,
  //   iconUrl: string | null,
  //   roles: string[]
  // }
  return Response.json(user);
}

ユーザーアナリティクス

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

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

ログモニタリング

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

フィードバック

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