Generate Sitemap.xml for Next.js 14

發佈日期: 作者:

🔹 Next.js 14 官方建議的方式

你可以在 src/app/sitemap.ts中，手動定義你的 sitemap 內容。

📌 1️⃣ 建立 sitemap.ts

在 src/app/sitemap.ts新增：

ts複製編輯import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://www.winerva.com'

  return [
    { url: `${baseUrl}/en/about`, lastModified: new Date().toISOString() },
    { url: `${baseUrl}/en/portfolio`, lastModified: new Date().toISOString() },
    { url: `${baseUrl}/en/contact`, lastModified: new Date().toISOString() },
    { url: `${baseUrl}/zh-TW/about`, lastModified: new Date().toISOString() },
    { url: `${baseUrl}/zh-TW/portfolio`, lastModified: new Date().toISOString() },
    { url: `${baseUrl}/zh-TW/contact`, lastModified: new Date().toISOString() },
  ]
}

📌 2️⃣ 確保 sitemap 自動可用

  • 在 Next.js 14，這個 sitemap.ts 會 自動生成 /sitemap.xml。
  • 不需要額外執行 next-sitemap，因為 Next.js 會內建處理 sitemap。

你可以直接開啟：

arduino複製編輯https://www.winerva.com/sitemap.xml

來檢查是否正確。

📌 3️⃣ 確保 robots.txt 指向 sitemap

如果你的 robots.txt 需要包含 sitemap，請確保它正確包含：

arduino複製編輯Sitemap: https://www.winerva.com/sitemap.xml

如果 robots.txt 也是由 Next.js 生成的，可以在 src/app/robots.ts 加入：

ts複製編輯import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
      },
    ],
    sitemap: 'https://www.winerva.com/sitemap.xml',
  }
}

🔥 結論

  • Next.js 14 官方推薦使用 sitemap.ts 來自動產生 sitemap，不需要 next-sitemap。
  • 你應該移除 next-sitemap，直接在 src/app/sitemap.ts 內定義 sitemap。
  • 這樣 /sitemap.xml 會自動生成，不需要額外的 sitemap 生成步驟。

這樣設定後，你可以在 Google Search Console 測試： 👉 https://www.winerva.com/sitemap.xml

這樣更符合 Next.js 14 官方文件 的最佳做法 🚀

Import sitemap to Google Search Console

google search console

you can choice left or right way to input your website address.

google search console

input your website sitemap.xml address.