Make metadataBase dynamic for dev/preview environments

Use VERCEL_URL for preview deployments, localhost for development, and production URL as fallback. This allows OpenGraph images to work in all environments without hardcoding to production.

Co-authored-by: oBusk <[email protected]>

Author: Copilot

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/layout.tsx

@@ -8,7 +8,13 @@ import Header from "./_layout/Header";
 import "./globals.css";
 
 export const metadata: Metadata = {
-    metadataBase: new URL("https://npm-diff.app"),
+    metadataBase: new URL(
+        process.env.VERCEL_URL
+            ? `https://${process.env.VERCEL_URL}`
+            : process.env.NODE_ENV === "development"
+              ? "http://localhost:3000"
+              : "https://npm-diff.app",
+    ),
     applicationName: "npm-diff.app",
     title: {
         default: "npm-diff.app 📦🔃",