fix(docs): 404 routing (#2478)

* fix: use getStaticPaths to restrict platform param

* fix(docs): remove useCustomRouter

* fix(docs): build issue

* refactor: add getCustomStaticPath

* chore(docs): add comment for getStaticProps

* fix(docs): comment syntax

* refactor(docs): use preval for getCustomStaticPath

* fix(docs): getCustomStaticPath platformsArr

* fix(docs): remove figma from unavailable framework nav

* fix(docs): use frontmatter to replace preval for supportedFramework

* fix(docs): getCustomStaticPath undefined

Co-authored-by: 0618 <[email protected]>

Author: 0618

docs/next.config.js

@@ -136,22 +136,22 @@ module.exports = withNextPluginPreval({
       },
       /**
        * source: a url has one of the folder's names (components, getting-started, guides, theming)
-       * destination: add '[platform]' to the the beginning
+       * destination: add '/react/' to the the beginning
        */
       {
         source:
           '/:nav(legacy-components|connected-components|components|getting-started|guides|theming)/:page*',
-        destination: '/[platform]/:nav/:page*',
+        destination: '/react/:nav/:page*',
         permanent: true,
       },
       /**
        * source: a url points one of the folder's names (components, getting-started, guides, theming)'s index file
-       * destination: add '[platform]' to the beginning
+       * destination: add '/react/' to the beginning
        */
       {
         source:
           '/:nav(legacy-components|connected-components|components|getting-started|guides|theming)',
-        destination: '/[platform]/:nav',
+        destination: '/react/:nav',
         permanent: true,
       },
     ];

docs/src/components/FlutterAuthenticatorExample.tsx

@@ -22,7 +22,10 @@ export function FlutterAuthenticatorExample({
 }) {
   const colorAttr = 'data-amplify-color-mode';
   // in dev mode, `data-amplify-color-mode` will not be on the html element
-  const colorElements = document.querySelectorAll(`[${colorAttr}]`);
+  const colorElements =
+    typeof window !== 'undefined'
+      ? document.querySelectorAll(`[${colorAttr}]`)
+      : [];
   const themeMode = colorElements.length
     ? colorElements[0].getAttribute(colorAttr)
     : 'light';

docs/src/components/Fragment.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import { Alert, Flex, Link, Placeholder } from '@aws-amplify/ui-react';
 import dynamic, { LoaderComponent } from 'next/dynamic';
+import { useRouter } from 'next/router';
 
 import { isArray } from 'lodash';
-import { useCustomRouter } from '@/components/useCustomRouter';
 
 export default function Example() {
   return;
@@ -46,9 +46,10 @@ export const Fragment = ({
   platforms,
   useCommonWebContent,
 }: FragmentProps) => {
-  const { query } = useCustomRouter();
-  const framework = (query.platform as string) ?? 'react';
-  const platform = getPlatform(framework, useCommonWebContent);
+  const {
+    query: { platform: framework = 'react' },
+  } = useRouter();
+  const platform = getPlatform(framework as string, useCommonWebContent);
   const Component = React.useMemo(() => {
     if (!shouldRenderFragment(platforms, platform)) {
       return null;

docs/src/components/InstallScripts.tsx

@@ -1,6 +1,6 @@
 import { CopyButton } from '@/components/CopyButton';
 import { Tabs, TabItem } from '@aws-amplify/ui-react';
-import { useCustomRouter } from './useCustomRouter';
+import { useRouter } from 'next/router';
 
 type WebFramework = 'react' | 'vue' | 'angular';
 type PackageManager = 'npm' | 'yarn';
@@ -47,7 +47,7 @@ interface InstallScriptsProps {
 export const InstallScripts = ({ framework }: InstallScriptsProps) => {
   const {
     query: { platform = 'react' },
-  } = useCustomRouter();
+  } = useRouter();
 
   // infer framework from router if framework isn't specified
   if (!framework) {

docs/src/components/Layout/FrameworkChooser.tsx

@@ -1,7 +1,7 @@
 import { Flex, Button } from '@aws-amplify/ui-react';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
-import { useCustomRouter } from '@/components/useCustomRouter';
 import { FRAMEWORKS, FRAMEWORK_DISPLAY_NAMES } from '@/data/frameworks';
 import metaData from '@/data/pages.preval';
 import { FrameworkLogo } from '@/components/Logo';
@@ -18,7 +18,7 @@ const FrameworkLink = ({
   onClick,
   isDisabled,
 }: FrameworkLinkProps) => {
-  const { pathname, query } = useCustomRouter();
+  const { pathname, query } = useRouter();
   const isCurrent = query.platform === framework;
   const classNames = `docs-framework-link ${isCurrent ? 'current' : ''}`;
   const href = pathname.includes(platformPath)
@@ -45,7 +45,7 @@ interface FrameworkChooserProps {
 }
 
 export const FrameworkChooser = ({ onClick }: FrameworkChooserProps) => {
-  const { pathname } = useCustomRouter();
+  const { pathname } = useRouter();
 
   const {
     frontmatter: { supportedFrameworks = 'react' },

docs/src/components/Layout/PageTabLayout.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
+import { useRouter } from 'next/router';
 
 import { Tabs, TabItem, View } from '@aws-amplify/ui-react';
-import { useCustomRouter } from '@/components/useCustomRouter';
 
 export const PageTabLayout = ({ tabComponents }) => {
   const {
     query: { tab = '', platform },
     pathname,
     push,
-  } = useCustomRouter();
+  } = useRouter();
 
   const defaultIndex = tab === 'props' ? 1 : 0;
   const [tabIndex, setTabIndex] = React.useState(defaultIndex);

docs/src/components/Layout/Sidebar.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRouter } from 'next/router';
 import {
   MdOutlineChecklist,
   MdOutlineWidgets,
@@ -29,7 +30,6 @@ import {
 } from '../../data/links';
 
 import Link from 'next/link';
-import { useCustomRouter } from '@/components/useCustomRouter';
 import { isReactNativeEnabled } from '@/utils/featureFlags';
 import { FrameworkChooser } from './FrameworkChooser';
 import { LogoLink } from './LogoLink';
@@ -61,7 +61,7 @@ const NavLink = ({
   const {
     query: { platform = 'react' },
     pathname,
-  } = useCustomRouter();
+  } = useRouter();
   const isCurrent = pathname.replace('/[platform]', '') === href;
   const classNames = `${
     tertiary ? 'docs-tertiary-nav-link' : 'docs-secondary-nav-link'
@@ -81,7 +81,7 @@ const NavLink = ({
 };
 
 const NavLinkComponentsSection = ({ heading, components, ...props }) => {
-  const { query } = useCustomRouter();
+  const { query } = useRouter();
   const { tokens } = useTheme();
   const { platform = 'react' } = query;
 
@@ -137,7 +137,7 @@ const ExpanderTitle = ({ Icon, text }) => {
 
 // TODO: clean up this logic
 const SecondaryNav = (props) => {
-  const { pathname } = useCustomRouter();
+  const { pathname } = useRouter();
   const { platform } = props;
   // Extract section from URL (/section/... => section)
   let section = pathname.split('/')[2];

docs/src/components/home/ThemeSwitcher.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useRouter } from 'next/router';
 
 import {
   Card,
@@ -31,7 +32,6 @@ import {
 import { CgTerminal, CgLinear, CgCopyright } from 'react-icons/cg';
 
 import themePreval from './themes/index.preval';
-import { useCustomRouter } from '@/components/useCustomRouter';
 import { HomeCode } from '@/components/home/HomeCode';
 import { CodeHighlight } from '@/components/CodeHighlight';
 import { trackClick } from '@/utils/track';
@@ -209,7 +209,7 @@ export const ThemeSwitcher = ({ colorMode }) => {
   const [theme, setTheme] = useState('default');
   const {
     query: { platform = 'react' },
-  } = useCustomRouter();
+  } = useRouter();
 
   const isMobile = useBreakpointValue({
     base: true,

docs/src/components/home/sections/HeroSection.tsx

@@ -1,4 +1,5 @@
 import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import {
   Button,
   Flex,
@@ -16,7 +17,6 @@ import {
   RiPencilRuler2Line,
 } from 'react-icons/ri';
 
-import { useCustomRouter } from '@/components/useCustomRouter';
 import { CardLink } from '@/components/CardLink';
 import { FRAMEWORKS, FRAMEWORK_INSTALL_SCRIPTS } from '@/data/frameworks';
 import { FrameworkLogo } from '@/components/Logo';
@@ -25,7 +25,7 @@ import { TerminalCommand } from '@/components/InstallScripts';
 export const HeroSection = () => {
   const {
     query: { platform = 'react' },
-  } = useCustomRouter();
+  } = useRouter();
 
   const showEditor = useBreakpointValue({
     base: false,