diff --git a/mdx-components.tsx b/mdx-components.tsx
index 88e069e9dd1..4378e3d23e6 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
-import type { MDXComponents } from 'mdx/types';
+import type { Metadata } from 'next';
+import type { MDXComponents, MDXProps } from 'mdx/types';
+import type { PageNode } from '@/directory/directory';
+import type { Platform } from '@/constants/platforms';
 import ExportedImage from 'next-image-export-optimizer';
 import InlineFilter from './src/components/InlineFilter';
 import { YoutubeEmbed } from './src/components/YoutubeEmbed';
@@ -34,43 +37,70 @@ const MDXHeading4 = (props) => <MDXHeading level={4} {...props} />;
 const MDXHeading5 = (props) => <MDXHeading level={5} {...props} />;
 const MDXHeading6 = (props) => <MDXHeading level={6} {...props} />;
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    // Map markdown elements to custom components
-    a: MDXLink,
-    h1: MDXHeading1,
-    h2: MDXHeading2,
-    h3: MDXHeading3,
-    h4: MDXHeading4,
-    h5: MDXHeading5,
-    h6: MDXHeading6,
-    pre: (preProps) => {
-      const props = preToCodeBlock(preProps);
-      if (props) {
-        return <MDXCode {...props} />;
-      }
-      return <pre {...preProps} />;
-    },
-    img: ResponsiveImage,
-    table: MDXTable,
+const components = {
+   // Map markdown elements to custom components
+   a: MDXLink,
+   h1: MDXHeading1,
+   h2: MDXHeading2,
+   h3: MDXHeading3,
+   h4: MDXHeading4,
+   h5: MDXHeading5,
+   h6: MDXHeading6,
+   pre: (preProps) => {
+     const props = preToCodeBlock(preProps);
+     if (props) {
+       return <MDXCode {...props} />;
+     }
+     return <pre {...preProps} />;
+   },
+   img: ResponsiveImage,
+   table: MDXTable,
+
+   // Make common custom components available to content authors
+   Accordion,
+   Block,
+   BlockSwitcher,
+   Callout,
+   Fragments,
+   InlineFilter,
+   MigrationAlert,
+   YoutubeEmbed,
+   Overview,
+   ExternalLink,
+   ExternalLinkButton,
+   InternalLinkButton,
+   Grid,
+   Columns,
+   Video,
+   View,
+};
+
+/**
+ * Type for Next.js's getStaticProps return in MDX pages
+ * this is needed to satisfy the type-check for <Overview>'s childPageNodes
+ */
+type MDXGetStaticPropsResult = {
+  meta: Metadata & {
+    platforms: Platform[];
+  };
+  childPageNodes: PageNode[];
+};
 
-    // Make common custom components available to content authors
-    Accordion,
-    Block,
-    BlockSwitcher,
-    Callout,
-    Fragments,
-    InlineFilter,
-    MigrationAlert,
-    YoutubeEmbed,
-    Overview,
-    ExternalLink,
-    ExternalLinkButton,
-    InternalLinkButton,
-    Grid,
-    Columns,
-    Video,
-    View,
+/**
+ * Declare types in the global scope for MDX to type-check
+ */
+declare global {
+  type MDXProvidedComponents = typeof components;
+  type Props = MDXProps & MDXGetStaticPropsResult;
+}
+
+/**
+ * @param _components Next.js components for MDX pages
+ * @returns all MDX components available for use in the page without import
+ */
+export function useMDXComponents(_components: MDXComponents) {
+  return {
+    ..._components,
     ...components
   };
 }
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
index 8b7d0f337d3..045058385f7 100644
--- a/src/components/Breadcrumbs/index.tsx
+++ b/src/components/Breadcrumbs/index.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Breadcrumbs } from '@aws-amplify/ui-react';
 import { findDirectoryNode as findNode } from '@/utils/findDirectoryNode';
 import classNames from 'classnames';
