Next.js

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

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

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

Next.jsをデプロイするには、standaloneモードにする必要があります。

現在、SquadbaseはstandaloneモードのNext.jsアプリケーションのみをサポートしています。 next.config.mjs|ts の設定値を以下のように変更して、standaloneモードを有効にしてください。 standaloneモードの設定

サンプル

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の場合には次のようになります。

page.tsx

layout.tsx

next.config.ts

package.json

squadbase.yml

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

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にデプロイされた時のみ有効です。

そのため、ローカル環境では以下のようにモック情報を設定してください。

import { createServerClient } from "@squadbase/server";

const client = createNextjsServerClient({
  projectId: "your-project-id",
  mockUser: {
    username: "test-user",
    email: "test@example.com",
    firstName: "Test",
    lastName: "User",
    iconUrl: null,
    roles: ["user"],
  },
});

Next.jsのコードからSquadbaseのユーザー情報を取得するためには、@squadbase/nextjsをインストールする必要があります。

ユーザーアナリティクス

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

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

User Analytics

ログモニタリング

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

Log Monitoring

フィードバック

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

Feedback

On this page