用 Upstash 作为你的 Redis 服务器

NextJS NextJS实战 Redis

🧑‍💻

推荐全栈学习资源：

Next.js 中文文档：样式和官网一样的中文文档，创造沉浸式Next.js中文学习体验。

《Chrome插件全栈开发》：真实出海项目的实战教学课，讲解Chrome插件和Next.js端的全栈开发，帮助你半个月内成为全栈出海工程师。

本文继续我们的实战教程（源码），今天给大家推荐一个免费的 Redis 服务器，它叫 Upstash。

如果你正在开发个人产品，那么请忘掉 Redis 的配置和各种安全措施，用 Upstash，什么 RDB 和 AOF、雪崩和击穿、密码和权限，这些 Upstash 会帮你搞定，你只需要关注你要实现的功能。

本文假定你已了解 Redis 的基本概念，阅读完本文，你将学习到：

创建一个 Upstash 的 Redis 数据库
NextJS 服务端组件和 Redis 交互

创建 Redis 数据库

万事开头需注册，请到 https://upstash.com/ 注册登录，开始咱们的教程。

首次进入后台，看到的是这样的界面

创建 Redis 数据库

稍等片刻就创建完成了，Redis 信息一览无余。

这种方式创建Redis，相信要比我们手动在本地安装Redis、分配db要流畅的多吧。下面进入正题，NextJS中怎么使用 Upstash 的 Redis。

服务端组件调用

先安装依赖

yarn add @upstash/redis

实际项目中，我们会在多个地方使用redis，所以应该把redis配置写到lib里，方便调用

// @/lib/redis.ts
 
import { Redis } from '@upstash/redis'
 
const redis = new Redis({
  url: `${process.env.UPSTASH_REDIS_REST_URL}`,
  token: `${process.env.UPSTASH_REDIS_REST_TOKEN}`,
})
 
export default redis

在服务端组件中直接和 redis 交互

// @/app/pages.tsx
 
……
import redis from "@/lib/redis";
 
export default async function Home() {
……
	await redis.incr("view");
	const view = await redis.get("view")
 
	return (
		<>
			……
				<span className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800">
          <TablerEyeFilled />
          <p>
            <span className="hidden sm:inline-block">Page Views</span>{" "}
            <span className="font-semibold">{nFormatter(view)}</span>
          </p>
        </span>
			……
		</>
	) 
 
……
}