-import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 
 type BreadcrumbItem = {
   href: { pathname: string; query?: { platform: string } };
@@ -27,24 +27,24 @@ const overrides = {
   '/gen1/angular/prev': 'V5',
   '/gen1/nextjs/prev': 'V5',
   '/gen1/vue/prev': 'V5',
-  '/gen1/javascript': PLATFORM_DISPLAY_NAMES['javascript'],
-  '/gen1/react': PLATFORM_DISPLAY_NAMES['react'],
-  '/gen1/flutter': PLATFORM_DISPLAY_NAMES['flutter'],
-  '/gen1/swift': PLATFORM_DISPLAY_NAMES['swift'],
-  '/gen1/android': PLATFORM_DISPLAY_NAMES['android'],
-  '/gen1/react-native': PLATFORM_DISPLAY_NAMES['react-native'],
-  '/gen1/angular': PLATFORM_DISPLAY_NAMES['angular'],
-  '/gen1/nextjs': PLATFORM_DISPLAY_NAMES['nextjs'],
-  '/gen1/vue': PLATFORM_DISPLAY_NAMES['vue'],
-  '/javascript': PLATFORM_DISPLAY_NAMES['javascript'],
-  '/react': PLATFORM_DISPLAY_NAMES['react'],
-  '/flutter': PLATFORM_DISPLAY_NAMES['flutter'],
-  '/swift': PLATFORM_DISPLAY_NAMES['swift'],
-  '/android': PLATFORM_DISPLAY_NAMES['android'],
-  '/react-native': PLATFORM_DISPLAY_NAMES['react-native'],
-  '/angular': PLATFORM_DISPLAY_NAMES['angular'],
-  '/nextjs': PLATFORM_DISPLAY_NAMES['nextjs'],
-  '/vue': PLATFORM_DISPLAY_NAMES['vue']
+  '/gen1/javascript': PLATFORMS['javascript'],
+  '/gen1/react': PLATFORMS['react'],
+  '/gen1/flutter': PLATFORMS['flutter'],
+  '/gen1/swift': PLATFORMS['swift'],
+  '/gen1/android': PLATFORMS['android'],
+  '/gen1/react-native': PLATFORMS['react-native'],
+  '/gen1/angular': PLATFORMS['angular'],
+  '/gen1/nextjs': PLATFORMS['nextjs'],
+  '/gen1/vue': PLATFORMS['vue'],
+  '/javascript': PLATFORMS['javascript'],
+  '/react': PLATFORMS['react'],
+  '/flutter': PLATFORMS['flutter'],
+  '/swift': PLATFORMS['swift'],
+  '/android': PLATFORMS['android'],
+  '/react-native': PLATFORMS['react-native'],
+  '/angular': PLATFORMS['angular'],
+  '/nextjs': PLATFORMS['nextjs'],
+  '/vue': PLATFORMS['vue']
 };
 
 function generateBreadcrumbs(
diff --git a/src/components/FeatureLists/PlatformFeatureList.tsx b/src/components/FeatureLists/PlatformFeatureList.tsx
index 5960284a356..aa1bc50b3dc 100644
--- a/src/components/FeatureLists/PlatformFeatureList.tsx
+++ b/src/components/FeatureLists/PlatformFeatureList.tsx
@@ -7,9 +7,9 @@ import {
 
 import { Flex } from '@aws-amplify/ui-react';
 import featureListData from '@/constants/feature-lists-data';
-import { DEFAULT_PLATFORM } from '@/data/platforms';
-import type { Platform } from '@/data/platforms';
-import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { DEFAULT_PLATFORM } from '@/constants/platforms';
+import type { Platform } from '@/constants/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 import { useIsGen1Page } from '@/utils/useIsGen1Page';
 
 interface PlatformFeatureListProps {
@@ -23,7 +23,7 @@ const PlatformFeatureList: React.FC<PlatformFeatureListProps> = ({
 
   return categories.length > 0 ? (
     <Flex direction="column" alignItems="flex-start">
-      <FeatureLists title={`Features for ${PLATFORM_DISPLAY_NAMES[platform]}`}>
+      <FeatureLists title={`Features for ${PLATFORMS[platform]}`}>
         {categories.map((category, index) => (
           <FeatureList heading={category.heading} key={index}>
             {category.items.map((categoryItem, index) => (
diff --git a/src/components/FrameworkGrid/FrameworkGrid.tsx b/src/components/FrameworkGrid/FrameworkGrid.tsx
index 5d003787343..c9ee93d3e33 100644
--- a/src/components/FrameworkGrid/FrameworkGrid.tsx
+++ b/src/components/FrameworkGrid/FrameworkGrid.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Grid, View } from '@aws-amplify/ui-react';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import {
   IconAndroid,
   IconAngular,
diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx
index da0661ee45d..0b1430154e5 100644
--- a/src/components/GetStartedPopover/GetStartedPopover.tsx
+++ b/src/components/GetStartedPopover/GetStartedPopover.tsx
@@ -1,7 +1,7 @@
 import { Flex, VisuallyHidden } from '@aws-amplify/ui-react';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
 import { Popover } from '@/components/Popover';
-import { DEFAULT_PLATFORM, Platform } from '@/data/platforms';
+import { DEFAULT_PLATFORM, Platform } from '@/constants/platforms';
 import { useIsGen1Page } from '@/utils/useIsGen1Page';
 import { UrlObject } from 'url';
 import { gen1GetStartedHref, gen2GetStartedHref } from '@/data/index-page-data';
diff --git a/src/components/GetStartedPopover/generateGetStartedLinks.tsx b/src/components/GetStartedPopover/generateGetStartedLinks.tsx
index ae8f259ff63..ed79e97d0e1 100644
--- a/src/components/GetStartedPopover/generateGetStartedLinks.tsx
+++ b/src/components/GetStartedPopover/generateGetStartedLinks.tsx
@@ -1,3 +1,4 @@
+import type { Platform } from '@/constants/platforms';
 import {
   IconAndroid,
   IconAngular,
@@ -9,7 +10,7 @@ import {
   IconVue
 } from '@/components/Icons';
 import { GetStartedLinksType } from './GetStartedPopover';
-import { PLATFORM_DISPLAY_NAMES, Platforms } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 
 /**
  * Generates get started links for all platforms with the same get started url
@@ -19,7 +20,7 @@ import { PLATFORM_DISPLAY_NAMES, Platforms } from '@/data/platforms';
 export function generateGetStartedLinks(
   getStartedPathname
 ): GetStartedLinksType[] {
-  const platformOrder: Platforms = [
+  const platformOrder: Platform[] = [
     'react',
     'nextjs',
     'angular',
@@ -33,7 +34,7 @@ export function generateGetStartedLinks(
 
   const getStartedItems: Partial<GetStartedLinksType>[] = platformOrder.map(
     (platform) => ({
-      title: PLATFORM_DISPLAY_NAMES[platform],
+      title: PLATFORMS[platform],
       platform: platform
     })
   );
diff --git a/src/components/InlineFilter/index.tsx b/src/components/InlineFilter/index.tsx
index c7b20ed6d99..af3ff1454a9 100644
--- a/src/components/InlineFilter/index.tsx
+++ b/src/components/InlineFilter/index.tsx
@@ -1,9 +1,10 @@
+import type { Platform } from '@/constants/platforms';
 import { Fragment } from 'react';
 import FilterChildren from '../FilterChildren';
 
 type InlineFilterProps = {
   children: React.ReactNode;
-  filters: string[];
+  filters: Platform[];
 };
 
 export default function InlineFilter({ filters, children }: InlineFilterProps) {
@@ -11,11 +12,9 @@ export default function InlineFilter({ filters, children }: InlineFilterProps) {
     return <></>;
   }
 
-  const filteredChildren: Array<React.JSX.Element> = [];
-
-  filters.forEach((filter) => {
-    filteredChildren.push(<Fragment key={filter}>{children}</Fragment>);
-  });
+  const filteredChildren = filters.map((filter) => (
+    <Fragment key={filter}>{children}</Fragment>
+  ));
 
   return <FilterChildren>{filteredChildren}</FilterChildren>;
 }
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index b4404b201aa..6b61e2367a9 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,3 +1,4 @@
+import type { Platform } from '@/constants/platforms';
 import { useState, useEffect, ReactElement } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -15,12 +16,7 @@ import { defaultTheme } from '@/themes/defaultTheme';
 import { gen1Theme } from '@/themes/gen1Theme';
 import { Footer } from '@/components/Footer/';
 import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav';
-import {
-  DEFAULT_PLATFORM,
-  PLATFORMS,
-  PLATFORM_DISPLAY_NAMES,
-  Platform
-} from '@/data/platforms';
+import { DEFAULT_PLATFORM, PLATFORMS } from '@/constants/platforms';
 import { SpaceShip } from '@/components/SpaceShip';
 import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
 import { LayoutProvider, LayoutHeader } from '@/components/Layout';
@@ -102,13 +98,13 @@ export const Layout = ({
 
   const currentPlatform = platform
     ? platform
-    : PLATFORMS.includes(asPathPlatform)
+    : Object.keys(PLATFORMS).includes(asPathPlatform)
       ? asPathPlatform
       : DEFAULT_PLATFORM;
 
   const title = [
     pageTitle,
-    platform ? PLATFORM_DISPLAY_NAMES[platform] : null,
+    platform ? PLATFORMS[platform] : null,
     isGen1
       ? 'AWS Amplify Gen 1 Documentation'
       : 'AWS Amplify Gen 2 Documentation'
diff --git a/src/components/Layout/LayoutHeader.tsx b/src/components/Layout/LayoutHeader.tsx
index 5dda1a3812a..9846e45b473 100644
--- a/src/components/Layout/LayoutHeader.tsx
+++ b/src/components/Layout/LayoutHeader.tsx
@@ -2,7 +2,7 @@ import { useContext, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { Button, Flex, View, VisuallyHidden } from '@aws-amplify/ui-react';
 import classNames from 'classnames';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import {
   ALGOLIA_API_KEY,
   ALGOLIA_INDEX_NAME,
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 4fc98e97aa4..f7b8e8e0496 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { MenuItem } from './MenuItem';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import { PageNode } from '@/directory/directory';
 import { findDirectoryNode } from '@/utils/findDirectoryNode';
 
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 4856308b938..5cde4b14951 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -1,9 +1,10 @@
+import type { Platform } from '@/constants/platforms';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 import { ReactElement, useContext, useEffect, useState, useMemo } from 'react';
 import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react';
 import { IconExternalLink, IconChevron } from '@/components/Icons';
 import Link from 'next/link';
-import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 import { LayoutContext } from '@/components/Layout';
 import { PageNode } from '@/directory/directory';
 
@@ -104,7 +105,7 @@ export function MenuItem({
 
   if (
     currentPlatform &&
-    JS_PLATFORMS.includes(currentPlatform as JSPlatform) &&
+    Object.keys(JS_PLATFORMS).includes(currentPlatform) &&
     asPathWithoutHash.includes('/prev/') &&
     pageNode.route == 'https://aws-amplify.github.io/amplify-js/api/'
   ) {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 3d528f2d8ba..903d06497a4 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -10,7 +10,7 @@ import { IconChevron, IconStar, IconX, IconTSBoxed } from '@/components/Icons';
 import { useEffect, useId, useState } from 'react';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
 import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
-import { DEFAULT_PLATFORM } from '@/data/platforms';
+import { DEFAULT_PLATFORM } from '@/constants/platforms';
 import { useGen1Path } from './useGen1Path';
 
 interface ModalProps extends ViewProps {
diff --git a/src/components/Modal/useGen1Path.ts b/src/components/Modal/useGen1Path.ts
index 0df75f80874..02eb36ead37 100644
--- a/src/components/Modal/useGen1Path.ts
+++ b/src/components/Modal/useGen1Path.ts
@@ -1,6 +1,6 @@
 import flatDirectory from '@/directory/flatDirectory.json';
 import { useRouter } from 'next/router';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 
 /**
  * Hook to find the Gen1 version of the Gen2 path you're on.
diff --git a/src/components/Overview/Overview.tsx b/src/components/Overview/Overview.tsx
index 296f1ffcad5..5f6cbaa2c3c 100644
--- a/src/components/Overview/Overview.tsx
+++ b/src/components/Overview/Overview.tsx
@@ -2,7 +2,7 @@ import { PageNode } from '@/directory/directory';
 import { Card, Flex, View, Text } from '@aws-amplify/ui-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import { Columns } from '@/components/Columns';
 
 type OverviewProps = {
diff --git a/src/components/PlatformNavigator/index.tsx b/src/components/PlatformNavigator/index.tsx
index 412effaabcb..6fe360c86a1 100644
--- a/src/components/PlatformNavigator/index.tsx
+++ b/src/components/PlatformNavigator/index.tsx
@@ -1,15 +1,12 @@
+import type { Platform } from '@/constants/platforms';
 import { Flex, Text, View } from '@aws-amplify/ui-react';
+import { FRAMEWORKS } from '@/constants/frameworks';
+import { PLATFORM_VERSIONS, PLATFORMS } from '@/constants/platforms';
 import { useRouter } from 'next/router';
 import type { LinkProps } from 'next/link';
-import { frameworks } from '@/constants/frameworks';
 import { VersionSwitcher } from '../VersionSwitcher';
 import flatDirectory from '@/directory/flatDirectory.json';
 import { Popover } from '../Popover';
-import {
-  PLATFORM_VERSIONS,
-  PLATFORM_DISPLAY_NAMES,
-  Platform
-} from '@/data/platforms';
 
 type PlatformNavigatorProps = {
   currentPlatform: Platform;
@@ -21,7 +18,7 @@ export function PlatformNavigator({
   isGen1
 }: PlatformNavigatorProps) {
   const { pathname } = useRouter();
-
+  
   /**
    * Get the allowed platforms associated with this pathname
    * from flatDirectory.json */
@@ -29,10 +26,10 @@ export function PlatformNavigator({
   if (flatDirectory[pathname]?.platforms) {
     allowedPlatforms = flatDirectory[pathname].platforms;
   }
+  
+  const platformTitle = PLATFORMS[currentPlatform];
 
-  const platformTitle = PLATFORM_DISPLAY_NAMES[currentPlatform];
-
-  const platformItem = frameworks.filter((platform) => {
+  const platformItem = FRAMEWORKS.filter((platform) => {
     return platform.title === platformTitle;
   })[0];
 
@@ -61,7 +58,7 @@ export function PlatformNavigator({
               anchor="left"
               fullWidth={true}
             >
-              {frameworks.map((platform, index) => {
+              {FRAMEWORKS.map((platform, index) => {
                 const title = platform.title;
                 const current = title === platformTitle;
                 let href: LinkProps['href'];
diff --git a/src/components/VersionSwitcher/index.tsx b/src/components/VersionSwitcher/index.tsx
index 98fdcf91bac..231a6fb7bba 100644
--- a/src/components/VersionSwitcher/index.tsx
+++ b/src/components/VersionSwitcher/index.tsx
@@ -2,7 +2,7 @@ import { Flex } from '@aws-amplify/ui-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconCheck } from '@/components/Icons';
-import { PLATFORM_VERSIONS } from '@/data/platforms';
+import { PLATFORM_VERSIONS } from '@/constants/platforms';
 import classNames from 'classnames';
 import { trackVersionChange } from '@/utils/track';
 import { useVersionSwitcherPath } from './useVersionSwitcherPath';
diff --git a/src/components/VersionSwitcher/useVersionSwitcherPath.ts b/src/components/VersionSwitcher/useVersionSwitcherPath.ts
index c12a92fc1d4..e0e778ed771 100644
--- a/src/components/VersionSwitcher/useVersionSwitcherPath.ts
+++ b/src/components/VersionSwitcher/useVersionSwitcherPath.ts
@@ -1,6 +1,6 @@
 import flatDirectory from '@/directory/flatDirectory.json';
 import { useRouter } from 'next/router';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 
 /**
  * Hook to find other version url for the Version switcher.
diff --git a/src/constants/frameworks.tsx b/src/constants/frameworks.tsx
index d17f88da11a..bbcd26d1bfc 100644
--- a/src/constants/frameworks.tsx
+++ b/src/constants/frameworks.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import {
   IconAndroid,
   IconAngular,
@@ -8,11 +9,21 @@ import {
   IconSwift,
   IconVue
 } from '@/components/Icons';
+import { PLATFORMS } from './platforms';
 
-export const frameworks = [
+export type Framework = {
+  [K in keyof typeof PLATFORMS]: {
+    key: K;
+    title: (typeof PLATFORMS)[K];
+    href: `/${K}`;
+    icon: ReactNode;
+  };
+}[keyof typeof PLATFORMS];
+
+export const FRAMEWORKS: Framework[] = [
   {
-    title: 'React',
     key: 'react',
+    title: 'React',
     href: '/react',
     icon: <IconReact />
   },
@@ -64,4 +75,4 @@ export const frameworks = [
     href: '/swift',
     icon: <IconSwift />
   }
-];
+] as const;
diff --git a/src/data/platforms.ts b/src/constants/platforms.ts
similarity index 54%
rename from src/data/platforms.ts
rename to src/constants/platforms.ts
index 9d73bfcb718..889161bbbd4 100644
--- a/src/data/platforms.ts
+++ b/src/constants/platforms.ts
@@ -1,45 +1,34 @@
-export type Platform = 'android' | 'flutter' | 'swift' | JSPlatform;
-
-export type JSPlatform =
-  | 'angular'
-  | 'javascript'
-  | 'nextjs'
-  | 'react'
-  | 'react-native'
-  | 'vue';
-
-export type Platforms = Platform[];
-export type JSPlatforms = JSPlatform[];
-
-export const JS_PLATFORMS: JSPlatforms = [
-  'angular',
-  'javascript',
-  'nextjs',
-  'react',
-  'react-native',
-  'vue'
-];
-
-export const PLATFORMS: Platforms = [
-  'android',
-  'flutter',
-  'swift',
-  ...JS_PLATFORMS
-];
-
-export const PLATFORM_DISPLAY_NAMES: Record<Platform, string> = {
-  android: 'Android',
+export const JS_PLATFORMS = {
   angular: 'Angular',
-  flutter: 'Flutter',
   javascript: 'JavaScript',
   nextjs: 'Next.js',
   react: 'React',
   'react-native': 'React Native',
-  swift: 'Swift',
   vue: 'Vue'
+} as const;
+
+export const MOBILE_PLATFORMS = {
+  android: 'Android',
+  flutter: 'Flutter',
+  swift: 'Swift'
+} as const;
+
+export const PLATFORMS = {
+  ...JS_PLATFORMS,
+  ...MOBILE_PLATFORMS
+} as const;
+
+export const DEFAULT_PLATFORM: Platform = 'react';
+
+export type JSPlatform = keyof typeof JS_PLATFORMS;
+export type Platform = keyof typeof PLATFORMS;
+
+type PlatformVersion = {
+  prev: `v${number}`;
+  current: `v${number}`;
 };
 
-export const PLATFORM_VERSIONS = {
+export const PLATFORM_VERSIONS: Record<Platform, PlatformVersion> = {
   android: {
     prev: 'v1',
     current: 'v2'
@@ -76,6 +65,4 @@ export const PLATFORM_VERSIONS = {
     prev: 'v5',
     current: 'v6'
   }
-};
-
-export const DEFAULT_PLATFORM: Platform = 'react';
+} as const;
diff --git a/src/directory/directory.d.ts b/src/directory/directory.d.ts
index 5d1433a162b..56a72fd0d84 100644
--- a/src/directory/directory.d.ts
+++ b/src/directory/directory.d.ts
@@ -1,4 +1,4 @@
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 
 export type PageNode = {
   /**
diff --git a/src/pages/[platform]/index.tsx b/src/pages/[platform]/index.tsx
index 4b37d4632d4..53840ada2cb 100644
--- a/src/pages/[platform]/index.tsx
+++ b/src/pages/[platform]/index.tsx
@@ -13,7 +13,7 @@ import {
   generateGetStartedLinks
 } from '@/components/GetStartedPopover';
 import { FrameworkGrid } from '@/components/FrameworkGrid';
-import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 import {
   gen2GetStartedHref,
   gen2HowAmplifyWorksPathname
@@ -63,7 +63,7 @@ const Gen2Overview = () => {
     <Flex className="home-content">
       <Flex className="home-intro">
         <Heading level={1} className="home-intro__heading">
-          Amplify Documentation for {PLATFORM_DISPLAY_NAMES[currentPlatform]}
+          Amplify Documentation for {PLATFORMS[currentPlatform]}
         </Heading>
         {isFlutter ? (
           <Text className="home-intro__text">
diff --git a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
index 9f674d02238..b4f34b3f83b 100644
--- a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { JS_PLATFORMS } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 
 export const meta = {
   title: 'Connect to data from server-side runtimes',
diff --git a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx
index 2bec1f8cef5..b2c54c41f0b 100644
--- a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { JS_PLATFORMS } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 
 export const meta = {
   title: 'Set up Amplify GraphQL API',
diff --git a/src/pages/gen1/[platform]/index.tsx b/src/pages/gen1/[platform]/index.tsx
index a25159ca161..269b18fcb5d 100644
--- a/src/pages/gen1/[platform]/index.tsx
+++ b/src/pages/gen1/[platform]/index.tsx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 import { FrameworkGrid } from '@/components/FrameworkGrid';
 import { IconChevron } from '@/components/Icons';
 import {
@@ -54,7 +54,7 @@ const PlatformOverview = ({ platform }) => {
     <Flex className="home-content">
       <Flex className="home-intro">
         <Heading level={1} className="home-intro__heading">
-          Amplify Documentation for {PLATFORM_DISPLAY_NAMES[platform]}
+          Amplify Documentation for {PLATFORMS[platform]}
         </Heading>
         <Text className="home-intro__text">
           AWS Amplify streamlines full-stack app development. With its
diff --git a/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx b/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
index 6de499bdf94..159d0912c17 100644
--- a/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
+++ b/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { JS_PLATFORMS } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 
 export const meta = {
   title: 'Connect to data from server-side runtimes',
diff --git a/src/pages/gen1/index.tsx b/src/pages/gen1/index.tsx
index b2fd741947f..a151abbb6a7 100644
--- a/src/pages/gen1/index.tsx
+++ b/src/pages/gen1/index.tsx
@@ -1,4 +1,4 @@
-import { DEFAULT_PLATFORM } from '@/data/platforms';
+import { DEFAULT_PLATFORM } from '@/constants/platforms';
 import { FrameworkGrid } from '@/components/FrameworkGrid';
 import { IconChevron } from '@/components/Icons';
 import {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6eaeb253596..7e064f1f8dd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,8 +5,8 @@ import {
   generateGetStartedLinks
 } from '@/components/GetStartedPopover';
 import { IconChevron } from '@/components/Icons';
+import { DEFAULT_PLATFORM } from '@/constants/platforms';
 import { Video } from '@/components/Video';
-import { DEFAULT_PLATFORM } from '@/data/platforms';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
 import { FeatureItem, FeatureList } from '@/components/FeatureLists';
 import { MDXCode } from '@/components/MDXComponents';
diff --git a/src/utils/useCurrentPlatform.ts b/src/utils/useCurrentPlatform.ts
index 0b5aa5d661d..69bbc9ff540 100644
--- a/src/utils/useCurrentPlatform.ts
+++ b/src/utils/useCurrentPlatform.ts
@@ -1,4 +1,4 @@
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import { useRouter } from 'next/router';
 
 // Custom hook to return the current platform
diff --git a/tasks/__tests__/generate-sitemap.test.ts b/tasks/__tests__/generate-sitemap.test.ts
index 31c68008b50..690ffc51a5e 100644
--- a/tasks/__tests__/generate-sitemap.test.ts
+++ b/tasks/__tests__/generate-sitemap.test.ts
@@ -1,5 +1,5 @@
 import { xmlUrlNode, findCanonicalPage } from '../generate-sitemap.mjs';
-import { PLATFORMS } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 
 jest.mock('node:crypto', () => {
   return {};
@@ -72,7 +72,7 @@ describe('generate-sitemap', () => {
 
   describe('findCanonicalPage', () => {
     it('should find the canonical page based on the platforms ranking', () => {
-      const pages = PLATFORMS.map(
+      const pages = Object.keys(PLATFORMS).map(
         (platform) =>
           `/${platform}/deploy-and-host/fullstack-branching/cross-account-deployments/index.html`
       );
diff --git a/tsconfig.json b/tsconfig.json
index 2e464bf1ffc..844876668c7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,10 +27,15 @@
   "extends": "./tsconfig.base.json",
   "include": [
     "next-env.d.ts",
+    "mdx-components.tsx",
     "src/**/*.ts",
     "src/**/*.tsx",
+    "src/**/*.mdx",
     "tasks",
     "adobe.d.ts",
     "jest.setup.ts"
-  ]
+  ],
+  "mdx": {
+    "checkMdx": true
+  }
 }