配置
自定义您的 SaaS 品牌和设置。
NextSaas 旨在易于定制。您可以更改站点的品牌、SEO 元数据、视觉主题、功能开关和分析设置，而无需深入研究复杂的代码。
站点配置
主配置文件位于 src/config/website.ts。此文件控制整个站点和电子邮件中使用的全局元数据。
export const websiteConfig: WebsiteConfig = {
name: "NextSaas", // 您的产品名称
description: "Build your SaaS product faster...", // 默认站点描述
url: env.NEXT_PUBLIC_HOST, // 从环境变量自动配置
author: {
name: "Bonjour", // 您的公司/作者名称
email: "support@nextsaas.dev", // 支持邮箱
},
links: {
github: "https://github.com/...", // 社交链接
twitter: "https://twitter.com/...",
// ...
},
seo: {
// 默认 SEO 配置
title: "NextSaas - Production-Ready SaaS Template",
// ...
},
};更新这些值以匹配您的产品标识。
主题设置
NextSaas 使用 Tailwind CSS 4 进行样式设计。主题颜色和字体在 src/styles/globals.css 中定义为 CSS 变量。
颜色
您可以通过修改 :root (浅色模式) 和 .dark (深色模式) 选择器下的 CSS 变量来自定义调色板。
:root {
/* 主要品牌颜色 */
--primary: oklch(0.5553 0.1455 48.9975);
--primary-foreground: oklch(1 0 0);
/* ... 其他变量 */
}我们使用 OKLCH 颜色空间以获得更好的感知均匀性。您可以使用像 oklch.com 这样的工具生成您的调色板。
字体
要更改字体，请首先使用 next/font/google 在 src/app/layout.tsx 中导入您想要的字体，然后更新 globals.css 中的变量映射。
@theme inline {
--font-sans:
/* 您的字体变量 */ var(--font-sans), ui-sans-serif, system-ui, ...;
}功能开关
NextSaas 包含一个功能开关系统，允许您通过环境变量启用或禁用功能。这些标志定义在 src/lib/features.ts 中。
| 功能 | 环境变量 | 默认值 | 描述 |
|---|---|---|---|
| 通行密钥认证 | ENABLE_PASSKEY | "true" | WebAuthn / 生物识别登录 |
| 删除账户 | ENABLE_DELETE_ACCOUNT | "true" | 允许用户删除其账户 |
| GitHub OAuth | GITHUB_CLIENT_ID | — | 当 ID 和 Secret 都设置时启用 |
| Google OAuth | GOOGLE_CLIENT_ID | — | 当 ID 和 Secret 都设置时启用 |
| 公开存储 | S3_PUBLIC_BUCKET | — | 当 S3 凭证和桶设置后启用 |
| 私有存储 | S3_PRIVATE_BUCKET | — | 当 S3 凭证和桶设置后启用 |
| GitHub 仓库 | GITHUB_REPO_NAME | — | 当仓库名称和令牌设置后启用 |
当功能被禁用时，相应的 UI 元素（按钮、页面、设置项）会自动隐藏。
分析统计
NextSaas 开箱即用地支持两种分析提供商。两者都是可选的 — 只需设置环境变量即可启用。
Google Analytics
NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"Umami
Umami 是一个注重隐私的开源分析替代方案。
NEXT_PUBLIC_UMAMI_SRC="https://your-umami-instance.com/script.js"
NEXT_PUBLIC_UMAMI_WEBSITE_ID="your-website-id"[!TIP] 您可以同时使用两种分析提供商 — 它们独立运行。
SEO 优化
NextSaas 内置了 SEO 最佳实践。
- 元数据：从
websiteConfig自动生成。 - 站点地图：生成于
/sitemap.xml。 - Robots：生成于
/robots.txt。 - Open Graph：支持动态 OG 图片。
- JSON-LD：为搜索引擎提供结构化数据。
您可以使用 Next.js Metadata API 进一步自定义每个页面的 SEO 行为。