Next.js with Redis

This tutorial uses Redis as state store for a Next.js application. We simply add a counter that pulls the data from Redis.

​

Project Setup

Let’s create a new Next.js application with App Router and install @upstash/redis package.

npx create-next-app@latest
cd my-app
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.

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

​

Home Page Setup

Update /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 & Deploy

Run the app locally with npm run dev, check http://localhost:3000/

Deploy your app with vercel