🔧 阿川の電商水電行
標題：我花了 30 個小時建立了一個 Next.js 樣板程式碼，讓你 30 分鐘就能發布
已發布：是
描述：一個完整的 Next.js 入門模板，包含 i18n、RBAC 以及所有你需要的功能，幫助你更快發布產品。
標籤：Nextjs、TypeScript、網路開發、開源
封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqn07o39ssdrp9xps988.jpg
那個讓我夜不能眠的問題
你有沒有過這樣的感覺：啟動一個新的 Next.js 專案，然後花第一週時間進行各種設定？身份驗證、國際化、角色管理、SEO 配置……等你把這些樣板工作都做完，最初的興奮感早就消失了。
一行程式碼即可實現：類型安全的 i18n（支援 RTL）→ 基於角色的存取控制 → SEO 就緒的元資料 → 深色模式主題 → ESLint 配置 → shadcn/ui 元件 → 全部針對生產環境進行了最佳化，隨時可以發布。
我去過那裡。太多次了。
今年推出第三個SaaS專案後，我意識到我一直在重複複製貼上相同的設定碼。所以我決定對此進行改進。
我建造的
來看看我這款可用於生產環境的 Next.js 樣板程式碼——它不僅僅是另一個「hello world」入門模板，而是一個功能齊全的基礎框架，可以處理所有枯燥乏味的事情，讓您可以專注於建立真正的產品。
🔗線上示範| 📦 GitHub 程式碼庫
為什麼這個樣板程式碼會有所不同
🌍 真正的國際化（不只是字典）
我指的是類型安全的翻譯，它可以在編譯時捕獲錯誤。再也不會因為輸錯鍵而導致生產環境中出現翻譯錯誤了。
它之所以特別，是因為它：
-
內建三種語言：英語、孟加拉語和阿拉伯語。
-
真正有效的 RTL 支援：阿拉伯語佈局會自動切換到從右到左的佈局
-
語言切換極為簡單：一鍵切換，無需重新載入頁面
-
由 i18next 和 TypeScript 提供支援：當缺少翻譯時，您的 IDE 會直接通知您。
// TypeScript knows all your translation keys
t('navigation.home') // ✅ Works
t('navigation.homer') // ❌ Compile error - typo caught!🔐 可擴展的基於角色的存取控制
大多數教程只教你基本身份驗證就結束了。但如果你需要為使用者和管理員設定不同的儀錶板呢？或者，如果你以後想加入「版主」角色呢？
我使用了Next.js 15 的平行路由功能，讓這個過程變得輕鬆許多：
app/
(protected)/
@admin/ # Admin-only views
dashboard/
@user/ # User views
dashboard/
layout.tsx # Smart routing logic版面配置會根據使用者角色自動顯示正確的儀錶板。沒有到處亂放的條件語句。想要新增角色？只需建立一個新的並行路由資料夾即可。就這麼簡單。
🎨 一個不糟糕的設計系統
我使用shadcn/ui 的原因是：
-
元件可直接複製貼上（無臃腫的依賴項）
-
完全支援 TypeScript
-
預設可存取（符合 WCAG 標準）
-
無需修改 CSS 即可輕鬆自訂
此外，我還加入了透過系統偏好檢測實現的淺色/深色模式。
🔧 真正有用的 ESLint（而不是令人厭煩的）
說實話，大多數 ESLint 配置要么過於嚴格，要么過於寬鬆。我花時間配置了一些規則，這些規則：
-
找出真正的錯誤（未使用的變數、缺少的依賴項、潛在的空引用）
-
強制執行一致性（匯入順序、命名規則、格式）
-
不要妨礙你（不會發布無關緊要的煩人警告）
-
使用 Next.js 15 （完善的應用程式路由支援、伺服器元件規則）
配置包括：
-
eslint-config-next- Next.js 官方規則 -
TypeScript 特有的 linting
-
導入排序和整理
-
React Hooks 的最佳實踐
-
無障礙檢查 (a11y)
執行npm run lint可以獲得有意義的回饋，而不是噪音。
📊 真正可用的 SEO 配置
我沒有到處硬編碼元資料，而是建立了一個單獨的 JSON 設定檔來處理：
-
Open Graph 標籤
-
Twitter 卡片
-
結構化資料（JSON-LD）
-
多語言元標籤
-
規範網址
-
動態網站地圖生成
只需編輯一個文件：
{
"appName": "Your App",
"title": "Your Title",
"description": "Your Description",
"domain": "https://yoursite.com",
"keywords": ["your", "keywords"],
"social": {
"twitter": "@yourhandle"
}
}搞定。 SEO已完成。
如何入門（真正的入門方式）
步驟 1：複製並安裝
# Grab the code
git clone https://github.com/salmanshahriar/nextjs-boilerplate-production-ready.git
cd nextjs-boilerplate
# Install dependencies (use whatever you prefer)
npm install
# or bun install / yarn install / pnpm install步驟 2：設定您的專案
大多數模板在這裡都會讓你不知所措。但這個模板不會。
編輯app/SEO/app-main-meta-data.json ：
{
"appName": "My Awesome SaaS",
"title": "Revolutionary Product That Does X",
"description": "We help Y achieve Z",
"domain": "https://myawesomesaas.com",
"organization": {
"name": "My Company",
"email": "[email protected]"
},
"social": {
"twitter": "@myhandle",
"github": "https://github.com/myhandle"
}
}這就是你全部的品牌配置訊息，只有一個檔案。
步驟 3：自訂語言（可選）
想加入西班牙語？方法如下：
- 建立
locales/es/common.json：
{
"navigation": {
"home": "Inicio",
"about": "Acerca de"
}
}- 更新
app-main-meta-data.json：
{
"languages": {
"supported": ["en", "bn", "ar", "es"],
"locales": {
"es": {
"code": "es",
"name": "Spanish",
"nativeName": "Español",
"locale": "es_ES",
"direction": "ltr"
}
}
}
}- 更新
lib/i18n.ts，使其包含“es”。
完成。您的應用程式現在可以說西班牙語了。
第四步：設定角色
此模板包含使用者和管理員角色。新增更多角色：
- 建立一個新的並行路由資料夾：
mkdir -p app/(protected)/@moderator/dashboard-
將你的頁面加入到該資料夾中
-
更新
app/(protected)/layout.tsx以處理新角色：
if (role === 'MODERATOR') return moderator你真的只要這樣做就夠了。
第五步：執行它
npm run dev開啟http://localhost:3000 ，即可看到完整配置的應用程式正在運作。
專案結構（以簡單易懂的方式解釋）
app/
(protected)/ # Everything behind auth
@admin/ # Admin-only pages
@user/ # User pages
layout.tsx # Smart routing happens here
SEO/ # Your SEO brain
app-main-meta-data.json
layout.tsx # Root layout (theme, i18n setup)
page.tsx # Landing page
components/ # Your UI components
ui/ # shadcn/ui components
locales/ # Translation files
en/, bn/, ar/ # One folder per language
lib/ # Utilities and config
i18n.ts # i18n setup
utils.ts # Helper functions盒子裡裝的是什麼
✅ Next.js 15 版本，包含應用程式路由和伺服器元件
✅ TypeScript配置正確（已啟用嚴格模式）
✅ 具有合理配置的Tailwind CSS
✅ 使用 Next.js 15、TypeScript 和 a11y 規則的ESLint
✅ 支援型別安全性和 RTL 的i18n
✅ 具有平行路由架構的基於角色的存取控制 (RBAC)
✅ 基於 JSON 配置的SEO
✅深色模式，並偵測系統偏好設定
✅可存取的元件來自 shadcn/ui
✅生產環境最佳化（程式碼分割、延遲載入、影像最佳化）
實話實說：什麼時候該用它？
非常適合：
-
具有多種使用者類型的SaaS產品
-
國際申請
-
需要展現專業形象的MVP
-
你想快速交付的專案
可能不太適合：
-
簡單的落地頁（基礎設施太複雜）
-
具有非常具體身份驗證要求的專案（需要進行大量客製化）
-
不需要國際化或角色管理的應用程式
我在建造過程中學到了什麼
-
並行路由被低估了：它們使基於角色的路由比條件渲染更加簡潔。
-
類型安全的國際化值得投入：在編譯時捕獲翻譯錯誤可以節省數小時的除錯時間。
-
JSON 設定 > 硬編碼值：當您可以透過編輯一個檔案來變更整個 SEO 策略時，您的行動速度會更快。
-
模板應該體現個人觀點：選項太多會導致決策疲勞。我已經替你做了艱難的抉擇，所以你不用再為此煩惱。
貢獻與支持
發現 bug？想新增功能？該程式碼庫完全開源：
🐛報告問題
最後想說的話
我開發這個工具是因為我厭倦了為每個專案建立相同的基礎設施。如果你正在發布產品，又不想花兩週時間寫樣板程式碼，不妨試試它。
它大概幫我節省了最近三個專案中的30多個小時。也許對你也有幫助。
您在啟動一個新的 Next.js 專案時遇到的最大痛點是什麼？請在下方留言——我一直在努力改進這方面。
祝您搭建愉快！ 🚀
原文出處：https://dev.to/salmanshahriar/i-built-a-production-ready-nextjs-boilerplate-so-you-dont-have-to-17d3
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
