Cannot create app router localized sitemap

arvinpoddar commented 5 months ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/elastic-wave-5d4hkj?workspaceId=b7d16bab-058a-4b6f-b4f8-cb3182273009

To Reproduce

Create a new Next.js app with npx create-next-app@latest (accept all the default settings)
Create a new app/sitemap.ts file
Copy and paste the example from: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts. This will work when you visit localhost:3000/sitemap.xml
Now, copy and paste the localized example: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-localized-sitemap. This will not work. Remove all the alternates, and it works again.

Current vs. Expected behavior

We would expect to see a sitemap with localized alternates when we visit localhost:3000/sitemap.xml. Instead, visiting this route results in a plain text result, with a Uncaught TypeError: Cannot read properties of null (reading 'childNodes') error in the browser console.

CleanShot 2024-06-18 at 21 40 33

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.0-canary.37 // Latest available version is detected (15.0.0-canary.37).
  eslint-config-next: N/A
  react: 19.0.0-rc-6f23540c7d-20240528
  react-dom: 19.0.0-rc-6f23540c7d-20240528
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This issue is a duplicate of: https://github.com/vercel/next.js/issues/65817

jerico-wf commented 5 months ago

I'm facing the same problem too. However when inspecting the network response, the XML looks valid

and running the sitemap.xml link to a sitemp checker like https://www.mysitemapgenerator.com/service/check.html, it passes

Not an expert but I assume this is functionally working, the browser just shows an error displaying the xml

uraden commented 4 months ago

Were you able to resolve this issue? Google search console is not seeing localized versions of the page?

ProjectINT commented 2 months ago

I have same issue. If create sitemap with alternates (i use version 14.2.11.) Sitemap example not looks as xml document. Looks as headers problem

prokopsimek commented 4 weeks ago

Related to #67813

Dexmaster commented 1 week ago

@jerico-wf XML is not 100% valid because Chrome cannot process schema with self-closing tags.

Schema URLs http://www.sitemaps.org/schemas/sitemap/0.9 and http://www.w3.org/1999/xhtml are redirected to https which prevents XML viewer from processing them correctly, the fix would be replacing http with https in sitemap template which is currently hardcoded in Next.

Preview:

You can also test it on your own, save source as XML file locally:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://example.com/en-US/</loc>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<lastmod>2024-11-13T16:59:12.181Z</lastmod>
<changefreq>daily</changefreq>
<priority>1</priority>
</url>
</urlset>

vs

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="https://www.w3.org/1999/xhtml">
<url>
<loc>https://example.com/en-US/</loc>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<lastmod>2024-11-13T16:59:12.181Z</lastmod>
<changefreq>daily</changefreq>
<priority>1</priority>
</url>
</urlset>

vercel / next.js