方案简介

Next.js Starter 是一个轻量的 Next.js 16 多语言启动模板，帮助你快速构建面向全球的网站。它面向需要同时服务中文、英文、日语用户的开发者与团队，把多语言路由、国际化文案、MDX 博客、SEO 优化、深浅色主题和响应式 UI 等常见需求提前整合完毕。

技术栈上，模板基于 Next.js 16 (App Router) 与 TypeScript，样式采用 Tailwind CSS + Shadcn/ui，国际化使用 next-intl，内容使用 MDX，状态管理用 Zustand，部署推荐 Vercel。统计分析则集成 Google Analytics、Baidu Analytics、Google Adsense 与 Vercel Analytics，通过环境变量按需开启。

适合希望快速搭建面向全球的内容型网站、博客或产品官网，又不想从零搭建 i18n 与 SEO 基础设施的开发者。如果你需要功能完备的全栈启动模板（含定价面板、AI 开发环境、企业级 CMS、身份验证、支付系统等），作者还提供了高级版 NEXTY.DEV。

亮点与能力

• 🌐 内置多语言支持 (中文、英文、日语)
• 🎨 基于 Tailwind CSS 的现代 UI 设计
• 🌙 深色/浅色主题切换
• 📱 响应式布局
• 📝 MDX 博客系统
• 🔍 SEO 优化
• 📊 集成多个统计分析工具（Google Analytics、Baidu Analytics、Google Adsense、Vercel Analytics）

组成与分工

• Next.js 16 (App Router)：核心框架，提供路由、服务端渲染和静态生成
• TypeScript：开发语言，提供类型检查
• Tailwind CSS + Shadcn/ui：样式方案与基础 UI 组件
• next-intl：国际化方案，负责多语言路由与翻译
• MDX：博客与静态页面内容载体
• Zustand：状态管理
• Vercel：推荐部署平台

前置要求

• Node.js 20.9 或更高版本
• pnpm 9.0 或更高版本（推荐）

注意: 项目已配置 packageManager 字段，推荐使用 pnpm 以获得最佳体验。

实施步骤

1. 克隆项目

bash
git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter

2. 启用 Corepack (推荐)

bash
corepack enable

3. 安装依赖

bash
pnpm install

或使用其他包管理器

npm install
yarn

4. 复制环境变量文件

bash
cp .env.example .env

5. 启动开发服务器

bash
pnpm dev

或 npm run dev

访问 http://localhost:3000 查看你的应用。

6. 基础配置

• 修改 config/site.ts 配置网站信息
• 修改 public/ 下的图标和 logo
• 更新 app/sitemap.ts 配置站点地图
• 更新 app/robots.ts 配置 robots.txt

7. 多语言配置

• 在 i18n/messages/ 下添加或修改语言文件
• 在 i18n/routing.ts 中配置支持的语言
• 在 middleware.ts 中配置多语言路由
• 在 app/[locale]/ 目录下创建页面
• 多语言页面使用 i18n/routing.ts 导出的 Link 组件替代 next.js 的

使用与配置要点

博客文章

在 blog/[locale] 目录下创建 MDX 文件，支持 frontmatter 字段：

markdown

---

title: 文章标题
description: 文章描述
image: /image.png
slug: /url-path
tags: tag1,tag2
date: 2025-02-20
visible: published
pin: true

---

文章内容...

可参考类型定义 types/blog.ts 确认支持的字段。

静态页面

在 content/[page]/[locale].mdx 下管理静态页面内容。

统计分析

在 .env 文件中配置相应的 ID 即可启用：

NEXT_PUBLIC_GOOGLE_ANALYTICS=
NEXT_PUBLIC_BAIDU_TONGJI=
NEXT_PUBLIC_GOOGLE_ADSENSE=

多语言开发

新增语言支持：

• 在 i18n/messages/ 添加新的语言文件
• 更新 i18n/routing.ts 配置
• 在 blog/ 和 content/ 下创建对应语言目录

使用翻译：

tsx
import { useTranslations } from 'next-intl';

export default function MyComponent() {
const t = useTranslations('namespace');

部署到 Vercel

1. 推送代码到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量
4. 部署

其他平台部署：

bash

构建生产版本

pnpm build

启动生产服务器

pnpm start

注意事项与常见问题

包管理器

• 项目已配置 packageManager: "pnpm@10.12.4"
• 团队成员应使用相同版本的 pnpm

包管理器版本不一致时：

bash

删除 node_modules 和 lockfile

rm -rf node_modules pnpm-lock.yaml

重新安装

pnpm install

MDX 文件不显示

• 检查文件路径是否正确
• 确认 frontmatter 格式正确
• 检查 visible 字段是否设置为 published

多语言路由问题

• 确保使用 i18n/routing.ts 中的 Link 组件
• 检查 middleware.ts 配置

样式不生效

• 确认 Tailwind CSS 类名拼写正确
• 检查是否需要重启开发服务器

环境变量问题

确保 .env 文件包含必要的配置。

代码规范

bash

代码检查

pnpm lint

类型检查

pnpm type-check

优缺点

• ✓ 内置中英日多语言支持
• ✓ 完整 SEO 优化方案
• ✕ 仅模板，非完整业务系统

出处

本方案挖掘自开源项目 weijunext/nextjs-starter，方案内容与实施命令均来自其 README 原文。