快速參考
| 需求 | 參考文件 |
|---|---|
| HTML/CSS 問題 | html-css.md |
| JavaScript 模式 | javascript.md |
| React/Next.js/框架 | frameworks.md |
| 部署到生產環境 | deploy.md |
| 效能/SEO/無障礙 | performance.md |
關鍵規則
- DOCTYPE 很重要 — 缺少
<!DOCTYPE html>會觸發怪異模式；佈局會無法預期地崩壞 - CSS 特異性勝過層疊 — 無論順序如何，
.class都會覆蓋元素選擇器 - 使用
===而非==— 型別強制轉換會讓"0" == false變為 true - 迴圈中的 Async/await —
forEach不會等待；請使用for...of或Promise.all - CORS 是伺服器端的問題 — 用戶端無法解決；請在伺服器上設定
Access-Control-Allow-Origin - 響應式 = viewport meta — 沒有
<meta name="viewport">，行動裝置會以桌面寬度渲染 - 沒有
preventDefault的表單 — 頁面會重新載入；請在提交處理程式中呼叫e.preventDefault() - 圖片需要尺寸 — 缺少
width/height會導致佈局偏移（CLS 扣分） - HTTPS 或遭封鎖 — 混合內容（HTTPS 頁面上的 HTTP 資源）會被瀏覽器封鎖
- 環境變數洩漏 —
NEXT_PUBLIC_*會暴露給客戶端；切勿為祕密加上此前綴
常見請求
「讓它響應式」 → 使用媒體查詢的行動優先 CSS；在 320px、768px、1024px 測試
「部署到生產環境」 → 參閱 deploy.md 以了解 Vercel/Netlify/VPS 的模式
「修復 CORS 錯誤」 → 伺服器必須傳送標頭；如果您無法控制伺服器，請透過同源代理
「改善效能」 → 執行 Lighthouse 稽核；專注於 LCP、CLS、FID；對摺疊下方圖片進行延遲載入
「新增 SEO」 → 每個頁面設定標題/描述、語義化 HTML、OG 標籤、sitemap.xml
框架決策樹
- 靜態內容，快速建置 → Astro 或純 HTML
- 含 MDX 的部落格/文件 → Astro 或 Next.js App Router
- 需要驗證的互動式應用 → Next.js 或 Remix
- 完整的 SSR/ISR 控制 → Next.js
- 簡單的 SPA，不需要 SEO → Vite + React/Vue