diff --git a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
index 051312282bbe2..d43c18e8d7ed8 100644
--- a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
@@ -374,7 +374,12 @@ export class FlightManifestPlugin {
         if (entryName?.startsWith('app/')) {
           // The `key` here should be the absolute file path but without extension.
           // We need to replace the separator in the entry name to match the system separator.
-          const key = this.appDir + entryName.slice(3).replace(/\//g, sep)
+          const key =
+            this.appDir +
+            entryName
+              .slice(3)
+              .replace(/\//g, sep)
+              .replace(/\.[^\\/.]+$/, '')
           entryCSSFiles[key] = files.concat(entryCSSFiles[key] || [])
         }
       }
diff --git a/test/e2e/app-dir/app-css/app/mdx/content.js b/test/e2e/app-dir/app-css/app/mdx/content.js
new file mode 100644
index 0000000000000..79fb4de810214
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/mdx/content.js
@@ -0,0 +1,3 @@
+import styles from './content.module.css'
+
+export const Content = () => <h1 className={styles.root}>Hello World!</h1>
diff --git a/test/e2e/app-dir/app-css/app/mdx/content.module.css b/test/e2e/app-dir/app-css/app/mdx/content.module.css
new file mode 100644
index 0000000000000..d810e45683b84
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/mdx/content.module.css
@@ -0,0 +1,3 @@
+.root {
+  color: red;
+}
diff --git a/test/e2e/app-dir/app-css/app/mdx/page.mdx b/test/e2e/app-dir/app-css/app/mdx/page.mdx
new file mode 100644
index 0000000000000..5f9e32625c7f9
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/mdx/page.mdx
@@ -0,0 +1,3 @@
+import { Content } from './content'
+
+<Content />
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index fe77931dc2c69..987c5f9e6a14a 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -12,6 +12,7 @@ createNextDescribe(
       react: 'latest',
       'react-dom': 'latest',
       sass: 'latest',
+      '@next/mdx': 'canary',
     },
   },
   ({ next, isNextDev: isDev }) => {
@@ -231,6 +232,17 @@ createNextDescribe(
         })
       })
 
+      describe('page extensions', () => {
+        it('should include css imported in MDX pages', async () => {
+          const browser = await next.browser('/mdx')
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('h1')).color`
+            )
+          ).toBe('rgb(255, 0, 0)')
+        })
+      })
+
       if (isDev) {
         describe('multiple entries', () => {
           it('should only inject the same style once if used by different layers', async () => {
diff --git a/test/e2e/app-dir/app-css/mdx-components.jsx b/test/e2e/app-dir/app-css/mdx-components.jsx
new file mode 100644
index 0000000000000..e112b100b6818
--- /dev/null
+++ b/test/e2e/app-dir/app-css/mdx-components.jsx
@@ -0,0 +1 @@
+export const useMDXComponents = (components) => components
diff --git a/test/e2e/app-dir/app-css/next.config.js b/test/e2e/app-dir/app-css/next.config.js
index cfa3ac3d7aa94..c179cd48adb94 100644
--- a/test/e2e/app-dir/app-css/next.config.js
+++ b/test/e2e/app-dir/app-css/next.config.js
@@ -1,5 +1,13 @@
-module.exports = {
+const mdx = require('@next/mdx')
+
+const withMDX = mdx()
+
+const nextConfig = {
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   experimental: {
     appDir: true,
+    mdxRs: true,
   },
 }
+
+module.exports = withMDX(nextConfig)