feat: implement canonical URL handling and middleware for production deployment

Author: spivx

app/new/page.tsx

@@ -2,21 +2,23 @@ import type { Metadata } from "next"
 
 import { StackWizardShell } from "@/components/stack-wizard-shell"
 import { StackWizardClient } from "@/app/new/stack/stack-wizard-client"
+import { absoluteUrl } from "@/lib/site-metadata"
 
 const title = "Launch the DevContext Wizard"
 const description =
   "Start a guided flow to assemble AI-ready coding instruction files. Pick your stack, customize conventions, and export Copilot, Cursor, or agents guidelines in minutes."
+const canonicalUrl = absoluteUrl("/new")
 
 export const metadata: Metadata = {
   title,
   description,
   alternates: {
-    canonical: "/new",
+    canonical: canonicalUrl,
   },
   openGraph: {
     title,
     description,
-    url: "/new",
+    url: canonicalUrl,
     type: "website",
     siteName: "DevContext",
     images: [

app/new/stack/[[...stackSegments]]/page.tsx

@@ -5,6 +5,7 @@ import stacksData from "@/data/stacks.json"
 import type { DataQuestionSource, WizardStep } from "@/types/wizard"
 import { StackWizardShell } from "@/components/stack-wizard-shell"
 import { loadStackWizardStep } from "@/lib/wizard-config"
+import { absoluteUrl } from "@/lib/site-metadata"
 import { StackWizardClient } from "../stack-wizard-client"
 import { StackSummaryPage } from "../stack-summary-page"
 
@@ -58,19 +59,20 @@ export async function generateMetadata({ params }: MetadataProps): Promise<Metad
   }
 
   const canonicalPath = `/new/stack${segments.length > 0 ? `/${segments.join("/")}` : ""}`
+  const canonicalUrl = absoluteUrl(canonicalPath)
   const ogImage = "/og-image.png"
   const imageAlt = stackLabel ? `${stackLabel} DevContext wizard preview` : "DevContext wizard interface preview"
 
   return {
     title,
     description,
     alternates: {
-      canonical: canonicalPath,
+      canonical: canonicalUrl,
     },
     openGraph: {
       title,
       description,
-      url: canonicalPath,
+      url: canonicalUrl,
       type: "website",
       siteName: "DevContext",
       images: [

app/page.tsx

@@ -1,16 +1,51 @@
 import type { Metadata } from "next"
 import Link from "next/link"
 
+import { Github } from "lucide-react"
+
 import { AnimatedBackground } from "@/components/AnimatedBackground"
 import { Hero } from "@/components/Hero"
 import { Button } from "@/components/ui/button"
-import { Github } from "lucide-react"
 import { absoluteUrl } from "@/lib/site-metadata"
 
+const title = "DevContext | Repo-aware AI Coding Guidelines Assistant"
+const description =
+  "Generate AI-ready Copilot instructions, Cursor rules, and developer onboarding docs with a GitHub-aware coding guidelines workflow."
+
 export const metadata: Metadata = {
+  title,
+  description,
+  keywords: [
+    "AI coding guidelines",
+    "Copilot instructions generator",
+    "Cursor rules",
+    "GitHub repo analyzer",
+    "developer onboarding docs",
+  ],
   alternates: {
     canonical: absoluteUrl("/"),
   },
+  openGraph: {
+    title,
+    description,
+    url: absoluteUrl("/"),
+    type: "website",
+    siteName: "DevContext",
+    images: [
+      {
+        url: absoluteUrl("/og-image.png"),
+        width: 1200,
+        height: 630,
+        alt: "DevContext AI coding guidelines assistant preview",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title,
+    description,
+    images: [absoluteUrl("/og-image.png")],
+  },
 }
 
 export default function LandingPage() {

components/Hero.tsx

@@ -84,21 +84,21 @@ export function Hero() {
           variants={itemVariants}
         >
           <span className="inline-flex h-1.5 w-1.5 rounded-full bg-primary" />
-          Less setup. Sharper AI outputs.
+          Guided setup for AI coding guidelines.
         </motion.span>
 
         <motion.h1
           className="mx-auto max-w-4xl text-4xl font-semibold tracking-tight text-foreground md:text-6xl md:leading-tight"
           variants={itemVariants}
         >
-          Build concise AI coding guardrails your team will actually use
+          Repo-aware AI coding guidelines assistant for Copilot &amp; Cursor
         </motion.h1>
 
         <motion.p
           className="mx-auto max-w-2xl text-sm text-muted-foreground md:text-lg"
           variants={itemVariants}
         >
-          Jump in with a ready-made stack template, explore the full wizard, or drop a GitHub repo for an automatic scan.
+          Generate AI-ready Copilot instructions, Cursor rules, and developer onboarding docs in minutes—start from curated stacks or drop a repo into the GitHub analyzer.
         </motion.p>
 
 
@@ -110,7 +110,7 @@ export function Hero() {
                 Start fast with popular stacks
               </p>
               <p className="text-sm text-muted-foreground">
-                Pick a curated quickstart and we&apos;ll pre-fill the wizard with stack defaults.
+                Pick a curated quickstart and we&apos;ll pre-fill the wizard with stack defaults and suggested AI guardrails.
               </p>
               <div className="flex flex-wrap gap-3">
                 {popularStacks.map((stack) => {
@@ -190,7 +190,7 @@ export function Hero() {
                   Scan a GitHub repository
                 </p>
                 <p className="text-sm text-muted-foreground">
-                  Paste an owner/repo or URL and we&apos;ll prefill the wizard with detected tech and tooling.
+                  Paste an owner/repo or URL and we&apos;ll prefill the wizard with detected tech, tooling, and guardrail suggestions.
                 </p>
               </div>
               <div className="flex w-full flex-col gap-2 sm:flex-row">

lib/site-metadata.ts

@@ -6,14 +6,22 @@ const normalizeSiteUrl = (input: string): string => {
     return DEFAULT_SITE_URL;
   }
 
-  const withoutTrailingSlash = trimmed.endsWith("/") ? trimmed.slice(0, -1) : trimmed;
-  return withoutTrailingSlash || DEFAULT_SITE_URL;
+  const withProtocol = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+
+  try {
+    const url = new URL(withProtocol);
+    return url.origin;
+  } catch {
+    return DEFAULT_SITE_URL;
+  }
 };
 
 export const SITE_URL = normalizeSiteUrl(
   process.env.NEXT_PUBLIC_SITE_URL ?? process.env.SITE_URL ?? DEFAULT_SITE_URL,
 );
 
+export const CANONICAL_HOST = new URL(SITE_URL).hostname;
+
 export const absoluteUrl = (path = ""): string => {
   if (!path || path === "/") {
     return SITE_URL;

middleware.ts

@@ -0,0 +1,42 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import { CANONICAL_HOST } from "@/lib/site-metadata";
+
+const LOCALHOST_ALLOWLIST = new Set(["localhost", "127.0.0.1", "[::1]"]);
+
+const isProductionDeployment = (): boolean => {
+  const vercelEnv = process.env.VERCEL_ENV;
+  if (vercelEnv) {
+    return vercelEnv === "production";
+  }
+
+  return process.env.NODE_ENV === "production";
+};
+
+export function middleware(request: NextRequest) {
+  if (!isProductionDeployment()) {
+    return NextResponse.next();
+  }
+
+  const canonicalHost = CANONICAL_HOST.toLowerCase();
+  const requestHostname = request.nextUrl.hostname.toLowerCase();
+
+  if (requestHostname === canonicalHost || LOCALHOST_ALLOWLIST.has(requestHostname)) {
+    return NextResponse.next();
+  }
+
+  const redirectUrl = request.nextUrl.clone();
+  redirectUrl.hostname = canonicalHost;
+  redirectUrl.protocol = "https";
+  redirectUrl.port = "";
+
+  return NextResponse.redirect(redirectUrl, 308);
+}
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|robots.txt|site.webmanifest|sitemap.xml|manifest.json|og-image.png).*)",
+  ],
+};
+