npx create-next-app@latest
? What is your project named? … my-app
? Would you like to use TypeScript? … Yes
? Would you like to use ESLint? … Yes
? Would you like to use Tailwind CSS? … Yes
? Would you like to use `src/` directory? … No
? Would you like to use App Router? (recommended) … Yes
? Would you like to customize the default import alias? … No
Creating a new Next.js app in ./my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next


added 327 packages, and audited 328 packages in 9s

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created my-app at ./my-app
npm install @next/mdx @mdx-js/loader @mdx-js/react

added 483 packages, and audited 484 packages in 34s

206 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

  // next.config.mjs
+ import createMDX from '@next/mdx'
+
  /** @type {import('next').NextConfig} */
- const nextConfig = {)
+ const nextConfig = {
+   // Configure pageExtensions to include md and mdx
+   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+   reactStrictMode: true,
+ }
+
+ const withMDX = createMDX({
+   options: {
+     extension: /\.mdx?$/,
+     remarkPlugins: [],
+     rehypePlugins: [],
+     // If you use `MDXProvider`, uncomment the following line.
+     // providerImportSource: "@mdx-js/react",
+   },
+ })

- module.exports = nextConfig
+ export default withMDX(nextConfig)

  // pages/my-mdx-page.mdx
+ My MDX page
+
+ This is a list in markdown:
+
+ - One
+ - Two
+ - Three

npm run dev

> my-app@0.1.0 dev
> next dev

- ready started server on [::]:3000, url: http://localhost:3000
- info automatically enabled Fast Refresh for 1 custom loader
- event compiled client and server successfully in 355 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 77 ms (20 modules)
- wait compiling /my-mdx-page (client and server)...
- event compiled client and server successfully in 930 ms (553 modules)

  // next.config.mjs
  import createMDX from '@next/mdx'

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // Configure pageExtensions to include md and mdx
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
    reactStrictMode: true,
+   experimental: {
+     mdxRs: true,
+   },
  },

  }

  const withMDX = createMDX({
    options: {
      extension: /\.mdx?$/,
      remarkPlugins: [],
      rehypePlugins: [],
      // If you use `MDXProvider`, uncomment the following line.
      // providerImportSource: "@mdx-js/react",
    },
  })

  export default withMDX(nextConfig)

npm run dev

> my-app@0.1.0 dev
> next dev

- warn You have enabled experimental feature (mdxRs) in next.config.mjs.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

- ready started server on [::]:3000, url: http://localhost:3000
- event compiled client and server successfully in 75 ms (20 modules)
- wait compiling /my-mdx-page (client and server)...
- event compiled client and server successfully in 441 ms (553 modules)