Fixup! Generate metadata for 404 pages.

SU-SWS · Nov 26, 2024 · 2f11357 · 2f11357
1 parent 9c4c8a9
commit 2f11357
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/app/(storyblok)/[[...slug]]/not-found.tsx b/app/(storyblok)/[[...slug]]/not-found.tsx
@@ -7,6 +7,10 @@ import { components as Components } from '@/components/StoryblokProvider';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { ComponentNotFound } from '@/components/Storyblok/ComponentNotFound';
 import { getStoryDataCached } from '@/utilities/data/getStoryData';
+import { getConfigBlokCached } from '@/utilities/data/getConfigBlok';
+import { getSlugPrefix } from '@/utilities/getSlugPrefix';
+import { getPageMetadata } from '@/utilities/getPageMetadata';
+import { Metadata } from 'next';
 
 // Storyblok bridge options.
 const bridgeOptions = {
@@ -30,11 +34,28 @@ storyblokInit({
   },
 });
 
+/**
+ * Generate the SEO metadata for the page.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+
+  const slugPrefix = getSlugPrefix();
+  const prefixedSlug = slugPrefix + '/page-not-found';
+  const config = await getConfigBlokCached();
+
+  // Get the story data.
+  const { data: { story } } = await getStoryDataCached({ path: prefixedSlug });
+
+  // Generate the metadata.
+  const meta = getPageMetadata({ story, sbConfig: config, slug: prefixedSlug });
+  return meta;
+}
+
 /**
  * Get the story data from the Storyblok API through the cache.
  */
 export default async function PageNotFound() {
-  const { data } = await getStoryDataCached({ path: 'momentum/page-not-found'});
+  const { data } = await getStoryDataCached({ path: 'momentum/page-not-found' });
 
   if (data === 404) {
     return (

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -7,6 +7,11 @@ import { components as Components } from '@/components/StoryblokProvider';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { ComponentNotFound } from '@/components/Storyblok/ComponentNotFound';
 import { isProduction } from '@/utilities/getActiveEnv';
+import { getSlugPrefix } from '@/utilities/getSlugPrefix';
+import { Metadata } from 'next';
+import { getStoryDataCached } from '@/utilities/data/getStoryData';
+import { getConfigBlokCached } from '@/utilities/data/getConfigBlok';
+import { getPageMetadata } from '@/utilities/getPageMetadata';
 
 // Storyblok bridge options.
 const bridgeOptions = {
@@ -58,6 +63,24 @@ async function getStoryData(slug = 'momentum/page-not-found') {
   }
 };
 
+/**
+ * Generate the SEO metadata for the page.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+
+  const slugPrefix = getSlugPrefix();
+  const prefixedSlug = slugPrefix + '/page-not-found';
+  const config = await getConfigBlokCached();
+
+
+  // Get the story data.
+  const { data: { story } } = await getStoryDataCached({ path: prefixedSlug });
+
+  // Generate the metadata.
+  const meta = getPageMetadata({ story, sbConfig: config, slug: prefixedSlug });
+  return meta;
+}
+
 export default async function PageNotFound() {
   const { data } = await getStoryData();
 

diff --git a/utilities/data/getConfigBlok.ts b/utilities/data/getConfigBlok.ts
@@ -11,7 +11,7 @@ export const getConfigBlok = async () => {
 
   // Get the global configuration.
   const { data: { story: config } } = await storyblokApi.get(
-    'cdn/stories/tour/global-components/configuration/site-configuration',
+    'cdn/stories/momentum/global-components/configuration/site-configuration',
     {
       version: isProd ? 'published' : 'draft',
       token: process.env.STORYBLOK_ACCESS_TOKEN,