> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/upstash/redis-js/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Integrate Upstash Redis with Next.js applications
This guide demonstrates how to use Upstash Redis in Next.js applications, covering both App Router and Pages Router patterns, Server Components, API Routes, and Server Actions.
## Why Upstash Redis for Next.js?
* **Edge-ready**: Works in Edge Runtime and Serverless Functions
* **Server Components**: Native support for React Server Components
* **Fast**: HTTP-based for quick cold starts on Vercel
* **Simple**: No connection pooling required
* **Flexible**: Use in API routes, Server Actions, or Server Components
## Prerequisites
```bash theme={null}
npx create-next-app@latest my-app
cd my-app
```
```bash theme={null}
npm install @upstash/redis
```
Create a database on [Upstash Console](https://console.upstash.com)
Create `.env.local` file:
```bash theme={null}
UPSTASH_REDIS_REST_URL=your_url_here
UPSTASH_REDIS_REST_TOKEN=your_token_here
```
## App Router (Next.js 13+)
### Server Component Example
Server Components can directly access Redis without API routes.
```tsx app/page.tsx theme={null}
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();
export default async function Home() {
const count = await redis.incr("counter");
return (
Counter: {count}
)
}
```
```tsx app/layout.tsx theme={null}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```bash .env.local theme={null}
UPSTASH_REDIS_REST_URL=https://your-endpoint.upstash.io
UPSTASH_REDIS_REST_TOKEN=your-token
```
### API Route Example
```typescript app/api/hello/route.ts theme={null}
import { Redis } from "@upstash/redis";
import { NextResponse } from "next/server";
const redis = Redis.fromEnv();
export async function GET() {
const count = await redis.incr("counter");
return NextResponse.json({ count });
}
export const dynamic = 'force-dynamic'
```
```typescript app/api/user/[id]/route.ts theme={null}
import { Redis } from "@upstash/redis";
import { NextResponse } from "next/server";
const redis = Redis.fromEnv();
interface User {
id: string;
name: string;
email: string;
}
export async function GET(
request: Request,
{ params }: { params: { id: string } }
) {
const user = await redis.get(`user:${params.id}`);
if (!user) {
return NextResponse.json(
{ error: "User not found" },
{ status: 404 }
);
}
return NextResponse.json(user);
}
export async function POST(
request: Request,
{ params }: { params: { id: string } }
) {
const body = await request.json();
await redis.set(`user:${params.id}`, body, { ex: 3600 });
return NextResponse.json({ success: true });
}
```
### Server Actions
Server Actions provide a simple way to mutate data from Client Components.
```tsx app/actions.ts theme={null}
"use server"
import { Redis } from "@upstash/redis";
import { revalidatePath } from "next/cache";
const redis = Redis.fromEnv();
export async function incrementCounter() {
const count = await redis.incr("counter");
revalidatePath("/");
return count;
}
export async function resetCounter() {
await redis.set("counter", 0);
revalidatePath("/");
return 0;
}
export async function addTodo(text: string) {
const id = Date.now().toString();
await redis.hset(`todo:${id}`, {
id,
text,
completed: false,
createdAt: new Date().toISOString(),
});
revalidatePath("/todos");
return id;
}
```
```tsx app/page.tsx theme={null}
"use client"
import { incrementCounter, resetCounter } from "./actions";
import { useState } from "react";
export default function Home() {
const [count, setCount] = useState(0);
async function handleIncrement() {
const newCount = await incrementCounter();
setCount(newCount);
}
async function handleReset() {
const newCount = await resetCounter();
setCount(newCount);
}
return (
Counter: {count}
);
}
```
## Pages Router
### API Routes
```typescript pages/api/hello.ts theme={null}
import type { NextApiRequest, NextApiResponse } from "next";
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();
type Data = {
count: number;
};
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const count = await redis.incr("counter");
res.status(200).json({ count });
}
```
```typescript pages/api/cache/[key].ts theme={null}
import type { NextApiRequest, NextApiResponse } from "next";
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const { key } = req.query;
if (typeof key !== "string") {
return res.status(400).json({ error: "Invalid key" });
}
if (req.method === "GET") {
const value = await redis.get(key);
return res.status(200).json({ value });
}
if (req.method === "POST") {
const { value, ttl } = req.body;
await redis.set(key, value, ttl ? { ex: ttl } : {});
return res.status(200).json({ success: true });
}
if (req.method === "DELETE") {
await redis.del(key);
return res.status(200).json({ success: true });
}
res.status(405).json({ error: "Method not allowed" });
}
```
### Server-Side Rendering (SSR)
```typescript pages/index.tsx theme={null}
import { Redis } from "@upstash/redis";
import type { GetServerSideProps } from "next";
const redis = Redis.fromEnv();
interface Props {
count: number;
}
export default function Home({ count }: Props) {
return (
Counter: {count}
);
}
export const getServerSideProps: GetServerSideProps = async () => {
const count = await redis.get("counter") || 0;
return {
props: {
count,
},
};
};
```
## Advanced Examples
### Caching with Revalidation
```typescript app/posts/[id]/page.tsx theme={null}
import { Redis } from "@upstash/redis";
import { notFound } from "next/navigation";
const redis = Redis.fromEnv();
interface Post {
id: string;
title: string;
content: string;
author: string;
}
async function getPost(id: string): Promise {
const cacheKey = `post:${id}`;
// Try cache first
const cached = await redis.get(cacheKey);
if (cached) {
return cached;
}
// Fetch from database (simulated)
const post: Post = {
id,
title: "Example Post",
content: "This is an example post",
author: "John Doe",
};
// Cache for 5 minutes
await redis.set(cacheKey, post, { ex: 300 });
return post;
}
export default async function PostPage({
params,
}: {
params: { id: string };
}) {
const post = await getPost(params.id);
if (!post) {
notFound();
}
return (