このブログでContentfulからマークダウンで書いた記事をHtmlに変換してシンタックスハイライトもつけて表示させていますが、unifiedを使ってやってみたのでその備忘録です。

## unifiedとは
[unifiedjs/unified: ☔️ interface for parsing, inspecting, transforming, and serializing content through syntax trees](https://github.com/unifiedjs/unified)

githubの最初の紹介文には以下のように書かれています。

> unified is an interface for processing text using syntax trees. It’s what powers remark (Markdown), retext (natural language), and rehype (HTML), and allows for processing between formats.
> 
> unifiedは、構文木を使用してテキストを処理するためのインターフェースです。これは、remark（Markdown）、retext（自然言語）、およびrehype（HTML）を強化し、フォーマット間の処理を可能にするものです。

unified自体は、テキストデータを異なるフォーマットへ変換するための一連の処理（パース、変換、コンパイル）におけるインターフェースを提供していて、そのインターフェースに対応したライブラリを組み合わせて自由に操作ができるようになっているようです。各フェーズの処理にはそれ用のライブラリがいろいろと用意されています。例えばマークダウンをパースする場合は<a target="blank" href="https://github.com/remarkjs/remark">remark</a>がありますし、HTMLをパースしたい場合は<a target="blank" href="https://github.com/rehypejs/rehype">rehype</a>があります。
一応学習用のサイト（<a target="blank" href="https://unifiedjs.com/learn/">Learn - unified</a>）も用意されていました。

## サンプル

実際にマークダウンを変換する部分だけのサンプルをcodesandboxで作ってみました。

<iframe src="https://codesandbox.io/embed/convert-from-markdown-to-html-t4knc?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="Convert-from-markdown-to-html"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

変換する部分のコードは以下になります。各工程で何をやってるかがわかるようにコメントを付けてます。

```js showLineNumbers
// mdToHtml.js

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeFormat from "rehype-format";
import rehypePrismPlus from "rehype-prism-plus";
import remarkGfm from "remark-gfm";
import rehypeStringify from "rehype-stringify";

const mdToHtml = async (markdown) => {
  const result = await unified()
    .use(remarkParse) // マークダウンのパーサー
    .use(remarkGfm) // Autolink literals、Strikethrough、Table、Tasklist、に対応するためのremarkのプラグイン。
    .use(remarkRehype, { allowDangerousHtml: true }) // マークダウンをhtmlに変換するremarkのプラグイン
    .use(rehypePrismPlus) // PrismでHTMLのコードブロックを強調表示するrehypeプラグイン（rehypeRawの前にやらないと、.line-number、.highlight-line、line属性が削られてしまう）
    .use(rehypeRaw) // HTMLで記述されている部分(iframeなど)をパースするためのプラグイン
    .use(rehypeFormat) // htmlをきれいに整形するrehypeプラグイン
    .use(rehypeStringify) // htmlをシリアライズするunified用のコンパイラ
    .process(markdown);
  return String(result);
};

export default mdToHtml;
```

unifiedを使ってMarkdownの記事データをHTMLに変換してNext.jsで表示させる

Next.jsでSPAはどうやるのかなと思って調べたのでメモっておきます。  
こちらの記事が参考になりました。  
<a href="https://colinhacks.com/essays/building-a-spa-with-nextjs" target="_blank">Building a single-page application with Next.js and React Router</a>

ポイントは以下になります。
- SSRを回避してReactRouterを使う
- RewritesでNext.jsのルーティングを制御する

## 1.ReactRouterをダイナミックインポートで読み込んでSSRを回避する
<a href="https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr" target="_blank">With no SSR</a>に書いてあるようにダイナミックインポートでssrをfalseにして読み込むとCSRにできます。なので下記のようにReactRouterをダイナミックインポートで読みこむようにすればCSRでSPAができるようになります。

```js showLineNumbers
// ReactRouterのコンポーネント

const SpaRoot = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path={"/"} component={Top} />
				<Route path={"/about"} component={About} />
			</Switch>
		</BrowserRouter>
	)
}

export default SpaRoot
```

```js showLineNumbers
// pages/index.tsx

export default function Home() {
	const DynamicComponentWithNoSSR = dynamic(() => import('./spaRoot'), { ssr: false })
	return (<DynamicComponentWithNoSSR />)
}
```

## 2.RewritesでNext.jsルーターを制御
ただしそれだけだとNext.jsのルーターの機能とReactRouterの機能が干渉しあって予期しない動作になってしまいます。例えば、物理的に「/」にしかページがない状態で、「/about」を開こうとするとNext.jsは物理的に異なるファイルのページ遷移を行うため404エラーになってしまいます。そこでRewritesを使ってNext.jsのルーターが常にルートページを読み込むように制御してやります。これでNext.jsのルーターとReactRouterの整合性が取れて期待通りの挙動になります。

```js showLineNumbers
// next.config.js

module.exports = {
	async rewrites() {
		return [
			{
				source: '/:any*',
				destination: '/',
			},
		]
	},
}
```

以上でNext.jsでSPAができるようになります。


Next.jsでSPAをやる方法

Next.jsとヘッドレスAPIを使って何か作ってみたかったので簡単なブログを作ってみました。技術スタックはこんな感じです。
- Next.js
- TypeScript
- tailwindcss
- Contentful

Vercelでデプロイしてホスティングしてます。cssには試しにtailwindcssを使ってみましたが、utility-firstなのでclassNameをいちいち考えて決める必要がないのが楽です。JITモードだと任意の値が設定できるようになったりとさらに柔軟に使えるようになって便利です。

Contentfulはマークダウンも対応してるので、マークダウンで書いた記事のデータをContentfulから取得してNext.js側でHTMLに変換して出力するようにしました。コードブロックには下記のような感じでシンタックスハイライトがつくようにしてます。このへんが結構大変でした。

```js {2,5-6} showLineNumbers
export function getAllPostIds() {
	const fileNames = fs.readdirSync(postsDirectory)
	return fileNames.map((fileName) => {
		return {
			params: {
				id: fileName.replace(/\.md$/, ''),
			},
		}
	})
}
```

ちなみにこちらのチュートリアル動画がわかりやすくて参考になりました。  
[Next.js & Contentful Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1 "Next.js & Contentful Tutorial")

とりあえず最低限の機能だけで作ったので、必要に感じた機能は随時追加していこうと思います。
