Start generating metadata for the page

src/app/[[...pathname]]/page.tsx

@@ -3,11 +3,38 @@ import { headers } from 'next/headers';
 import { api } from '@/lib/api';
 import { SpaceContent } from '@/components/SpaceContent';
 
-export default async function Page(props: { params: { pathname?: string[] } }) {
+interface PageParams {
+    pathname?: string[];
+}
+
+export default async function Page(props: { params: PageParams }) {
     const {
         params: { pathname },
     } = props;
 
+    const { space, revision } = await fetchData(props.params);
+
+    return (
+        <SpaceContent
+            space={space}
+            revision={revision}
+            pagePath={pathname ? pathname.join('/') : ''}
+        />
+    );
+}
+
+export async function generateMetadata({ params }: { params: PageParams }) {
+    const { space, revision } = await fetchData(params);
+
+    return {
+        title: space.title,
+    };
+}
+
+/**
+ * Fetch all the data needed for the page.
+ */
+async function fetchData(params: PageParams) {
     const headersList = headers();
     const spaceId = headersList.get('x-gitbook-space');
 
@@ -20,11 +47,8 @@ export default async function Page(props: { params: { pathname?: string[] } }) {
         api().spaces.getCurrentRevision(spaceId),
     ]);
 
-    return (
-        <SpaceContent
-            space={space}
-            revision={revision}
-            pagePath={pathname ? pathname.join('/') : ''}
-        />
-    );
+    return {
+        space,
+        revision,
+    };
 }

src/components/Header/Header.tsx

@@ -13,7 +13,7 @@ export function Header(props: { space: Space }) {
     const { space } = props;
 
     return (
-        <div
+        <header
             className={clsx(
                 'h-16',
                 'sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent',
@@ -29,6 +29,6 @@ export function Header(props: { space: Space }) {
                     </Suspense>
                 </div>
             </div>
-        </div>
+        </header>
     );
 }