【Next.js】5分でわかる！Next.js App RouterとUpstashの超簡単連携方法

# はじめに

最近、**Next.jsのパフォーマンス改善**で頭を悩ませていませんか？
実は私も同じ悩みを抱えていました。
特に**データ管理**や**キャッシュ戦略**については、かなり試行錯誤を重ねてきました。

そんな中で出会ったのが**Upstash**です！
最初は「また新しいツール？」と正直面倒に感じていたのですが、実際に使ってみると「これは便利すぎる...！」と驚きの連続でした。

今回は、私が実際のプロジェクトで得た経験やノウハウを、できるだけわかりやすくお伝えしていきます。
この記事を読み終わる頃には、きっとあなたも**Upstashの魅力**にハマっているはずです！

---

# 1. Next.js プロジェクトの作成

まずは **App Router** を利用した **Next.js** プロジェクトを新規作成します。  
たとえば以下のように作成できます。

```bash
npx create-next-app@latest my-upstash-app --experimental-app
cd my-upstash-app
```

---

# 2. Upstash パッケージのインストール

**Upstash Redis** を利用するため、公式パッケージをインストールします。

```bash
npm install @upstash/redis
```

もし **Rate Limit** やその他の機能を使いたい場合は、`@upstash/ratelimit` なども追加してください。

---

# 3. 環境変数の設定

Upstash のダッシュボードから取得した **Redis 用の REST URL とトークン** を、プロジェクト直下の **.env.local** ファイルに設定します。

```env
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** 上でインクリメントして表示する例です。

```tsx
// 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. ローカル実行とデプロイ

#### ローカルでの実行
以下のコマンドで開発サーバを起動し、動作を確認します。

```bash
npm run dev
```

ブラウザで `http://localhost:3000/` にアクセスすると、カウンターの値が表示されます。

#### デプロイ
**Vercel** などのホスティングサービスにデプロイする際は、**環境変数（.env.local の内容）をホスティング側に設定**してください。

---

# 6. その他の応用例

#### QStash を使ったバックグラウンドジョブ
Upstash のもうひとつのサービスである **QStash** を用いる場合、例えば**バックグラウンドジョブや非同期処理**の実装が可能です。  
公式の **Next.js** 用 QStash ガイドでは、以下のように `@upstash/qstash/nextjs` パッケージを利用し、**API ルートで署名検証**を行う方法が紹介されています。

```tsx
// 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

**プロジェクト全体の流れ**は以下のとおりです。

```mermaid
flowchart LR
    A[Next.jsプロジェクト作成] --> B[Upstashパッケージ導入]
    B --> C[環境変数設定]
    C --> D[サーバコンポーネントで利用]
    D --> E[ローカル実行・デプロイ]
```

1. **プロジェクト作成**  
   App Router を使った Next.js プロジェクトを作成する。

2. **パッケージのインストール**  
   `@upstash/redis`（または必要に応じて `@upstash/qstash` や `@upstash/ratelimit`）をインストールする。

3. **環境変数の設定**  
   Upstash のダッシュボードから取得した URL とトークンを **.env.local** に記載する。

4. **サーバコンポーネントで利用**  
   `Redis.fromEnv()` を用いて Upstash Redis クライアントを初期化し、API 呼び出しやデータ操作を行う。

5. **実行とデプロイ**  
   ローカルでの動作確認後、Vercel 等のプラットフォームにデプロイし、本番環境でも利用可能にする。

これにより、Next.js の **App Router** 環境下で **Upstash** のサービス（**Redis** や **QStash** など）を容易に導入でき、**キャッシュ**、**セッション管理**、**Rate Limit**、**バックグラウンドジョブ**など多様な用途に利用できます。
各公式ドキュメントには詳細なサンプルコードや応用例が掲載されているため、さらに高度な実装を行いたい場合はそちらも参照してください。


## まとめ

いかがでしたか？**Next.js**と**Upstash**の組み合わせは、本当に開発者の味方になってくれます。
特に**App Router**の導入で、より直感的な実装が可能になりましたよね。

私自身、この組み合わせのおかげで、開発の効率が格段に上がりました。
**サーバーコンポーネント**での実装がこんなにスムーズになるとは、正直想像していませんでした！

次回は、より実践的な内容として、**具体的なユースケース**や**パフォーマンスの最適化テクニック**についても詳しくお話ししていきたいと思います。
「ここをもっと詳しく知りたい！」というポイントがありましたら、コメント欄で教えてくださいね。

それでは、早速**Upstash**を使って、あなたのプロジェクトも進化させていきましょう！

---

## 参考文献

- [Upstash Redis Quickstarts (Next.js App Router)](https://upstash.com/docs/redis/quickstarts/nextjs-app-router)  
- [Upstash QStash Quickstarts (Vercel + Next.js)](https://upstash.com/docs/qstash/quickstarts/vercel-nextjs)

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/