自定义网站基础信息

概述

Nexty.dev 采用集中式配置管理，让你只需要修改几个文件就能控制整个网站的品牌信息和 SEO 设置。

与网站品牌信息、SEO 设置有关的文件如下：

nexty-wenext/
├── config/
│   └── site.ts                    # 网站基础配置（域名、作者、社交链接等）
├── lib/
│   └── metadata.ts                # 元数据生成工具
├── i18n/
│   └── routing.ts                 # 多语言配置
├── public/
│   ├── logo.png                   # 网站 logo
│   ├── favicon.ico                # 网站 ico
│   ├── og.png                     # 默认语言（英语）版 OG 图片
│   ├── og_zh.png                  # 中文版 OG 图片
│   └── og_ja.png                  # 日文版 OG 图片
└── app/
    └── [locale]/
        └── layout.tsx             # 📄 使用示例

其中，关于 metadata 元数据生成的文档请查看这篇文档。

站点配置

网站品牌信息统一配置文件在 config/site.ts。

网站信息配置说明

config/site.ts

import { SiteConfig } from "@/types/siteConfig";
 
// 网站基础 URL（必填）
export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";
 
// 社交媒体链接（选填）
const GITHUB_URL = ''
const TWITTER_URL = ''
const YOUTUBE_URL = ''
const INSTAGRAM_URL = ''
const TIKTOK_URL = ''
const DISCORD_URL = ''
const EMAIL_URL = '[email protected]'
 
export const siteConfig: SiteConfig = {
  // 网站名称（会出现在页面标题中）
  name: "Nexty.dev",
  // 网站标语（可选，首页标题会用到）
  tagLine: "Build and ship your SaaS faster",
  // 网站描述（可选，默认会用多语言文件）
  description: "Next.js SaaS starter template with authentication, payments, and more.",
  // 网站 URL（必填）
  url: BASE_URL,
  // 作者信息（用于 SEO）
  authors: [
    {
      name: "nexty.dev",
      url: BASE_URL,
    }
  ],
  // 创建者（Twitter 用户名）
  creator: '@judewei_dev',
  // 社交媒体链接，默认展示在 `components/footer/Footer.tsx`
  socialLinks: {
    github: GITHUB_URL,
    twitter: TWITTER_URL,
    youtube: YOUTUBE_URL,
    instagram: INSTAGRAM_URL,
    tiktok: TIKTOK_URL,
    discord: DISCORD_URL,
    email: EMAIL_URL,
    // 你可以添加更多社交链接，添加后需前往 `components/footer/Footer.tsx` 补充跳转链接
    linkedin: '',
    facebook: '',
  },
  // 主题颜色（浏览器地址栏/任务切换器颜色）
  themeColors: [
    { media: '(prefers-color-scheme: light)', color: 'white' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
  // 网站默认主题（light | dark | system）
  defaultNextTheme: 'light',
  // 图标配置
  icons: {
    icon: "/favicon.ico",        // 浏览器标签页图标
    shortcut: "/logo.png",        // 快捷方式图标
    apple: "/logo.png",           // iOS 添加到主屏幕图标
  },
}

配置项详解

1. BASE_URL - 网站地址

config/site.ts

export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";

作用：

用于生成所有绝对 URL（canonical、OG 图片链接等）
影响 SEO 和社交媒体分享
部署到生产环境时，必须设置正确的域名

2. name - 网站名称

config/site.ts

name: "Nexty.dev"

作用：

出现在页面标题中：{name} - {tagLine} 和 页面名 | {name}
出现在 OG 卡片的 siteName 字段

示例：

首页：Nexty.dev - Build and ship your SaaS faster
其他页：About | Nexty.dev

3. tagLine - 网站标语

config/site.ts

tagLine: "Build and ship your SaaS faster"

作用：

仅在首页标题中使用：网站名 - 标语

4. socialLinks - 社交媒体链接

config/site.ts

socialLinks: {
  github: 'https://github.com/yourusername',
  twitter: 'https://twitter.com/yourusername',
  // ...
}

作用：

在 Footer 组件中显示社交媒体图标
留空字符串表示不显示该图标

支持的平台：

GitHub、Twitter、YouTube、Instagram、TikTok
Discord、Email、LinkedIn、Facebook
可自行扩展，扩展需同步修改 site.ts 和 Footer.tsx

5. themeColors - 主题颜色

config/site.ts

themeColors: [
  { media: '(prefers-color-scheme: light)', color: 'white' },
  { media: '(prefers-color-scheme: dark)', color: 'black' },
]

作用：

设置浏览器地址栏/任务切换器的颜色
在移动设备上特别明显

可以设置为品牌色：

config/site.ts

themeColors: [
  { media: '(prefers-color-scheme: light)', color: '#3b82f6' },
  { media: '(prefers-color-scheme: dark)', color: '#1e40af' },
]

6. icons - 图标配置

config/site.ts

icons: {
  icon: "/favicon.ico",        // 浏览器标签页图标
  shortcut: "/logo.png",        // 快捷方式图标
  apple: "/logo.png",           // iOS 主屏幕图标
}

推荐尺寸：

favicon.ico：32×32 或 64×64
logo.png：512×512（透明背景）

网站配置信息的类型定义在 types/siteConfig.ts，如果你要扩展字段，需要同步修改类型定义。

Logo 生成

推荐多尺寸 Icon 生成工具：

https://icon.kitchen
https://realfavicongenerator.net/
https://logo.surf
https://ray.so/icon?q=
https://www.bitbug.net/ （PNG to Favicon）

将生成的 Logo 和 ico 文件保存到 public 文件夹，替换掉模板自带的 Logo 图。

OG Image 配置与创建

OG (Open Graph) Image 是当你的网站链接在社交媒体（Twitter、Facebook、LinkedIn 等）分享时显示的预览图片。

示例效果：

显示预览图片能够更快吸引潜在用户点击。

文件位置与命名规则

public/
├── og.png           # 英文版（默认）
├── og_zh.png        # 中文版
└── og_ja.png        # 日文版

规则：

默认语言（英文）：og.png
其他语言：og_{locale}.png（例如：og_zh.png、og_ja.png）

创建 OG Image

无需变化的 OG Image 可以使用在线工具生成，如：

动态生成的 OG Image 可以使用 next/og 生成，可参考导航站模板的 opengraph-image.tsx 文件。

测试 OG Image

首次分享后，社交平台会缓存图片。如果修改了图片，也可以在上述工具中刷新缓存。

自定义网站基础信息

概述

站点配置

网站信息配置说明

配置项详解

Logo 生成

OG Image 配置与创建

文件位置与命名规则

创建 OG Image

测试 OG Image

相关配置

Metadata

多语言