はじめに
最近、Next.jsのパフォーマンス改善で頭を悩ませていませんか？
実は私も同じ悩みを抱えていました。
特にデータ管理やキャッシュ戦略については、かなり試行錯誤を重ねてきました。
そんな中で出会ったのがUpstashです！
最初は「また新しいツール？」と正直面倒に感じていたのですが、実際に使ってみると「これは便利すぎる...！」と驚きの連続でした。
今回は、私が実際のプロジェクトで得た経験やノウハウを、できるだけわかりやすくお伝えしていきます。
この記事を読み終わる頃には、きっとあなたもUpstashの魅力にハマっているはずです！
1. Next.js プロジェクトの作成
まずは App Router を利用した Next.js プロジェクトを新規作成します。
たとえば以下のように作成できます。
npx create-next-app@latest my-upstash-app --experimental-app
cd my-upstash-app
2. Upstash パッケージのインストール
Upstash Redis を利用するため、公式パッケージをインストールします。
npm install @upstash/redis
もし Rate Limit やその他の機能を使いたい場合は、@upstash/ratelimit なども追加してください。
3. 環境変数の設定
Upstash のダッシュボードから取得した Redis 用の REST URL とトークン を、プロジェクト直下の .env.local ファイルに設定します。
UPSTASH_REDIS_REST_URL=https://<your-upstash-redis-id>.upstash.io
UPSTASH_REDIS_REST_TOKEN=<your-upstash-redis-token>
これにより、コード内で Redis.fromEnv() を用いて環境変数から自動的に設定が読み込まれるようになります。
4. サーバコンポーネント内での Upstash 利用
Next.js の App Router では、サーバコンポーネント 内で直接 Upstash クライアントを利用できます。
以下は、簡単なカウンターを Redis 上でインクリメントして表示する例です。
// src/app/page.tsx
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();
export default async function Home() {
// Redis のキー "counter" の値をインクリメント
const count = await redis.incr("counter");
return (
<div className="flex h-screen w-screen items-center justify-center">
<h1 className="text-4xl font-bold">Counter: {count}</h1>
</div>
);
}
この例では、ページアクセスのたびに Redis の "counter" キーの値が 1 ずつ増加 し、その結果がレンダリングされます。
5. ローカル実行とデプロイ
ローカルでの実行
以下のコマンドで開発サーバを起動し、動作を確認します。
npm run dev
ブラウザで http://localhost:3000/ にアクセスすると、カウンターの値が表示されます。
デプロイ
Vercel などのホスティングサービスにデプロイする際は、環境変数（.env.local の内容）をホスティング側に設定してください。
6. その他の応用例
QStash を使ったバックグラウンドジョブ
Upstash のもうひとつのサービスである QStash を用いる場合、例えばバックグラウンドジョブや非同期処理の実装が可能です。
公式の Next.js 用 QStash ガイドでは、以下のように @upstash/qstash/nextjs パッケージを利用し、API ルートで署名検証を行う方法が紹介されています。
// src/app/api/process-image/route.ts
import { verifySignatureAppRouter } from "@upstash/qstash/nextjs";
export const POST = verifySignatureAppRouter(async (req: Request) => {
const body = await req.json();
// バックグラウンドでの処理
return new Response(`Processed image with id "${body.imageId}"`);
});
また、クライアント側からは QStash クライアントを用いてジョブを送信できます。詳細は公式ドキュメントを参照してください。
7. tl;dv
プロジェクト全体の流れは以下のとおりです。
-
プロジェクト作成
App Router を使った Next.js プロジェクトを作成する。 -
パッケージのインストール
@upstash/redis（または必要に応じて@upstash/qstashや@upstash/ratelimit）をインストールする。 -
環境変数の設定
Upstash のダッシュボードから取得した URL とトークンを .env.local に記載する。 -
サーバコンポーネントで利用
Redis.fromEnv()を用いて Upstash Redis クライアントを初期化し、API 呼び出しやデータ操作を行う。 -
実行とデプロイ
ローカルでの動作確認後、Vercel 等のプラットフォームにデプロイし、本番環境でも利用可能にする。
これにより、Next.js の App Router 環境下で Upstash のサービス（Redis や QStash など）を容易に導入でき、キャッシュ、セッション管理、Rate Limit、バックグラウンドジョブなど多様な用途に利用できます。
各公式ドキュメントには詳細なサンプルコードや応用例が掲載されているため、さらに高度な実装を行いたい場合はそちらも参照してください。
まとめ
いかがでしたか？Next.jsとUpstashの組み合わせは、本当に開発者の味方になってくれます。
特にApp Routerの導入で、より直感的な実装が可能になりましたよね。
私自身、この組み合わせのおかげで、開発の効率が格段に上がりました。
サーバーコンポーネントでの実装がこんなにスムーズになるとは、正直想像していませんでした！
次回は、より実践的な内容として、具体的なユースケースやパフォーマンスの最適化テクニックについても詳しくお話ししていきたいと思います。
「ここをもっと詳しく知りたい！」というポイントがありましたら、コメント欄で教えてくださいね。
それでは、早速Upstashを使って、あなたのプロジェクトも進化させていきましょう！
参考文献
会社紹介
株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。
詳しくは 公式サイト までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/