Next.js

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

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

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

サンプル

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

GitHub

GitHub - e2b-dev/ai-analyst: Open source AI analyst powered by E2B. Analyze your CSV files with Llama 3.1 and create interactive charts.

Open source AI analyst powered by E2B. Analyze your CSV files with Llama 3.1 and create interactive charts. - e2b-dev/ai-analyst

リソース

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

nextjs.org

Next.js公式ドキュメント

Next.jsの公式ドキュメントです。

sdk.vercel.ai

AI SDK by Vercel

The AI SDK is the TypeScript toolkit for building AI applications and agents with React, Next.js, Vue, Svelte, Node.js, and more.

www.squadbase.dev

Next.js製AIアプリを組織内だけで配布する際の、ユーザー認証の実装方法4つ | Squadbase Blog

Vercel AI SDKの登場により、Next.jsはAIアプリ構築のフレームワークとして有力な選択肢になりました。Next.jsで構築したAIアプリを組織内でプライベートに共有するには、ユーザー認証を実装する必要があります。本記事では、Next.jsで組織向けのユーザー認証を実装するためのツールや方法を比較します。

www.squadbase.dev

社内アプリ開発のための JavaScript フレームワーク比較 2025: Next.js, AI SDK by Vercel, Evidence, Observable | Squadbase Blog

近年、組織独自のワークフローをコードで表現し、社内メンバーだけが利用できる **インターナル Web アプリ** を開発するケースが増えています。特に生成 AI やデータ基盤を活用した業務自動化では、汎用 SaaS では実装しにくい細かな要件を満たすために、**JavaScript フレームワークを用いた自前開発** が有効です。本記事では、Next.js・Evidence・Observableの3つのフレームワークを比較します。

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

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

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

Squadbaseのユーザー情報を取得するには、以下のように実装してください。

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[]
// }

ユーザーアナリティクス

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

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

ログモニタリング

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

フィードバック

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