Move title from _document to page

Title metadata should be set at a page level. See https://nextjs.org/docs/api-reference/next/head and vercel/next.js#4596
mcagov · Jan 28, 2021 · 3134a9c · 3134a9c
1 parent 33b1c54
commit 3134a9c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 54 deletions.
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -23,11 +23,7 @@ class GovUKTemplate extends Document {
     return (
       // TODO: https://github.com/madetech/mca-beacons-webapp/issues/25
       <Html className={"govuk-template "} lang={"en"}>
-        <Head>
-          <title>
-            Maritime & Coastguard Agency - Beacons registration service
-          </title>
-        </Head>
+        <Head />
         <body className={"govuk-template__body"}>
           <Header serviceName={"Beacon registration service"} homeLink={"#"} />
           <PhaseBanner

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,58 +1,66 @@
 import React, { FunctionComponent } from "react";
+import Head from "next/Head";
 
 const Home: FunctionComponent = () => {
   return (
-    <div className={"govuk-width-container"}>
-      <main className={"govuk-main-wrapper"}>
-        <h1 className="govuk-heading-l">Beacon registration service</h1>
+    <>
+      <Head>
+        <title>
+          Maritime & Coastguard Agency - Beacons registration service
+        </title>
+      </Head>
+      <div className={"govuk-width-container"}>
+        <main className={"govuk-main-wrapper"}>
+          <h1 className="govuk-heading-l">Beacon registration service</h1>
 
-        <p className="govuk-body">Use this service to:</p>
+          <p className="govuk-body">Use this service to:</p>
 
-        <ul className="govuk-list govuk-list--bullet">
-          <li>
-            <a
-              href={"https://github.com/madetech/mca-beacons-webapp/actions"}
-              target={"_blank"}
-              rel={"noreferrer"}
-            >
-              showcase
-            </a>{" "}
-            your{" "}
-            <a
-              href={
-                "https://github.com/madetech/mca-beacons-integration/actions"
-              }
-              target={"_blank"}
-              rel={"noreferrer"}
-            >
-              continuous integration and deployment pipeline
-            </a>
-          </li>
-          <li>
-            talk about reusable{" "}
-            <a
-              href={"https://design-system.service.gov.uk/"}
-              target={"_blank"}
-              rel={"noreferrer"}
-            >
-              GOV.UK design system
-            </a>{" "}
-            components that will speed up future sprints
-          </li>
-          <li>
-            outline the{" "}
-            <a
-              href={"https://miro.com/app/board/o9J_lZRBWY4=/"}
-              target={"_blank"}
-              rel={"noreferrer"}
-            >
-              data model
-            </a>{" "}
-            as we currently understand it
-          </li>
-        </ul>
-      </main>
-    </div>
+          <ul className="govuk-list govuk-list--bullet">
+            <li>
+              <a
+                href={"https://github.com/madetech/mca-beacons-webapp/actions"}
+                target={"_blank"}
+                rel={"noreferrer"}
+              >
+                showcase
+              </a>{" "}
+              your{" "}
+              <a
+                href={
+                  "https://github.com/madetech/mca-beacons-integration/actions"
+                }
+                target={"_blank"}
+                rel={"noreferrer"}
+              >
+                continuous integration and deployment pipeline
+              </a>
+            </li>
+            <li>
+              talk about reusable{" "}
+              <a
+                href={"https://design-system.service.gov.uk/"}
+                target={"_blank"}
+                rel={"noreferrer"}
+              >
+                GOV.UK design system
+              </a>{" "}
+              components that will speed up future sprints
+            </li>
+            <li>
+              outline the{" "}
+              <a
+                href={"https://miro.com/app/board/o9J_lZRBWY4=/"}
+                target={"_blank"}
+                rel={"noreferrer"}
+              >
+                data model
+              </a>{" "}
+              as we currently understand it
+            </li>
+          </ul>
+        </main>
+      </div>
+    </>
   );
 };