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.

Spread the love