Nextjs MDXにGFM(GitHub Flavored Markdown)をインストールする。

オリジナルの Markdown は かっちりしていない ことで有名なマークアップ言語（このあたりはコチラに詳しい方が）なので、単体で表現不足です。普段使っていて、えーこれがっていうものが使えません。なので少し仕事でもつかえてスタイリングが納得できるところまで、やっていきましょう。

前回までの記事を確認ください。

Next.jsのApp Routerで部品管理をして真ん中にMDXをはめる。
投稿したMDXをTailwindでスタイリングする。

つまりNextjsを、npx create-next-app --typescriptでテンプレート生成し、ヘッダとフッダをつけたMarkdown(MDX)に、Tailwindで標準的なスタイリングができるようになったが、まだそのMarkdownは、つかいものにならないので、GitHub Flavored Markdown拡張しなければいけないという話です。

ということで、GFM(GitHub Flavored Markdown)のプラグインを追加します。
remark-gfmです。

npm install remark-gfm

現在(2023/10/13現在)、remark-gfm@4.0でエラーが発生します。

Error: [next-mdx-remote] error compiling MDX:
Cannot read properties of undefined (reading 'inTable')

デグレードインストールしてください。

npm install remark-gfm@3.0

さらに課題です。
ECM問題
[]https://nextjs.org/docs/app/api-reference/next-config-js

next.config.jsは通常のノード.jsモジュールであり、JSON ファイルではありません。>Next.js サーバーとビルド フェーズで使用され、ブラウザーのビルドには含まれていません。
ECMAスクリプトモジュールが必要な場合、使用しましょう

となっているためちょっと不安ですがnext.config.jsをnext.config.mjsにリネームします。
remarkGfmをインポート宣言し、プラグインとして記載します。下記のようになります。

 mv next.config.js next.config.mjs

next.config.mjs

// next.config.mjs

import nextMDX from "@next/mdx";
import remarkGfm from "remark-gfm";

const withMDX = nextMDX({
 extensions: /\.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",
 },
});

/** @type {import('next').NextConfig} */
const nextConfig = {
 // Configure pageExtensions to include md and mdx
 pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
 // Optionally, add any other Next.js config below
 reactStrictMode: true,
};

// Merge MDX config with Next.js config
export default withMDX(nextConfig);

それではpage.mdxの中身をremark-gfmのサンプルremark-gfmと入れ替えます。

# GFM

## Autolink literals

www.example.com, https://example.com, and [e-mail].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

npm run dev 

ブラウザーから、http://localhost.:3000/blog/hello-worldにアクセスして表示しましょう。

プラグイン自体は動いてますね。問題は、

## Footnote

A note[^1]

[^1]: Big note.

の標準スタイルでFooterよりも下にいってしまっています。とりあえずbottom-0 absoluteにして、下に逃がしました。

src/app/component/footer.tsx

export default function Header() {
 return (
   <header className='w-full bottom-0 absolute flex justify-center bg-slate-300 p-6 text-3xl'>
    header
   </header>
 )
}

以上となります。