diff --git a/packages/next/src/build/webpack/loaders/next-swc-loader.ts b/packages/next/src/build/webpack/loaders/next-swc-loader.ts
index ea696e4886b1..0b097d0b5dee 100644
--- a/packages/next/src/build/webpack/loaders/next-swc-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-swc-loader.ts
@@ -102,6 +102,14 @@ async function loaderTransform(
}
let loaderOptions: SWCLoaderOptions = this.getOptions() || {}
+ const moduleLayer = this._module?.layer
+ if (loaderOptions.bundleLayer == null && moduleLayer != null) {
+ loaderOptions = {
+ ...loaderOptions,
+ bundleLayer: moduleLayer as WebpackLayerName,
+ }
+ }
+
const shouldMaybeExclude = maybeExclude(
filename,
loaderOptions.transpilePackages || []
diff --git a/test/e2e/app-dir/mdx-metadata/app/layout.tsx b/test/e2e/app-dir/mdx-metadata/app/layout.tsx
new file mode 100644
index 000000000000..888614deda3b
--- /dev/null
+++ b/test/e2e/app-dir/mdx-metadata/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/test/e2e/app-dir/mdx-metadata/app/page.mdx b/test/e2e/app-dir/mdx-metadata/app/page.mdx
new file mode 100644
index 000000000000..a931aed32bf8
--- /dev/null
+++ b/test/e2e/app-dir/mdx-metadata/app/page.mdx
@@ -0,0 +1,5 @@
+export const metadata = {
+ title: 'MDX metadata title',
+}
+
+# MDX metadata page
diff --git a/test/e2e/app-dir/mdx-metadata/mdx-components.tsx b/test/e2e/app-dir/mdx-metadata/mdx-components.tsx
new file mode 100644
index 000000000000..03040b9d3caa
--- /dev/null
+++ b/test/e2e/app-dir/mdx-metadata/mdx-components.tsx
@@ -0,0 +1,3 @@
+export function useMDXComponents() {
+ return {}
+}
diff --git a/test/e2e/app-dir/mdx-metadata/mdx-metadata.test.ts b/test/e2e/app-dir/mdx-metadata/mdx-metadata.test.ts
new file mode 100644
index 000000000000..b7b081e6b9b6
--- /dev/null
+++ b/test/e2e/app-dir/mdx-metadata/mdx-metadata.test.ts
@@ -0,0 +1,30 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('mdx metadata export', () => {
+ const { next, isNextStart, skipped } = nextTestSetup({
+ files: __dirname,
+ dependencies: {
+ '@next/mdx': 'canary',
+ '@mdx-js/loader': '^3.1.1',
+ '@mdx-js/react': '^3.1.1',
+ },
+ skipDeployment: true,
+ skipStart: true,
+ })
+
+ if (skipped) return
+
+ if (!isNextStart) {
+ it('skipped in development mode', () => {})
+ return
+ }
+
+ it('builds an MDX page that exports metadata', async () => {
+ const { exitCode } = await next.build()
+ expect(exitCode).toBe(0)
+
+ const html = await next.readFile('.next/server/app/index.html')
+ expect(html).toContain('MDX metadata title')
+ expect(html).toContain('MDX metadata page
')
+ })
+})
diff --git a/test/e2e/app-dir/mdx-metadata/next.config.js b/test/e2e/app-dir/mdx-metadata/next.config.js
new file mode 100644
index 000000000000..2dd997db6197
--- /dev/null
+++ b/test/e2e/app-dir/mdx-metadata/next.config.js
@@ -0,0 +1,8 @@
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
+}
+
+module.exports = withMDX(nextConfig)