Subdomain Previews Implementation (#347)

Author: steven-tey

README.md

@@ -35,6 +35,7 @@ https://github.com/vercel/platforms/assets/28986134/bd370257-0c27-4cf5-8a56-2858
 5. **Custom styles**: Custom fonts, 404 pages, favicons, sitemaps for each site via the [Next.js file-based Metadata API](https://nextjs.org/docs/app/api-reference/file-conventions/metadata)
 6. **Dynamic OG Cards**: Each blog post comes with a dynamic OG image powered by [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
 7. **Dark Mode**: For a better user experience at night
+8. **Multi-tenant Preview URLs**: Preview changes to your client sites using [Vercel Preview URLs](https://vercel.com/docs/deployments/generated-urls). [Learn more](https://vercel.com/guides/nextjs-multi-tenant-application#3.-multi-tenant-preview-urls).
 
 <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://images.ctfassets.net/e5382hct74si/k7XpXIE0rDsHCAYvkKhff/ff44c07588068d8fefa334cd6a318c8a/CleanShot_2023-07-05_at_08.39.02.png">
@@ -83,7 +84,7 @@ These are content-heavy platforms (blogs) with simple, standardized page layouts
 > “With Vercel, we spend less time managing our infrastructure and more time delivering value to our users.” — Sandeep Panda, Co-founder, Hashnode
 
 1. [Hashnode](https://hashnode.com)
-2. [Mirror.xyz](https://mirror.xyz/)
+2. [Mintlify](https://mintlify.com/)
 3. [Read.cv](https://read.cv/)
 
 ### 2. Website & e-commerce store builders
@@ -104,7 +105,7 @@ With Vercel and Next.js, platforms like [Instatus](https://instatus.com) are abl
 
 1. [Instatus](https://instatus.com/)
 2. [Cal.com](https://cal.com/)
-3. [Dub](https://dub.sh/)
+3. [Dub](https://dub.co/)
 
 ## Built on open source
 

app/[domain]/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 
 import { truncate } from "@/lib/utils";
-import { ImageResponse } from "next/server";
+import { ImageResponse } from "next/og";
 import { sql } from "@vercel/postgres";
 
 export const runtime = "edge";

components/form/delete-post-form.tsx

@@ -3,7 +3,7 @@
 import LoadingDots from "@/components/icons/loading-dots";
 import { cn } from "@/lib/utils";
 import { useParams, useRouter } from "next/navigation";
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
+import { useFormStatus } from "react-dom";
 import { toast } from "sonner";
 import { deletePost } from "@/lib/actions";
 import va from "@vercel/analytics";

components/form/delete-site-form.tsx

@@ -3,7 +3,7 @@
 import LoadingDots from "@/components/icons/loading-dots";
 import { cn } from "@/lib/utils";
 import { useParams, useRouter } from "next/navigation";
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
+import { useFormStatus } from "react-dom";
 import { toast } from "sonner";
 import { deleteSite } from "@/lib/actions";
 import va from "@vercel/analytics";

components/form/index.tsx

@@ -4,7 +4,7 @@ import LoadingDots from "@/components/icons/loading-dots";
 import { cn } from "@/lib/utils";
 import { useSession } from "next-auth/react";
 import { useParams, useRouter } from "next/navigation";
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
+import { useFormStatus } from "react-dom";
 import { toast } from "sonner";
 import DomainStatus from "./domain-status";
 import DomainConfiguration from "./domain-configuration";

components/modal/create-site.tsx

@@ -3,7 +3,7 @@
 import { toast } from "sonner";
 import { createSite } from "@/lib/actions";
 import { useRouter } from "next/navigation";
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
+import { useFormStatus } from "react-dom";
 import { cn } from "@/lib/utils";
 import LoadingDots from "@/components/icons/loading-dots";
 import { useModal } from "./provider";

components/report-abuse.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 import { AlertTriangle } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
+import { useFormStatus } from "react-dom";
 import LoadingDots from "./icons/loading-dots";
 import va from "@vercel/analytics";
 import { toast } from "sonner";

middleware.ts

@@ -18,10 +18,20 @@ export default async function middleware(req: NextRequest) {
   const url = req.nextUrl;
 
   // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
-  const hostname = req.headers
+  let hostname = req.headers
     .get("host")!
     .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);
 
+  // special case for Vercel preview deployment URLs
+  if (
+    hostname.includes("---") &&
+    hostname.endsWith(`.${process.env.NEXT_PUBLIC_VERCEL_DEPLOYMENT_SUFFIX}`)
+  ) {
+    hostname = `${hostname.split("---")[0]}.${
+      process.env.NEXT_PUBLIC_ROOT_DOMAIN
+    }`;
+  }
+
   const searchParams = req.nextUrl.searchParams.toString();
   // Get the pathname of the request (e.g. /, /about, /blog/first-post)
   const path = `${url.pathname}${

package.json

@@ -26,7 +26,7 @@
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.244.0",
     "nanoid": "^4.0.2",
-    "next": "13.5.5-canary.0",
+    "next": "14.0.1",
     "next-auth": "4.23.1",
     "next-mdx-remote": "^4.4.1",
     "novel": "^0.1.22",
@@ -49,7 +49,7 @@
     "@types/js-cookie": "^3.0.3",
     "@types/node": "^20.4.1",
     "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react-dom": "^18.2.15",
     "autoprefixer": "^10.4.14",
     "eslint": "8.31.0",
     "eslint-config-next": "^13.4.9",