我的個人網站

建立一個個人網站來展示我的項目、技能和經驗。這個網站使用 Next.js、TailwindCSS 和 TypeScript，以 SSG 模式構建。

功能

  • 主題切換：支援深色/淺色模式。
  • 語言本地化 (i18n)：支援英文和中文語言。

技術

  • Next.js 14
  • TailwindCSS
  • Shadcn UI
  • TypeScript
  • SSG（靜態網站生成）

開發心得

  • 挑戰：實現深色模式而不出現閃爍問題。

    • 一開始我嘗試使用 Ant Design 建立網站，但遇到了深色模式閃爍的問題。因此，我需要使用與 TailwindCSS 相關的 UI 框架，因為 TailwindCSS 允許在頁面生成之前為元素設置 dark 類別，從而避免了閃爍問題。我還開始使用更多相關的 UI 庫，例如 Shadcn UI。雖然用戶可能需要自定義一些元件，但比我想像的要容易，因為社群正在快速增長！

  • 挑戰：為中英文添加多語言支援（i18n）。

    • SSG 和 SSR 不同。在 SSR 中，我們可以使用 middleware 和 headers，但 SSG 不行。SSG 是將所有內容「硬編碼」，哈哈。我最初卡在如何在不使用middleware 和 headers的情況下，生成 Next.js 的多語言支持。後來發現這個next-Intl似乎並不支援 SSG。最後我發現其實是自己把事情想得太複雜了。只需要建立一個自定義函式來讀取語言，並從 generateStaticParams 中獲取語言參數就可以了，哈哈！
const supportedLocales = ['en', 'zh-tw'] // 添加你的支援語言
const supportedSlugs = ['1', '2', '3']   // 添加你的支援路徑

// 生成語言和路徑的所有組合
export async function generateStaticParams() {
    const params: any = []
    supportedLocales.forEach((locale) => {
        supportedSlugs.forEach((slug) => {
            params.push({ locale, slug })
        })
    })
    return params
}

export async function generateMetadata({params,}: {
    params: { locale: string; slug: string }
}): Promise<Metadata> {
    const this_project_details = DATA.home_projects_list.find(
        (project) => project.id === Number(params.slug)
    )

    // 這不是一個Function，而是Object
    const getT = await getTranslationMessages(params.locale)
    const t = getT.home.projectDetails
GitHub
LinkedIn