# JSON 内容管理 ## 目录结构数据/ ├── pt-PT/ │ ├── services.json │ ├──programs.json │ ├── 感言.json │ ├── faqs.json │ └── 政策.json ├── zh/ │ └── ...（结构相同） ├── tr/ ├── es/ ├── fr/ └── 德/ ## TypeScript 接口 // 类型/index.ts 导出接口服务{ slug：字符串；名称：字符串；短描述：字符串；长描述：字符串；持续时间：字符串；价格来自：数量；标签：字符串[]；交付：“亲自”| '在线' | '两个都'; 最后更新：字符串； } 导出接口程序{ slug：字符串；标题：字符串；类型： '单一' | '捆'; 级别： '初学者' | '中级' | '高级' | '全部'; 设备：字符串[]；结果：字符串[]；持续时间文本：字符串；访问长度文本：字符串；价格：数量； stripePriceId？：字符串；特色：布尔值；最后更新：字符串； } 导出接口感言{ id：字符串；名称：字符串；摘要：字符串；详细信息：字符串；标签：字符串；特色：布尔值； } 导出接口FAQGroup { 类别：字符串；项目：{ 问题：字符串；答案：字符串； }[]; } 导出接口PolicySection { 标题：字符串；内容：字符串； } 导出接口策略 { 部分：PolicySection[]；最后更新：字符串； } ## 数据获取实用程序 // 库/data.ts 从 '@/i18n.config' 导入 { type Locale, defaultLocale }; 从 '@/types' 导入类型 { 服务、计划、推荐、FAQGroup、政策 }；异步函数 loadData(locale: Locale, filename: string): Promise { 尝试{ const data = wait import(`@/data/${locale}/${filename}`); 返回 data.default 为 T； } 抓住 { // 回退到默认区域设置 const后备=等待导入(`@/data/${defaultLocale}/${filename}`); 返回fallback.default为T； } } 导出异步函数 getServices(locale: Locale): Promise { 返回 loadData(locale, 'services.json'); } 导出异步函数 getServiceBySlug( 区域设置：区域设置， slug: 字符串 ): 承诺<服务|未定义> { const services = 等待 getServices(locale); 返回 services.find((s) => s.slug === slug); } 导出异步函数 getProgrammes(locale: Locale): Promise { 返回 loadData(locale, 'programmes.json'); } 导出异步函数 getFeaturedProgrammes(locale: Locale): Promise { const 程序 = 等待 getProgrammes(区域设置); 返回programs.filter((p) => p.featured); } 导出异步函数 getProgrammeBySlug( 区域设置：区域设置， slug: 字符串 ): 承诺<程序|未定义> { const 程序 = 等待 getProgrammes(区域设置); returnprograms.find((p) => p.slug === slug); } 导出异步函数 getTestimonials(locale: Locale): Promise { 返回 loadData(locale, 'testimonials.json'); } 导出异步函数 getFeaturedTestimonials(locale: Locale): Promise { const testimonials =等待 getTestimonials(locale); return testimonials.filter((t) => t.featured); } 导出异步函数 getFAQs(locale: Locale): Promise { 返回 loadData(locale, 'faqs.json'); } 导出异步函数 getPolicies(locale: Locale): Promise { 返回 loadData(locale, 'policies.json'); } ## JSON 文件示例 // 数据/en/services.json [ { “slug”：“普拉提-1-1”， "name": "1:1 普拉提课程", "shortDesc": "根据您的目标量身定制的个性化垫子或普拉提塑身机", "longDesc": "完全定制的会议，专注于您的特定需求......", “持续时间”：“60 分钟”， “价格来自”：75， "tags": ["力量", "姿势", "灵活性"], “交货”：“两者”， “最后更新”：“2025-01-15” } ] // data/en/faqs.json [ { "category": "入门", “项目”：[ { "question": "我需要经验才能开始吗？", "answer": "无需任何经验。课程会根据您的水平进行调整。" } ] } ] ## 服务器组件中的用法 // 应用程序/[语言环境]/services/page.tsx 从'@/lib/data'导入{getServices}；从'@/components/cards/ServiceCard'导入{ServiceCard}；类型道具= { params: Promise<{ locale: string }>; }; 导出默认异步函数 ServicesPage({ params }: Props) { const { locale } = 等待参数； const services =等待 getServices(locale as Locale); 返回（

{services.map((服务) => ( ))}

）； } ## 添加新的内容类型 1. 在`types/index.ts`中定义接口 2. 在每个 locale 文件夹中创建 JSON 文件 3. 在 `lib/data.ts` 中添加 fetch 函数 4. 在具有正确类型的组件中使用

Json 内容管理

包含技能