跳轉到內容

Next.js 16 多語言網站模板：內置 i18n 國際化、MDX 博客、郵件訂閱、SEO 優化

nextjs
nextjs模板
next模板
nextjs啟動模板
多語言網站
i18n
國際化
出海
mdx博客
seo優化
metadata
open-graph
tailwindcss
typescript
vercel部署
react模板
網站模板
郵件訂閱
newsletter
resend
谷歌分析
百度統計
adsense

Info

一個開箱即用的 Next.js 16 啟動模板，支持中英日三語國際化、MDX 博客、Resend 郵件訂閱、暗黑模式、SEO 優化。適合出海項目、個人博客、落地頁開發。

為什麼需要一個 Next.js 啟動模板？

從零開始搭建一個現代化網站太費時了。你需要設定路由、樣式、國際化、SEO、資料分析……每一項都要花費大量時間。

Next.js Starter 是一個極簡的多語言 Next.js 16 啟動模板，專為快速搭建小型網站而設計。無論是免費工具站、內容站、個人博客，還是產品落地頁，克隆即用，幾分鐘就能上線。

💡 實力驗證：這套模板被 SEO 專家哥飛社群 2025 年網站比賽冠軍（年度流量 Top1）採用，5 個月斬獲 526 萬獨立訪客！

核心功能一覽

🌐 開箱即用的國際化 (i18n)

做出海項目最頭疼的就是多語言支持。這個模板基於 next-intl 提供了開箱即用的國際化支持：

添加新語言只需三步：

  1. 在 i18n/messages/ 創建翻譯文件
  2. 更新路由設定
  3. 添加對應語言的內容

📝 MDX 博客系統

用 MDX 寫博客，兼具 Markdown 的簡潔和 React 組件的強大：

🎨 現代化 UI 設計

模板採用 Tailwind CSS + shadcn/ui 組件庫：

⚙️ 集中式網站設定

所有網站資訊集中在一個文件 config/site.ts：

TYPESCRIPT
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 標籤等所有地方自動同步。

📄 開箱即用的法律頁面

每個網站都需要法律合規頁面，模板已經準備好了多語言模板：

每個頁面都支持中英日三語，只需修改 MDX 內容即可。

🔍 SEO 基礎設施

模板包含實用的 metadata 工具函數 (lib/metadata.ts)，幫你處理：

只需調用 constructMetadata() 傳入頁面資訊，即可生成完美的 SEO 元資料。

📊 一行代碼接入資料分析

支持主流資料分析平臺，只需在 .env 中設定 ID：

Command
NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXX NEXT_PUBLIC_ENABLE_ADS=trueNEXT_PUBLIC_GOOGLE_ADSENSE_ID=XXXXXXXXNEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_DEFAULT=XXXXXXXX# 可選：按廣告位單獨設定 slot# NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_TOP=...# NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_MID=...# NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_BOTTOM=...# NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_LIST=...# 舊變量名依然兼容：# NEXT_PUBLIC_GOOGLE_ADSENSE=ca-pub-XXXXXXXX NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.comNEXT_PUBLIC_PLAUSIBLE_SRC=https://

支持的平臺：

每個分析組件只在生產環境加載，開發時不會干擾調試。

📧 郵件訂閱 (Resend)

模板內置了簡單的郵件訂閱功能，幫你從第一天就開始積累使用者：

郵件功能基於 Resend —— 一個專為開發者設計的現代郵件 API。只需設定環境變量：

Command
RESEND_API_KEY=你的_resend_api_keyRESEND_AUDIENCE_ID=你的_audience_id

模板還在 emails/ 文件夾提供了預置的 React 郵件模板：

技術棧

精簡但實用的技術棧：

技術用途
Next.js 16React 框架，App Router
TypeScript類型安全開發
Tailwind CSS原子化 CSS
shadcn/ui高質量 UI 組件
next-intl國際化
MDX內容編寫
Zustand狀態管理
Resend郵件服務

5 分鐘快速開始

環境要求

安裝步驟

Command
# 克隆倉庫git clone https://github.com/weijunext/nextjs-starter.gitcd nextjs-starter # 安裝依賴pnpm install # 複製環境變量cp .env.example .env # 啟動開發服務器pnpm dev

訪問 http://localhost:3000，你的網站就跑起來了！

一鍵部署到 Vercel

最快的上線方式是使用 Vercel 一鍵部署：

Deploy with Vercel

項目結構

TEXT
nextjs-starter/├── app/[locale]/     # 國際化頁面├── blogs/            # 按語言分類的 MDX 博客├── components/       # 可複用的 React 組件├── config/           # 網站設定├── content/          # 靜態頁面內容 (MDX)├── i18n/             # 翻譯文件和路由設定├── lib/              # 工具函數└── public/           # 靜態資源

適合誰用？

這個模板特別適合需要快速上線小型網站的場景：

💭 需要使用者系統、支付、資料庫？ 這個模板保持極簡，不包含這些功能。如果你要做需要使用者登錄、訂閱付費的 SaaS 產品，可以看看 NEXTY.DEV，它基於同樣的技術架構，集成了 Better-Auth、Drizzle ORM、Stripe/Creem 等。簡單理解：這個免費模板適合需求簡單的小網站，NEXTY 適合功能複雜的產品站。

為什麼選擇這個模板？

相比其他模板，這個模板的特點是：

  1. 極簡：只包含建站必需的基礎功能，沒有多餘的複雜度
  2. 快：克隆即用，幾分鐘就能部署上線
  3. 經過驗證：被多個成功產品採用，包括 SEO 大賽冠軍項目（5 個月 526 萬 UV）
  4. 持續維護：緊跟 Next.js 最新版本

相關資源

總結

別浪費時間在重複的基礎設定上。

這個模板只做一件事：幫你用最短時間上線一個多語言小網站。國際化、博客、SEO、資料分析、郵件訂閱——該有的基礎功能都有，不該有的複雜功能都沒有。克隆、改設定、部署，今天就上線。

有問題或建議？歡迎在 GitHub 上提 Issue，或加入我們的 Discord 社區。