Open skworden opened 4 months ago
This is also the case for doing the same with the canonical setting:
alternates: {
canonical: 'https://acme.com',
},
Note: next.config.js has trailingSlash: false
.
As @skworden mentions if you omit metadataBase: new URL('https://acme.com'),
from layout.tsx you can get the canonical to use the url without the trailing slash. If you include the metadataBase your canonical will include the trailing slash.
In order to make it working you need to set up the metadataBase in the root layout
e.g.
metadataBase: new URL('https://acme.com')
Then on your page you only need to use a relative path instead of an otherwise required absolute URL.
alternates: {
canonical: '/test',
},
<link rel="canonical" href="https://acme.com/test"
, without any trailing slashes
More about that here
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/zen-sid-h9llk3
To Reproduce
Add
metadataBase
andopenGraph.url
and export it in the root layout and/or in the root page that is nested in a a route group. Visit your projects homepage.Notes:
trailingSlash
is falseI currently use route group for my root page but I've tested it without the route group and it still has the same issues.
Current vs. Expected behavior
Current output:
<meta content="https://vercel.com/" property="og:url">
Expected output (no trailing slash or trailing slash if it's enabled in next.config):<meta content="https://vercel.com" property="og:url">
According to the docs, there shouldn't be a trailing slash.
If you omit the, tag it won't get set. Meaning, there isn't a way to set the url without Next.js adding a trailing slash.
The only way to get Next to not add the trailing slash it to omit
metadataBase
. However, if you omit the attribute, you get the following warning - metadata.metadataBase is not set for resolving social open graph or twitter images, using "my url set in openGraph.url"Provide environment information
Which area(s) are affected? (Select all that apply)
Metadata (metadata, generateMetadata, next/head)
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local), Vercel (Deployed)
Additional context
My application is deployed on Vercel. It also happens in locally. This is only on the home page. We just omit it on the homepage because of this.