Merge pull request #310 from NHSDigital/feature/CCM-8628-favicons

harrim91 · web-flow · commit 603ec7da526a · 2025-02-20T16:38:22.000Z
CCM-8628: use nextjs metadata api
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,13 +1,42 @@
 import type { Metadata } from 'next';
+import { CookiesProvider } from 'next-client-cookies/server';
 import '@styles/app.scss';
 import { ClientLayout } from '@layouts/client/client-layout';
 import content from '@content/content';
 import { getBasePath } from '@utils/get-base-path';
-import { CookiesProvider } from 'next-client-cookies/server';
 
+// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-object
 export const metadata: Metadata = {
   title: content.global.mainLayout.title,
   description: content.global.mainLayout.description,
+  icons: {
+    icon: {
+      url: `${getBasePath()}/lib/assets/favicons/favicon-192x192.png`,
+      sizes: '192x192',
+    },
+    shortcut: {
+      url: `${getBasePath()}/lib/assets/favicons/favicon.ico`,
+      type: 'image/x-icon',
+    },
+    apple: {
+      url: `${getBasePath()}/lib/assets/favicons/apple-touch-icon-180x180.png`,
+    },
+    other: [
+      {
+        rel: 'mask-icon',
+        url: `${getBasePath()}/lib/assets/favicons/favicon.svg`,
+        color: '#005eb8',
+      },
+    ],
+  },
+  other: {
+    'msapplication-TileImage': `${getBasePath()}/lib/assets/favicons/mediumtile-144x144.png`,
+    'msapplication-TileColor': '#005eb8',
+    'msapplication-square70x70logo': `${getBasePath()}/lib/assets/favicons/smalltile-70x70.png`,
+    'msapplication-square150x150logo': `${getBasePath()}/lib/assets/favicons/mediumtile-150x150.png`,
+    'msapplication-wide310x150logo': `${getBasePath()}/lib/assets/favicons/widetile-310x150.png`,
+    'msapplication-square310x310logo': `${getBasePath()}/lib/assets/favicons/largetile-310x310.png`,
+  },
 };
 
 export const dynamic = 'force-dynamic';
@@ -21,54 +50,9 @@ export default function RootLayout({
     <html lang='en'>
       <head>
         <script src={`${getBasePath()}/lib/nhsuk-9.1.0.min.js`} defer />
-        <title>{content.global.mainLayout.title}</title>
-        <link
-          rel='shortcut icon'
-          href={`${getBasePath()}/lib/assets/favicons/favicon.ico`}
-          type='image/x-icon'
-        />
-        <link
-          rel='apple-touch-icon'
-          href={`${getBasePath()}/lib/assets/favicons/apple-touch-icon-180x180.png`}
-        />
-        <link
-          rel='mask-icon'
-          href={`${getBasePath()}/lib/assets/favicons/favicon.svg`}
-          color='#005eb8'
-        />
-        <link
-          rel='icon'
-          sizes='192x192'
-          href={`${getBasePath()}/lib/assets/favicons/favicon-192x192.png`}
-        />
-        <meta
-          name='msapplication-TileImage'
-          content={`${getBasePath()}/lib/assets/favicons/mediumtile-144x144.png`}
-        />
-        <meta name='msapplication-TileColor' content='#005eb8' />
-        <meta
-          name='msapplication-square70x70logo'
-          content={`${getBasePath()}/lib/assets/favicons/smalltile-70x70.png`}
-        />
-        <meta
-          name='msapplication-square150x150logo'
-          content={`${getBasePath()}/lib/assets/favicons/mediumtile-150x150.png`}
-        />
-        <meta
-          name='msapplication-wide310x150logo'
-          content={`${getBasePath()}/lib/assets/favicons/widetile-310x150.png`}
-        />
-        <meta
-          name='msapplication-square310x310logo'
-          content={`${getBasePath()}/lib/assets/favicons/largetile-310x310.png`}
-        />
-        <script
-          type='text/javascript'
-          src={`${getBasePath()}/lib/nhs-frontend-js-check.js`}
-          defer
-        />
       </head>
       <body suppressHydrationWarning>
+        <script src={`${getBasePath()}/lib/nhs-frontend-js-check.js`} defer />
         <CookiesProvider>
           <ClientLayout>{children}</ClientLayout>
         </CookiesProvider>
