Skip to main content

GitHub Repository

You can find the project source code on GitHub.

​
Prerequisites

You need to have AWS credentials configured locally and SST CLI installed.
  1. Create an AWS account
  2. Create an IAM user
  3. Configure the AWS CLI
  4. Setup SST CLI

​
Project Setup

Let’s create a new Next.js application. 
npx create-next-app@latest
cd my-app
Let’s initialize SST in our app. 
sst init
Install the @upstash/redis package. 
npm install @upstash/redis

​
Database Setup

Create a Redis database using Upstash Console or Upstash CLI and copy the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN into your .env file.
.env
UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

​
Pass the Environment Variables

/sst.config.ts
/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: "my-app",
      removal: input?.stage === "production" ? "retain" : "remove",
      home: "aws",
    };
  },
  async run() {
    new sst.aws.Nextjs("MyWeb", {
      environment: {
        UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL || "",
        UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN || "",
      },
    });
  },
});

​
Home Page Setup

Update /app/page.tsx:
/app/page.tsx
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

export default async function Home() {
  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>
  )
}

​
Run

Run the SST app. 
npm run dev
Check http://localhost:3000/

​
Deploy

Deploy with SST. 
sst deploy
Check the output URL.
⌘I