MDX with Next.js App Router

Robinson shows a TypeScript Next.js config that adds .mdx to the supported page extensions and uses the @next/mdx plugin. He also mentions an experimental Rust compiler that may speed up builds when statically prerendering many MDX pages. The example includes the MDX loader, React, and type dependencies.

A root-level mdx-components.tsx file maps Markdown elements such as headings, links, code, tables, and quotes to React components. Robinson styles typography with Tailwind and routes internal links through Next.js Link for prefetching. Once defined, these components are available to MDX pages without importing them individually.

With .mdx enabled, app/page.mdx can serve as the application’s home route. Robinson mixes Markdown with a server component that uses CSS for a hover animation, and explains that App Router recognizes files such as Open Graph images and favicons for metadata. A root layout adds metadata and a view transitions provider.

File-system routes such as n/devrel/page.mdx use the shared typography components while supporting locally imported React components and page metadata, including a title and canonical link. A more complex post imports local components, a static image, and Next.js Image, and also uses HTML details elements and footnotes. Robinson notes that files can be colocated in the App Router without becoming routes.

Robinson recommends the Next.js Markdown and MDX documentation for Remark or Rehype plugins and guidance on remote MDX. The demonstrated setup focuses on local files and uses a small set of MDX and React dependencies. He also notes that the site can combine static and dynamic content and use Next.js image optimization.