Tutorials
Next.js with Redis
GitHub Repository
You can find the project source code on GitHub.
This tutorial uses Next.js App Router. If you want to use Pages Router, check out our Pages Router tutorial.
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.
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
Home Page Setup
Update /app/page.tsx
:
/app/page.tsx
Run & Deploy
Run the app locally with npm run dev
, check http://localhost:3000/
Deploy your app with vercel
You can also integrate your Vercel projects with Upstash using Vercel Integration module. Check this article.