Skip to main content

MDX / Metadata Management

Turbopack turn off

Unfortunately Turbopack is not supporting MDX integration. We need to wait until production-ready version will be released.

  • package.json
"scripts": {
  "dev": "next dev",
  ...
},

Adding MDX integration​

Installation​

pnpm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Configuration​

  • next.config.js
import createMDX from '@next/mdx';

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
};

const withMDX = createMDX({});

export default withMDX(nextConfig);
  • src/mdx-components.tsx
import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

Tailwind MDX styles​

pnpm install -D @tailwindcss/typography
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

CSS adjustments​

  • src/app/globals.css
body {
  color: rgb(var(--foreground-rgb));
  background-color: antiquewhite;
  padding: 1rem;
}

First MDX page​

  • src/app/metadata/page.mdx
{/* prose class for tailwind styling on MDX */}
<article class="prose lg:prose-xl">
# Metadata
Metadata page

- Renders nicely
- Using Markdown
- HTML Tags & components

</article>

Config-based Metadata​

  • src/app/metadata/page.mdx
export const metadata = {
  title: 'Metadata Page',
  desription: 'MDX page.',
  keywords: ['mdx', 'page'],
};

Dynamic Metadata​

  • ./app/meta/page.js
export async function generateMetadata({ searchParams }) {
  return {
    title: `Metadata Page - ${searchParams?.id}`,
    description: 'The metadata page.',
    keywords: ['metadata', 'page'],
  };
}
  • localhost:3000/metadata?id=123
tip

You can also use metadata feature to define OpenGraph and Twitter cards.

info