Logo文档
配置

网站配置

NEXTDEVKIT 网站的核心设置

包含网站核心设置的主配置文件。NEXTDEVKIT 已经为你设置了默认的核心设置，你可以在 src/config/index.ts 文件中自定义核心设置。

核心配置结构

src/config/index.ts
export const appConfig = {
  metadata: {
    // 网站元数据和品牌
  },
  ui: {
    // 用户界面设置
  },
  blog: {
    // 博客配置
  },
  mail: {
    // 邮件服务配置
  },
  i18n: {
    // 国际化设置
  },
  auth: {
    // 身份验证设置
  },
  settings: {
    // 应用程序设置
  },
  storage: {
    // 存储配置
  },
  payment: {
    // 支付和定价配置
  },
  affiliate: {
    // 联盟营销配置
  },
} as const satisfies AppConfig;

🎨 元数据配置

控制网站的外观和品牌：

属性类型描述
namestring在UI中显示的应用程序名称
titlestring网站的SEO标题
descriptionstring网站的SEO描述
imagesobject徽标和社交媒体图片
keywordsstring[]搜索引擎的SEO关键词

图片配置

属性类型描述
logoLightstring浅色模式徽标的路径
logoDarkstring深色模式徽标的路径
ogImagestring社交分享的Open Graph图片

示例：

src/config/index.ts
metadata: {
  name: "NEXT DEV KIT",
  title: "NEXTDEVKIT - Next.js 入门套件",
  description: "下一个项目的终极 Next.js 入门套件",
  images: {
    logoLight: "/logo-light.svg",
    logoDark: "/logo-dark.svg",
    ogImage: "/og-image.png",
  },
  keywords: [
    "Next.js",
    "入门套件",
    "Next.js SaaS 模板",
    "Next.js 样板",
  ],
}

🎨 UI配置

控制用户界面主题和外观：

属性类型描述
theme.enabledboolean是否启用主题切换
theme.defaultMode"system" | "light" | "dark"默认主题模式

示例：

src/config/index.ts
ui: {
  theme: {
    enabled: true,
    defaultMode: "system", // 可选择：light、dark、system
  },
}

📝 博客配置

配置博客功能：

属性类型描述
paginationnumber每页博客文章数量

示例：

src/config/index.ts
blog: {
  pagination: 3,
}

📧 邮件配置

配置邮件服务：

属性类型描述
provider"resend" | "plunk"邮件服务提供商
fromstring默认发件人邮箱地址
contactstring接收邮件的联系邮箱

示例：

src/config/index.ts
mail: {
  provider: "resend",
  from: "noreply@nextdevkit.com",
  contact: "contact@nextdevkit.com",
}

🌍 国际化(i18n)配置

配置应用程序的语言支持：

属性类型描述
enabledboolean是否启用i18n
defaultLocalestring默认语言区域设置
localesRecord<string, { name: string }>可用语言
localeCookieNamestring存储区域设置偏好的Cookie名称

示例：

i18n: {
  enabled: true,
  defaultLocale: "en",
  locales: {
    en: { name: "English" },
    zh: { name: "简体中文" },
  },
  localeCookieName: "NEXT_LOCALE",
}

🔐 身份验证配置

配置身份验证选项：

属性类型描述
enableSocialLoginboolean启用社交登录提供商
enablePasswordLoginboolean启用邮箱/密码身份验证
redirectAfterSignInstring成功登录后的重定向路径
redirectAfterLogoutstring注销后的重定向路径

示例：

src/config/index.ts
auth: {
  enableSocialLogin: true,
  enablePasswordLogin: true,
  redirectAfterSignIn: "/app/dashboard",
  redirectAfterLogout: "/",
}

⚙️ 设置配置

配置应用程序设置：

属性类型描述
account.canChangeEmailboolean用户是否可以更改邮箱

示例：

src/config/index.ts
settings: {
  account: {
    canChangeEmail: true,
  },
}

📁 存储配置

配置文件存储：

属性类型描述
providerstring存储提供商（例如："s3", "r2"）
bucketNamesRecord<string, string>不同文件类型的命名存储桶

示例：

