Demonstrate trailing slash bug for canonical urls

app/bugs/canonical-url-slash/page.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from "next"
+
+export function generateMetadata(): Metadata {
+    return {
+        title: "Dog Breed Viewer",
+        // Note that the bug will only happen if the metadataBase is set and if the resolved URL of 
+        //  of the page is the same as the metadataBase.  So you can only observe the bug with this
+        //  code if running locally.
+        metadataBase: new URL("https://localhost:3000"),
+        description: "View images of different dog breeds",
+        alternates: {			
+			canonical: '/p/12345.html',
+		}
+    }
+}
+
+export default function CanonicalUrlBugPage() {
+    return <h1>Canonical ends with trailing slash</h1>
+}

next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    trailingSlash: true,
+}
 
 module.exports = nextConfig

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "next": "^14.3.0-canary.22",
+    "next": "^14.2.3",
     "react": "^18",
     "react-dom": "^18"
   },