MDX Content Pipeline

This page is rendered from a real .mdx file inside the Next.js app router. It confirms that TypeScript, Tailwind CSS, and MDX can live together in this project without falling back to plain HTML rendering.

Enabled stack: .tsx, .ts, .css, and .mdx are now part of the frontend build path.

What This Adds

  • .mdx and .md page extensions are enabled in next.config.ts.
  • Shared MDX components are defined in mdx-components.tsx.
  • TypeScript can include Markdown and MDX files during project analysis.
  • Tailwind scans app, component, page, and MDX files for class names.

Example Code Block

export function JournalNote() {
  return <p className="text-slate-700">MDX is ready for engineering notes.</p>;
}

Next Use

Use this route pattern for long-form engineering notes that need Markdown writing speed plus React components where the article needs richer UI.