本文介绍在 next.js 应用中实现真正动态、可实时更新且跨组件响应式生效的配置系统，推荐使用 vercel kv 等边缘键值存储替代静态 config.json，并结合服务端获取 + 客户端 context 实现配置驱动渲染。
本文介绍在 next.js 应用中实现真正动态、可实时更新且跨组件响应式生效的配置系统，推荐使用 vercel kv 等边缘键值存储替代静态 config.json，并结合服务端获取 + 客户端 context 实现配置驱动渲染。
在 Next.js 中，直接依赖 config.json 文件（如通过 fs.readFile 或静态导入）无法满足“运行时动态修改 + 组件自动重渲染”的需求——因为 JSON 文件属于构建时或服务端静态资源，前端无法直接写入，且修改后不会触发 React 状态更新。真正的动态配置必须具备可写性、低延迟读取、跨请求一致性三大能力，因此需引入外部状态存储。
✅ 推荐方案：Vercel KV（轻量、边缘部署、API 友好）
Vercel KV 是专为 Vercel 部署优化的低延迟键值存储，支持 Server Components 直接读取，天然适配 Next.js 的 App Router 架构。你可将配置以 JSON 对象形式存为单个键（如 'site-settings'），并通过 @vercel/kv SDK 在服务端安全获取：
// app/providers/SettingsProvider.tsx
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
type Settings = {
title: string;
primaryColor: string;
maintenanceMode?: boolean;
// 其他自定义字段...
};
const SettingsContext = createContext<settings null>(null);
export function SettingsProvider({ children }: { children: React.ReactNode }) {
const [settings, setSettings] = useState<settings null>(null);
// 客户端轮询或通过事件（如 WebSocket / SWR revalidate）更新
useEffect(() => {
const fetchSettings = async () => {
const res = await fetch('/api/settings');
const data = await res.json();
setSettings(data);
};
fetchSettings();
const interval = setInterval(fetchSettings, 30_000); // 30s 刷新一次
return () => clearInterval(interval);
}, []);
if (!settings) return <div>Loading settings...</div>;
return (
<settingscontext.provider value="{settings}">
{children}
</settingscontext.provider>
);
}
export function useSettings() {
const context = useContext(SettingsContext);
if (!context) throw new Error('useSettings must be used within SettingsProvider');
return context;
}</settings></settings>
kv.get()
