Closed2022/12/03にクローズ13

Next.js 13 + @next/mdxでMarkdownを記事に簡単に変換できるのかの調査

Next.js

MDX

Astro

ヤマチュー

目的

ようやく落ち着いたので、３ヶ月以上前に途中まで作ったAstroのブログを完成させようかと思ったが、10月に発表されたNext.js 13が個人的には衝撃的だったので、いろいろ考え中
Astroのブログを完成させるべきか、Next.jsで作り直すか色々と迷っているので調査する

ヤマチュー

やったことメモ

Automatic Setup

npx create-next-app@latest --typescript

Setup @next/mdx in Next.js

ヤマチュー

疑問

自動でできたnext.config.jsの設定と追加するべき設定の共存どうやるんだ？👀
→型定義でwithMDXの引数がnextConfigと分かったので、これと共存できそう

ヤマチュー

Markdownファイルの追加

適当に、pages配下にMarkdownファイルを追加するだけで表示された！

ヤマチュー

GFMを有効にしたい

現状だと、Markdownが十分変換されるわけではないので、GitHub flavored markdown (GFM)をremark-gfmを用いて有効にする

npm install remark-gfm

withMDXのremarkPluginsで指定するといける

問題

ただ、ここでremark-gfmがESMにしか対応していないことが発覚
そこでnext.config.mjsに中身を変換する必要がでてきた

結果、以下のように書き換えた

import remarkGfm from 'remark-gfm'
import nextMDX from '@next/mdx'

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

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    // If you use remark-gfm, you'll need to use next.config.mjs
    // as the package is ESM only
    // https://github.com/remarkjs/remark-gfm#install
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})

export default withMDX(nextConfig)