Add: server side metadata generation in root layout (#755)

ben-fornefeld · web-flow · commit 1c063f7cc618 · 2025-06-03T17:31:26.000+02:00
- adds `generateMetadata` in root layout to generate canonical and
robots meta tags server side
- listens on a custom header which is set by our proxy before rewriting
`/docs` routes, to decide whether the document should have no-index
metadata or index metadata
- adds a middleware which appends a custom header to retrieve the
current pathname for server side canonical tag generation
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,30 +1,63 @@
 import { Metadata } from 'next'
 import { Analytics } from '@vercel/analytics/react'
 import Script from 'next/script'
-
 import { Providers } from '@/app/providers'
-
 import '@/styles/tailwind.css'
-import Canonical from '@/components/Navigation/canonical'
 import { Header } from '@/components/Header'
 import glob from 'fast-glob'
 import { Section } from '@/components/SectionProvider'
 import { Layout } from '@/components/Layout'
+import { headers } from 'next/headers'
 
-export const metadata: Metadata = {
-  title: {
-    template: '%s - E2B',
-    default: 'E2B - Code Interpreting for AI apps',
-  },
-  description: 'Open-source secure sandboxes for AI code execution',
-  twitter: {
-    title: 'E2B - Code Interpreting for AI apps',
-    description: 'Open-source secure sandboxes for AI code execution',
-  },
-  openGraph: {
-    title: 'E2B - Code Interpreting for AI apps',
+async function isValidPath(pathname: string) {
+  try {
+    const docsDirectory = await glob('**/*.mdx', {
+      cwd: `src/app/(docs)${pathname}`,
+    })
+
+    return docsDirectory.length > 0
+  } catch (error) {
+    console.error('Error validating path in generateMetadata:', error)
+    return false
+  }
+}
+
+export async function generateMetadata() {
+  const headerList = headers()
+  const pathname = headerList.get('x-middleware-pathname')
+  const shouldIndex = headerList.get('x-e2b-should-index')
+
+  let isValid = false
+
+  if (pathname?.startsWith('/docs')) {
+    isValid = await isValidPath(pathname)
+  }
+
+  return {
+    title: {
+      template: '%s - E2B',
+      default: 'E2B - Code Interpreting for AI apps',
+    },
     description: 'Open-source secure sandboxes for AI code execution',
-  },
+    twitter: {
+      title: 'E2B - Code Interpreting for AI apps',
+      description: 'Open-source secure sandboxes for AI code execution',
+    },
+    openGraph: {
+      title: 'E2B - Code Interpreting for AI apps',
+      description: 'Open-source secure sandboxes for AI code execution',
+    },
+    alternates:
+      isValid && pathname !== ''
+        ? {
+            canonical: `https://e2b.dev${pathname}`,
+          }
+        : undefined,
+    robots:
+      isValid && shouldIndex
+        ? { index: true, follow: true }
+        : { index: false, follow: false },
+  } satisfies Metadata
 }
 
 declare global {
@@ -60,7 +93,6 @@ export default async function RootLayout({ children }) {
             `}
           </Script>
         )}
-        <Canonical />
       </head>
       <body className="flex min-h-full antialiased bg-zinc-900">
         {process.env.NODE_ENV === 'production' && (
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
@@ -2,10 +2,20 @@ import Link from 'next/link'
 
 export default function NotFound() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+      }}
+    >
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
-      <Link href="/" style={{ textDecoration: 'underline', color: '#ff8800' }}>Return Home</Link>
+      <Link href="/" style={{ textDecoration: 'underline', color: '#ff8800' }}>
+        Return Home
+      </Link>
     </div>
   )
 }
diff --git a/apps/web/src/components/Navigation/canonical.tsx b/apps/web/src/components/Navigation/canonical.tsx
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const path = request.nextUrl.pathname
+
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-middleware-pathname', path)
+
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
+}
+
+export const config = {
+  matcher: '/docs/:path*',
+}
