docs(core): implement redirects for broken links (#5653)

nx-dev/nx-dev/pages/[version]/[flavor]/[...segments].tsx

@@ -14,9 +14,9 @@ interface DocumentationProps {
   version: VersionMetadata;
   flavor: { label: string; value: string };
   flavors: { label: string; value: string }[];
-  document: DocumentData;
   versions: VersionMetadata[];
   menu: Menu;
+  document?: DocumentData;
 }
 
 interface DocumentationParams {
@@ -44,30 +44,58 @@ export function Documentation({
   );
 }
 
+const defaultVersion = {
+  name: 'Preview',
+  id: 'preview',
+  path: 'preview',
+} as VersionMetadata;
+
+const defaultFlavor = {
+  label: 'React',
+  value: 'react',
+};
+
 export async function getStaticProps({ params }: DocumentationParams) {
-  const versions = getVersions();
+  let versions: VersionMetadata[];
-  return {
+  let version: VersionMetadata;
-    props: {
+  let flavor: { label: string; value: string };
-      version:
+  let menu: Menu;
-        versions.find((item) => item.id === params.version) ||
+  let document: DocumentData;
-        ({
+
-          name: 'Preview',
+  /*
-          id: 'preview',
+   * Try to find the document matching segments. If the document isn't found, then:
-          path: 'preview',
+   *
-        } as VersionMetadata),
+   * - Try to get menu for current flavor+version, if found then redirect to first page in menu.
-      flavor: flavorList.find((item) => item.value === params.flavor) || {
+   * - Otherwise, redirect to the root.
-        label: 'React',
+   */
-        value: 'react',
+  try {
+    versions = getVersions();
+    version =
+      versions.find((item) => item.id === params.version) || defaultVersion;
+    flavor =
+      flavorList.find((item) => item.value === params.flavor) || defaultFlavor;
+    menu = getMenu(params.version, params.flavor);
+    document = getDocument(params.version, [params.flavor, ...params.segments]);
+
+    return {
+      props: {
+        version,
+        flavor,
+        flavors: flavorList,
+        versions: versions,
+        menu,
+        document,
       },
-      flavors: flavorList,
+    };
-      versions: versions,
+  } catch {
-      document: getDocument(params.version, [
+    const firstPagePath = menu?.sections[0].itemList?.[0].itemList?.[0].path;
-        params.flavor,
+    return {
-        ...params.segments,
+      redirect: {
-      ]),
+        destination: firstPagePath ?? '/',
-      menu: getMenu(params.version, params.flavor),
+        permanent: false,
-    },
+      },
-  };
+    };
+  }
 }
 
 export async function getStaticPaths(props) {
@@ -80,7 +108,12 @@ export async function getStaticPaths(props) {
 
   return {
     paths: allPaths,
-    fallback: false,
+    /*
+     * Block rendering until the page component resolves with either:
+     * 1. The content of the document if it exists.
+     * 2. A redirect to another page if document is not found.
+     */
+    fallback: 'blocking',
   };
 }