src/config/index.ts
storage: {
  provider: "s3",
  bucketNames: {
    avatars: process.env.NEXT_PUBLIC_AVATARS_BUCKET_NAME || "avatars",
  },
}

💳 支付配置

配置支付处理和定价计划：

属性类型描述
provider"stripe" | "creem"支付处理器
currencystring货币代码（例如："USD"）
yearlyDiscountnumber年度折扣百分比（例如：20）
redirectAfterCheckoutstring成功支付后的重定向路径
plansRecord<string, PricePlan>可用定价计划

定价计划结构

plans 对象中的每个计划都有以下结构：

属性类型描述
idstring计划的唯一标识符
isFreeboolean是否为免费计划
isEnterpriseboolean是否为企业计划
isLifetimeboolean是否为一次性付费计划
popularboolean是否突出显示为受欢迎的
highlightedboolean是否突出显示计划
pricesPrice[]价格选项数组

价格结构

属性类型描述
typePaymentType支付类型（ONE_TIME、SUBSCRIPTION）
priceIdstringStripe价格ID
amountnumber货币单位的价格金额
interval"month" | "year"订阅周期（月、年）
trialPeriodDaysnumber试用期天数

示例：

src/config/index.ts
{
  provider: "stripe",
  currency: "USD",
  yearlyDiscount: 20,
  redirectAfterCheckout: "/app/dashboard",
  plans: {
    free: {
      id: "free",
      isFree: true,
    },
    pro: {
      id: "pro",
      prices: [
        {
          type: PaymentType.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY as string,
          amount: 9.9,
          interval: PlanInterval.MONTH,
          trialPeriodDays: 7,
        },
        {
          type: PaymentType.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_PRO_YEARLY as string,
          amount: 99,
          interval: PlanInterval.YEAR,
          trialPeriodDays: 30,
        },
      ],
      popular: true,
    },
    lifetime: {
      id: "lifetime",
      prices: [
        {
          type: PaymentType.ONE_TIME,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_LIFETIME as string,
          amount: 399,
        },
      ],
      isLifetime: true,
    },
    enterprise: {
      id: "enterprise",
      isEnterprise: true,
      highlighted: true,
    },
  },
}

💰 联盟营销配置

配置联盟营销计划：

属性类型描述
affonso.enabledboolean是否启用联盟营销
affonso.idstringaffonso 联盟营销ID

示例：

src/config/index.ts
affiliate: {
  affonso: {
    enabled: false,
    id: process.env.NEXT_PUBLIC_AFFILIATE_AFFONSO_ID || "",
  },
}

🎯 使用示例

访问配置

import { appConfig } from "@/config";

// 访问元数据
const siteName = appConfig.metadata.name;
const siteTitle = appConfig.metadata.title;

// 访问主题设置
const themeEnabled = appConfig.ui.theme.enabled;
const defaultMode = appConfig.ui.theme.defaultMode;

// 访问支付计划
const allPlans = appConfig.payment.plans;
const nextjsPlan = appConfig.payment.plans.nextjs;

类型安全

配置使用 TypeScript 完全类型化：

import type { AppConfig } from "@/config/types";

// 配置是类型安全的
const config: AppConfig = {
  // TypeScript 将强制执行正确的结构
};

📝 最佳实践

  1. 环境变量：对于敏感数据（如API密钥和价格ID），使用环境变量
  2. 类型安全：始终使用提供的TypeScript类型
  3. 一致命名：遵循现有的命名约定
  4. 文档更新：添加新配置选项时更新此文档
  5. 验证：考虑为关键配置值添加运行时验证

🔧 自定义

要自定义配置：

  1. 编辑配置文件：修改 src/config/index.ts
  2. 更新类型：如需要，将新类型添加到 src/config/types.ts
  3. 在应用中使用：通过 import { appConfig } from "@/config" 访问配置
  4. 环境变量：使用 .env 文件进行环境特定值

你的 NEXTDEVKIT 应用程序配置现在已正确记录并准备好进行自定义！🎉

概览

NEXTDEVKIT 配置和定制的综合指南

营销配置

配置营销页面和落地页组件