Quickstarts
Next.js 13
Project Setup
We will create a new Next.js application and install the redis package.
npx create-next-app@latest --experimental-app my-app
cd my-app
npm install @upstash/redis
The Code
Update /app/page.tsx
with the following code:
/app/page.tsx
import { Redis } from "@upstash/redis";
import styles from "./page.module.css";
const redis = Redis.fromEnv();
export const revalidate = 0; // disable cache
export default async function Home() {
const member = await redis.srandmember<string>("nextjs13");
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>Welcome {member}</h1>
<p className={styles.description}>
You have been randomly chosen by the redis algorithm.
</p>
</main>
</div>
);
}
Redis.fromEnv()
automatically loads UPSTASH_REDIS_REST_URL
and
UPSTASH_REDIS_REST_TOKEN
from the environment variables. We’ll set them later.
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.
Let’s quickly add some data to redis. Go to the CLI
tab and run the following
commands
sadd nextjs13 Walter
sadd nextjs13 Jesse
sadd nextjs13 Saul
Run & Deploy
You can run the app locally: npm run dev
and check http://localhost:3000/
Deploy your app with npx vercel
You can also integrate your Vercel projects with Upstash using Vercel Integration module. Check this article.
Was this page helpful?