Skip to content

Commit 6d73fab

Browse files
correttojscorrettojs
authored
update nextjs kv-redis starter (#1064)
### Description update nextjs kv-redis starter to support any marketplace Redis provider ### Demo URL <!-- Provide a URL to a live deployment where we can test your PR. If a demo isn't possible feel free to omit this section. --> ### Type of Change - [ ] New Example - [ ] Example updates (Bug fixes, new features, etc.) - [ ] Other (changes to the codebase, but not to examples) ### New Example Checklist - [ ] 🛫 `npm run new-example` was used to create the example - [ ] 📚 The template wasn't used but I carefuly read the [Adding a new example](https://github.com/vercel/examples#adding-a-new-example) steps and implemented them in the example - [ ] 📱 Is it responsive? Are mobile and tablets considered?
1 parent 34afd8a commit 6d73fab

File tree

7 files changed

+2021
-1602
lines changed

7 files changed

+2021
-1602
lines changed

‎storage/kv-redis-starter/.env.example‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
KV_URL=
2-
KV_REST_API_URL=
3-
KV_REST_API_TOKEN=
4-
KV_REST_API_READ_ONLY_TOKEN=
2+
REDIS_URL=

‎storage/kv-redis-starter/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
2-
name: Vercel KV for Redis Next.js Starter
2+
name: Redis Next.js Starter
33
slug: kv-redis-starter
4-
description: Simple Next.js template that uses Vercel KV for Redis to track pageviews.
4+
description: Simple Next.js template that uses Redis to track pageviews.
55
framework: Next.js
66
useCase: Starter
77
css: Tailwind
8-
database: Vercel KV
9-
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-starter&project-name=kv-redis-starter&repository-name=kv-redis-starter&demo-title=Vercel%20KV%20for%20Redis%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-starter.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-starter.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"kv"%7D%5D
8+
database: Redis
9+
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-starter&project-name=kv-redis-starter&repository-name=kv-redis-starter&demo-title=Vercel%20KV%20for%20Redis%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-starter.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-starter.vercel.app%2Fopengraph-image.png&products=%5B%7B"type"%3A"integration"%2C"group"%3A"redis"%7D%5D
1010
demoUrl: https://kv-redis-starter.vercel.app/
1111
relatedTemplates:
1212
- blob-starter
1313
- postgres-starter
1414
---
1515

16-
# Vercel KV for Redis Next.js Starter
16+
# Redis Next.js Starter
1717

18-
Simple Next.js template that uses [Vercel KV for Redis](https://vercel.com/kv) to track pageviews.
18+
Simple Next.js template that uses Redis to track pageviews.
1919

2020
## Demo
2121

@@ -29,7 +29,7 @@ You can choose from one of the following two methods to use this repository:
2929

3030
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):
3131

32-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-starter&project-name=kv-redis-starter&repository-name=kv-redis-starter&demo-title=Vercel%20KV%20for%20Redis%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-starter.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-starter.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"kv"%7D%5D)
32+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-starter&project-name=kv-redis-starter&repository-name=kv-redis-starter&demo-title=Vercel%20KV%20for%20Redis%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-starter.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-starter.vercel.app%2Fopengraph-image.png&products=%5B%7B"type"%3A"integration"%2C"group"%3A"redis"%7D%5D)
3333

3434
### Clone and Deploy
3535

‎storage/kv-redis-starter/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import './globals.css'
22
import { Inter } from 'next/font/google'
33

44
export const metadata = {
5-
title: 'Vercel KV for Redis Next.js Starter',
6-
description: 'A simple Next.js app with Vercel KV for Redis as the database',
5+
title: 'Redis Next.js Starter',
6+
description: 'A simple Next.js app with Redis as the database',
77
}
88

99
const inter = Inter({

‎storage/kv-redis-starter/app/page.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ export default function Home() {
1717
<ExpandingArrow />
1818
</Link>
1919
<h1 className="pt-4 pb-8 bg-gradient-to-br from-black via-[#171717] to-[#575757] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl">
20-
KV on Vercel
20+
Redis on Vercel
2121
</h1>
2222
<div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
2323
<div className="flex justify-between items-center mb-4">
2424
<div className="space-y-1">
2525
<h2 className="text-xl font-semibold">
26-
Announcing Vercel KV for Redis
26+
Announcing Redis
2727
</h2>
2828
<p className="text-sm text-gray-500">
2929
The best description in the world
@@ -50,13 +50,7 @@ export default function Home() {
5050
</div>
5151
</div>
5252
<p className="font-light text-gray-600 w-full max-w-lg text-center mt-6">
53-
<Link
54-
href="https://vercel.com/kv"
55-
className="font-medium underline underline-offset-4 hover:text-black transition-colors"
56-
>
57-
Vercel KV for Redis
58-
</Link>{' '}
59-
demo. Built with{' '}
53+
Redis demo. Built with{' '}
6054
<Link
6155
href="https://nextjs.org/docs"
6256
className="font-medium underline underline-offset-4 hover:text-black transition-colors"

‎storage/kv-redis-starter/components/view-counter.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Redis } from '@upstash/redis'
1+
import { createClient } from "redis";
22

33
export default async function ViewCounter() {
4-
const redis = new Redis({
5-
url: process.env.KV_REST_API_URL,
6-
token: process.env.KV_REST_API_TOKEN,
7-
})
4+
const redis = await createClient({
5+
url: process.env.REDIS_URL ?? process.env.KV_URL,
6+
}).connect();
87
const views = await redis.incr('views')
98

109
return (

‎storage/kv-redis-starter/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
"dependencies": {
1414
"@types/node": "18.15.11",
1515
"@types/react": "18.0.37",
16-
"@types/react-dom": "18.0.11",
17-
"@upstash/redis": "^1.34.3",
16+
"@types/react-dom": "18.0.11",
1817
"autoprefixer": "10.4.14",
1918
"eslint": "8.38.0",
2019
"eslint-config-next": "13.3.0",
2120
"next": "13.4.13",
2221
"postcss": "8.4.22",
2322
"react": "18.2.0",
2423
"react-dom": "18.2.0",
24+
"redis": "^4.7.0",
2525
"tailwindcss": "3.3.1",
2626
"typescript": "5.0.4"
2727
},

0 commit comments

Comments
 (0)