Next.jsでMarkdownとMDXを使用する方法

I **love** using [Next.js](https://nextjs.org/)

<p>I <strong>love</strong> using <a href="https://nextjs.org/">Next.js</a></p>

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

import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // markdownとMDXファイルを含めるために`pageExtensions`を設定
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  // 必要に応じて、他のNext.js設定をここに追加
}
 
const withMDX = createMDX({
  // 必要に応じて、markdownプラグインをここに追加
})
 
// MDX設定とNext.js設定を統合
export default withMDX(nextConfig)

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
})

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

  my-project
  ├── app
  │   └── mdx-page
  │       └── page.(mdx/md)
  |── mdx-components.(tsx/js)
  └── package.json

import { MyComponent } from 'my-component'
 
# MDXページへようこそ！
 
これは**太字**と_イタリック_のテキストです。
 
これはmarkdownのリストです：
 
- 一つ目
- 二つ目
- 三つ目
 
私のReactコンポーネントをチェックしてください：
 
<MyComponent />

  .
  ├── app/
  │   └── mdx-page/
  │       └── page.(tsx/js)
  ├── markdown/
  │   └── welcome.(mdx/md)
  ├── mdx-components.(tsx/js)
  └── package.json

import { MyComponent } from 'my-component'
 
# MDXページへようこそ！
 
これは**太字**と_イタリック_のテキストです。
 
これはmarkdownのリストです：
 
- 一つ目
- 二つ目
- 三つ目
 
私のReactコンポーネントをチェックしてください：
 
<MyComponent />

import Welcome from '@/markdown/welcome.mdx'
 
export default function Page() {
  return <Welcome />
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const { default: Post } = await import(`@/content/${slug}.mdx`)
 
  return <Post />
}
 
export function generateStaticParams() {
  return [{ slug: 'welcome' }, { slug: 'about' }]
}
 
export const dynamicParams = false

## これは見出しです
 
これはmarkdownのリストです：
 
- 一つ目
- 二つ目
- 三つ目

<h2>これは見出しです</h2>
 
<p>これはmarkdownのリストです：</p>
 
<ul>
  <li>一つ目</li>
  <li>二つ目</li>
  <li>三つ目</li>
</ul>

import type { MDXComponents } from 'mdx/types'
import Image, { ImageProps } from 'next/image'
 
// このファイルでは、MDXファイルで使用するカスタムReactコンポーネントを
// 提供できます。任意のReactコンポーネントをインポートして使用できます。
// インラインスタイル、他のライブラリからのコンポーネントなども含みます。
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // 組み込みコンポーネントをカスタマイズできます（例：スタイルを追加）
    h1: ({ children }) => (
      <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
    ),
    img: (props) => (
      <Image
        sizes="100vw"
        style={{ width: '100%', height: 'auto' }}
        {...(props as ImageProps)}
      />
    ),
    ...components,
  }
}

import Welcome from '@/markdown/welcome.mdx'
 
function CustomH1({ children }) {
  return <h1 style={{ color: 'blue', fontSize: '100px' }}>{children}</h1>
}
 
const overrideComponents = {
  h1: CustomH1,
}
 
export default function Page() {
  return <Welcome components={overrideComponents} />
}

export default function MdxLayout({ children }: { children: React.ReactNode }) {
  // 共有レイアウトやスタイルをここで作成
  return <div style={{ color: 'blue' }}>{children}</div>
}

export default function MdxLayout({ children }: { children: React.ReactNode }) {
  // 共有レイアウトやスタイルをここで作成
  return (
    <div className="prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white">
      {children}
    </div>
  )
}

export const metadata = {
  author: 'John Doe',
}
 
# ブログ投稿

import BlogPost, { metadata } from '@/content/blog-post.mdx'
 
export default function Page() {
  console.log('metadata: ', metadata)
  //=> { author: 'John Doe' }
  return <BlogPost />
}

import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // .mdx拡張子のファイルを許可
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  // 必要に応じて、他のNext.js設定をここに追加
}
 
const withMDX = createMDX({
  // 必要なmarkdownプラグインをここに追加
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
})
 
// MDXとNext.jsの設定を組み合わせる
export default withMDX(nextConfig)

import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
}
 
const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [['rehype-katex', { strict: true, throwOnError: true }]],
  },
})
 
export default withMDX(nextConfig)

import { MDXRemote } from 'next-mdx-remote-client/rsc'
 
export default async function RemoteMdxPage() {
  // MDXテキスト - データベース、CMS、fetch、どこからでも取得可能...
  const res = await fetch('https://...')
  const markdown = await res.text()
  return <MDXRemote source={markdown} />
}

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeSanitize from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'
 
main()
 
async function main() {
  const file = await unified()
    .use(remarkParse) // markdownのASTに変換
    .use(remarkRehype) // HTMLのASTに変換
    .use(rehypeSanitize) // HTML入力をサニタイズ
    .use(rehypeStringify) // ASTをシリアライズされたHTMLに変換
    .process('Hello, Next.js!')
 
  console.log(String(file)) // <p>Hello, Next.js!</p>
}

module.exports = withMDX({
  experimental: {
    mdxRs: true,
  },
})

module.exports = withMDX({
  experimental: {
    mdxRs: {
      jsxRuntime?: string            // カスタムjsxランタイム
      jsxImportSource?: string       // カスタムjsxインポートソース
      mdxType?: 'gfm' | 'commonmark' // 解析と変換に使用するmdx構文の種類を設定
    },
  },
})