https://github.com/karlhorky/next-mdx-dynamic-import-demo

@next/mdx with Dynamic Import - a demo for https://github.com/vercel/next.js/discussions/70417
https://github.com/karlhorky/next-mdx-dynamic-import-demo

Last synced: 3 months ago
JSON representation

@next/mdx with Dynamic Import - a demo for https://github.com/vercel/next.js/discussions/70417

• Host: GitHub
• URL: https://github.com/karlhorky/next-mdx-dynamic-import-demo
• Owner: karlhorky
• Created: 2024-10-15T15:16:25.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-15T16:12:16.000Z (4 months ago)
• Last Synced: 2024-11-27T00:03:46.649Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `@next/mdx` with Dynamic Import

- dynamic import: `` await import(`../../content/${slug}.mdx`) ``

  - import MDX content from outside of the `app/` directory

  - import metadata eg. `title` from MDX exports

  - use [Next.js dynamic routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)

- use in [async components](https://react.dev/reference/rsc/server-components#async-components-with-server-components) (React Server Components in Next.js App Router)

- [better than `next-mdx-remote` or `mdx-bundler`](https://github.com/vercel/next.js/discussions/70417)

- TypeScript checks in MDX files with [MDX Analyzer](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)

CodeSandbox: https://codesandbox.io/p/devbox/github/karlhorky/next-mdx-dynamic-import-demo

https://github.com/user-attachments/assets/3981b2d7-7a42-48ca-be77-47d816d9e12e

![2024-10-15_18-10](https://github.com/user-attachments/assets/f7ad6b35-90f4-4f77-bd6f-85b9d6be2e05)