Next.js 16 多语言网站模板：内置 i18n 国际化、MDX 博客、邮件订阅、SEO 优化

nextjs

nextjs模板

next模板

nextjs启动模板

多语言网站

i18n

国际化

出海

mdx博客

seo优化

metadata

open-graph

tailwindcss

typescript

vercel部署

react模板

网站模板

邮件订阅

newsletter

resend

谷歌分析

百度统计

adsense

一个开箱即用的 Next.js 16 启动模板，支持中英日三语国际化、MDX 博客、Resend 邮件订阅、暗黑模式、SEO 优化。适合出海项目、个人博客、落地页开发。

为什么需要一个 Next.js 启动模板？

从零开始搭建一个现代化网站太费时了。你需要配置路由、样式、国际化、SEO、数据分析……每一项都要花费大量时间。

Next.js Starter 是一个极简的多语言 Next.js 16 启动模板，专为快速搭建小型网站而设计。无论是免费工具站、内容站、个人博客，还是产品落地页，克隆即用，几分钟就能上线。

💡 实力验证：这套模板被 SEO 专家哥飞社群 2025 年网站比赛冠军（年度流量 Top1）采用，5 个月斩获 526 万独立访客！

核心功能一览

🌐 开箱即用的国际化 (i18n)

做出海项目最头疼的就是多语言支持。这个模板基于 next-intl 提供了开箱即用的国际化支持：

三语支持：中文、英文、日文开箱即用
路由自动切换：/zh、/en、/ja 自动路由
翻译文件管理：基于 JSON 的翻译配置，简单易维护
语言检测提醒：根据浏览器语言自动提示切换

添加新语言只需三步：

在 i18n/messages/ 创建翻译文件
更新路由配置
添加对应语言的内容

📝 MDX 博客系统

用 MDX 写博客，兼具 Markdown 的简洁和 React 组件的强大：

Frontmatter 支持：标题、描述、标签、日期、可见性控制
置顶文章：重要内容优先展示
草稿模式：写作中的文章不会发布
多语言博客：不同语言可以有不同的文章
自定义组件：在 Markdown 中使用 React 组件

🎨 现代化 UI 设计

模板采用 Tailwind CSS + shadcn/ui 组件库：

响应式设计，适配所有设备
深色/浅色主题切换，跟随系统偏好
简洁专业的视觉风格
CSS 变量配置，易于自定义

⚙️ 集中式网站配置

所有网站信息集中在一个文件 config/site.ts：

export const siteConfig = {
  name: "你的网站名称",
  tagLine: '你的标语',
  description: "网站描述",
  url: BASE_URL,
  authors: [{ name: "你", url: "https://yoursite.com" }],
  socialLinks: { twitter, github, discord, email },
  icons: { icon, shortcut, apple },
}

不用再到处翻文件改信息了。改一处，metadata、footer、Open Graph 标签等所有地方自动同步。

📄 开箱即用的法律页面

每个网站都需要法律合规页面，模板已经准备好了多语言模板：

关于页面 (content/about/)
隐私政策 (content/privacy-policy/)
服务条款 (content/terms-of-service/)

每个页面都支持中英日三语，只需修改 MDX 内容即可。

🔍 SEO 基础设施

模板包含实用的 metadata 工具函数 (lib/metadata.ts)，帮你处理：

动态标题生成，格式规范
自动生成 sitemap.xml
robots.txt 配置
Open Graph 和 Twitter 卡片，支持自定义图片
Canonical URL 和 hreflang 标签，多语言 SEO 必备
自动生成多语言替代链接
服务端渲染，首屏加载快

只需调用 constructMetadata() 传入页面信息，即可生成完美的 SEO 元数据。

📊 一行代码接入数据分析

支持主流数据分析平台，只需在 .env 中配置 ID：

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXX

NEXT_PUBLIC_GOOGLE_ADSENSE=ca-pub-XXXXXXXX

NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
NEXT_PUBLIC_PLAUSIBLE_SRC=https://

支持的平台：

Google Analytics - 追踪用户行为和流量来源
Google AdSense - 内容变现
Plausible Analytics - 隐私友好、GDPR 合规的分析工具
Vercel Analytics - 内置性能监控

每个分析组件只在生产环境加载，开发时不会干扰调试。

📧 邮件订阅 (Resend)

模板内置了简单的邮件订阅功能，帮你从第一天就开始积累用户：

开箱即用的订阅表单：Footer 区域已集成订阅组件
邮箱验证：基础的输入验证和错误处理
Resend 集成：使用现代化邮件 API，发送可靠
欢迎邮件模板：新订阅用户自动发送欢迎邮件
速率限制：基于 Upstash Redis 的防刷机制

邮件功能基于 Resend —— 一个专为开发者设计的现代邮件 API。只需配置环境变量：

RESEND_API_KEY=你的_resend_api_key
RESEND_AUDIENCE_ID=你的_audience_id

模板还在 emails/ 文件夹提供了预置的 React 邮件模板：

newsletter-welcome.tsx - 新订阅用户欢迎邮件
submission-notification.tsx - 产品提交通知邮件

技术栈

精简但实用的技术栈：

| 技术 | 用途 | |------|------| | Next.js 16 | React 框架，App Router | | TypeScript | 类型安全开发 | | Tailwind CSS | 原子化 CSS | | shadcn/ui | 高质量 UI 组件 | | next-intl | 国际化 | | MDX | 内容编写 | | Zustand | 状态管理 | | Resend | 邮件服务 |

5 分钟快速开始

环境要求

Node.js 20.x 或更高版本
pnpm 9.0 或更高版本（推荐）

安装步骤

# 克隆仓库
git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter

# 安装依赖
pnpm install

# 复制环境变量
cp .env.example .env

# 启动开发服务器
pnpm dev

访问 http://localhost:3000，你的网站就跑起来了！

一键部署到 Vercel

最快的上线方式是使用 Vercel 一键部署：

项目结构

nextjs-starter/
├── app/[locale]/     # 国际化页面
├── blogs/            # 按语言分类的 MDX 博客
├── components/       # 可复用的 React 组件
├── config/           # 网站配置
├── content/          # 静态页面内容 (MDX)
├── i18n/             # 翻译文件和路由配置
├── lib/              # 工具函数
└── public/           # 静态资源

适合谁用？

这个模板特别适合需要快速上线小型网站的场景：

免费工具站：做个在线工具，快速上线获取流量
内容站 / SEO 站：用 MDX 写内容，SEO 友好
产品落地页：展示你的产品，收集用户邮箱
个人博客：多语言博客，暗黑模式，开箱即用
外包项目：快速交付简单的客户网站

💭 需要用户系统、支付、数据库？ 这个模板保持极简，不包含这些功能。如果你要做需要用户登录、订阅付费的 SaaS 产品，可以看看 NEXTY.DEV，它基于同样的技术架构，集成了 Better-Auth、Drizzle ORM、Stripe/Creem 等。简单理解：这个免费模板适合需求简单的小网站，NEXTY 适合功能复杂的产品站。

为什么选择这个模板？

相比其他模板，这个模板的特点是：

极简：只包含建站必需的基础功能，没有多余的复杂度
快：克隆即用，几分钟就能部署上线
经过验证：被多个成功产品采用，包括 SEO 大赛冠军项目（5 个月 526 万 UV）
持续维护：紧跟 Next.js 最新版本

总结

别浪费时间在重复的基础配置上。

这个模板只做一件事：帮你用最短时间上线一个多语言小网站。国际化、博客、SEO、数据分析、邮件订阅——该有的基础功能都有，不该有的复杂功能都没有。克隆、改配置、部署，今天就上线。

有问题或建议？欢迎在 GitHub 上提 Issue，或加入我们的 Discord 社区。