Skip to main content

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.

See code and demo

1 Create Next.js Project#

Run this in terminal

npx create-next-app -e https://github.com/upstash/examples/tree/master/nextjs-with-redis nextjs-with-redis

2 Create a Redis (Upstash) Database#

3 Set up environment variables#

Copy the .env.local.example file in this directory to .env.local

cp .env.local.example .env.local
  • REDIS_URL: Copy the url in the database page Upstash console
note

which will be ignored by Git

4 Run the app#

Install dependencies packages

yarn

Let's run the project

yarn dev

5 Live!#

Go to http://localhost:3000/ 🎉

Notes:#

  • For best performance the application should run in the same region with the Redis database's region.
  • Alternatively, counter can be read from the APIs instead of getServerSideProps().