docs(nx-dev): Add 404 for unknown blog urls (#23267)

This PR adds the 404 fallback if a user navigates to a specified blog
that does not exist.

Currently, we are showing a 500 error.

nx-dev/data-access-documents/src/lib/blog.api.ts

@@ -60,6 +60,15 @@ export class BlogApi {
     return sortPosts(allPosts);
   }
 
+  getBlogPost(slug: string): BlogPostDataEntry {
+    const blogs = this.getBlogPosts();
+    const blog = blogs.find((b) => b.slug === slug);
+    if (!blog) {
+      throw new Error(`Could not find blog post with slug: ${slug}`);
+    }
+    return blog;
+  }
+
   private calculateSlug(filePath: string, frontmatter: any): string {
     const baseName = basename(filePath, '.md');
     return frontmatter.slug || baseName;

nx-dev/nx-dev/pages/blog/[slug].tsx

@@ -43,14 +43,19 @@ export default function BlogPostDetail({ post }: BlogPostDetailProps) {
 
 export const getStaticProps: GetStaticProps = async (context) => {
   // optimize s.t. we don't read the FS multiple times; for now it's ok
-  const posts = await blogApi.getBlogPosts();
+  // const posts = await blogApi.getBlogPosts();
-  const post = posts.find((p) => p.slug === context.params?.slug);
+  // const post = posts.find((p) => p.slug === context.params?.slug);
-
+  try {
-  return {
+    const post = await blogApi.getBlogPost(context.params?.slug as string);
-    props: {
+    return { props: { post } };
-      post,
+  } catch (e) {
-    },
+    return {
-  };
+      notFound: true,
+      props: {
+        statusCode: 404,
+      },
+    };
+  }
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
@@ -60,5 +65,5 @@ export const getStaticPaths: GetStaticPaths = async () => {
     params: { slug: post.slug },
   }));
 
-  return { paths, fallback: false };
+  return { paths, fallback: 'blocking' };
 };