Serverless Cloud × Next.js × Upstash Redisで始めるサーバーレスアプリ開発

Serverless Cloudは、Serverless Frameworkを開発したチームが手がけるバックエンドプラットフォームです。クラウドランタイム、CLI、SDKをひとつのプラットフォームに統合し、開発者の生産性向上を強力にサポートします。

本記事では、Serverless Redis（Upstash）からデータを読み込むNext.jsアプリケーションを構築し、Serverless Cloudへデプロイするまでの一連の流れを解説します。

セットアップ

まず、以下のコマンドでServerless Cloudプロジェクトを初期化します。

npm init cloud

対話形式のウィザードが起動するので、テンプレートとしてNext.jsを選択してください。これにより、新しいNext.jsプロジェクトが自動的に生成されます。

? 新しいアプリを作成しますか？既存のアプリで作業しますか？
ℹ 「新しいアプリを作成」を選択しました。
ℹ このディレクトリに生成するアプリテンプレートを選択してください。
ℹ 「Next.js」を選択しました。
ℹ アプリ名を入力してください。
ℹ 「serverless-cloud」と入力しました。

Upstash Redisクライアントのインストール

プロジェクトフォルダ内で、以下のコマンドを実行してUpstash Redisクライアントをインストールします。

npm install @upstash/redis

続いて、Upstash ConsoleでRedisデータベースを作成します。作成後、CLIを使って次のようにusersデータを挿入しましょう。

set users '[{ "id": "12", "name": "John Doe"}, { "id": "13", "name": "Jane Smith"}]'

APIルートの実装

user.jsを以下のように編集し、UpstashのREST URLとトークンを実際の値に置き換えてください。

// Next.js APIルートの詳細: https://nextjs.org/docs/api-routes/introduction
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "REPLACE_HERE",
  token: "REPLACE_HERE",
});

export default async function handler(req, res) {
  const data = await redis.get("users");
  res.status(200).json({ users: data });
}

ここでは、Redisからusersキーの値を取得し、JSON形式でレスポンスを返すシンプルなAPIルートを実装しています。

テストとデプロイ

Serverless CloudのインタラクティブCLIでdevコマンドを実行します。その後、https://localhost:3000/ にアクセスすると、以下のような画面が表示されるはずです。

ご覧のとおり、Redisに保存したユーザーデータが一覧表示されれば、ローカル環境での動作確認は完了です。

次に、インタラクティブCLIでdeploy devコマンドを実行して、アプリケーションをクラウドへデプロイしましょう。Serverless Cloudのダッシュボードから、メトリクスやアプリケーションのログを確認できます。

まとめ

本記事では、Serverless Cloud上にNext.jsアプリケーションを構築し、データストアとしてUpstash Redisを活用する方法をご紹介しました。Serverless Cloudを利用すれば、インフラ管理の手間を最小限に抑えながら、素早くアプリケーションを公開できます。ぜひ実際に試してみてください。

最新情報はDiscordやTwitterでも発信しています。ぜひフォローしてみてください。