Breath Noteへようこそ。このブログではフロントエンドからバックエンドまでフルスタックなWeb技術の話題や備忘録を掲載しています。わかりやすい記事を心掛けて更新しているので、ドキュメントの確認やバグフィックスのお供にどうぞ。

Amazon.comにより提供されているクラウドコンピューティングサービス

コンピュータプログラムで問題を解決するための手順や計算方法のこと

Algorithm

継続的インテグレーション＆継続的デリバリーの略で、アプリケーションの構築、テスト、および展開の自動化を指す

CI/CD

コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのDocker​社製オープンソースソフトウェア

Docker

GitHub社によって運営されているソースコードの変更履歴を管理するホスティングサービス

GitHub

静的なHTMLをベースに、JavaScriptを用いたAPIを通じて動的なコンテンツを扱うWebサービスのアーキテクチャ

Jamstack

Facebook社がOSSとして開発を進めているJavaScript用テスティングフレームワーク

Jest

MVCモデルでWebアプリケーションを開発できるオープンソースWebアプリケーションフレームワーク

Laravel

GoogleのMaterialデザインをベースに開発された、ウェブ開発をより高速かつ簡単にするReactコンポーネント

Material-UI

Oracle社が中心となって開発しているオープンソースのリレーショナルデータベース管理システム

MySQL

Vercel社がOSSとして開発を進めているReactベースのフロントエンドフレームワーク

Next.js

The PHP Groupによってコミュニティベースで開発されているオープンソースの汎用プログラミング言語。

Facebook社とコミュニティによって開発されているUI構築のためのJavaScriptライブラリ

React

マイクロソフトが開発・販売しているGUIを採用したオペレーティングシステムの製品群

Windows

Breath Note (3) - 時間を節約するための技術ブログ

Next.jsのチュートリアルでは、マークダウンをパースする方法として[remark](https://github.com/remarkjs/remark)を利用していますが、remarkだけではnext/imageコンポーネントやカスタムリンクを使用できません。

これを解決する方法として[MDX](https://mdxjs.com/)という**マークダウンにJSXを埋め込む技術**が存在します。

今回はこのMDXと、リモートから受け取ったMDXをJSXにパース出来る[next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)というライブラリを使って、ヘッドレスCMSから受け取ったマークダウンをJSXへ変換する仕組みを作ります。

今回の参考記事は以下の通りです。

- [Next.jsでCMSにMDX形式で登録したコンテンツを利用する ―next-mdx-remoteの使い方―](https://fuyu.hatenablog.com/entry/2021/01/17/235610)
- [MDX Remote Example](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote)

## 今回作るもの

機能を実装する前に、この機能を利用した際の、変換前のマークダウンと変換後のHTMLをそれぞれ載せておきます。

### 画像

`<img>`タグを記述するだけで自動的にnext/imageコンポーネントに変換されます。

本来はマークダウン書式から変換したかったのですが、next/imageに必須の`width`属性と`height`属性を解決しつつマークダウン書式で記述するよりは、`<img>`タグを使う方がシンプルに済みそうだったため、こちらを採用しました。

<div className="codeblock-filename">MDX -> HTML</div>

```html

<img src="url.png" width="850" height="50" alt="画像" />


<div class="image-wrapper">
  <div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
    <div style="box-sizing: border-box; display: block; max-width: 100%;">
      <img
        alt=""
        aria-hidden="true"
        role="presentation"
        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUwIiBoZWlnaHQ9IjQ0NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="
        style="max-width: 100%; display: block; margin: 0px; border: none; padding: 0px;"
      >
    </div>
    <img alt="画像"
      src="/_next/image?url=url&w=1920&q=75"
      decoding="async"
      srcset="/_next/image?url=url&w=1080&q=75 1x, /_next/image?url=url&w=1920&q=75 2x"
      style="visibility: inherit; position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
    >
  </div>
</div>
```

### リンク

それぞれのリンクが、next/linkを使用した内部リンクと、属性を追加した外部リンクに変換されています。

<div className="codeblock-filename">MDX -> HTML</div>

```markdown

[内部リンク](/keywords)
[外部リンク](https://twitter.com/code_shinki)


<a href="/keywords">内部リンク</a>
<a href="https://twitter.com/code_shinki" target="_blank" rel="noopener noreferrer">外部リンク</a>
```

## next-mdx-remoteにパースさせる

それでは早速機能を実装していきます。

next-mdx-remoteを`npm`か`yarn`で導入したら、記事ページに変更を加えましょう。

next-mdx-remoteで利用可能なメソッドは`renderToString()`と`hydrate()`の二種類です。

<div className="codeblock-filename">Post.tsx</div>

```tsx
import CustomImage from 'components/CustomImage' // 後で作ります
import CustomLink from 'components/CustomLink' // 後で作ります
import hydrate from 'next-mdx-remote/hydrate'
import renderToString from 'next-mdx-remote/render-to-string'
const rehypePrism = require('@mapbox/rehype-prism')

type Props = {
  post: PostType
}

// 1.
const components = {
  img: CustomImage, // imgタグをカスタムコンポーネントに変換
  a: CustomLink, // aタグをカスタムコンポーネントに変換
}

const Post: NextPage<Props> = ({ post }) => {
  // 3.
  const body = hydrate(post.body, { components })

  // dangerouslySetInnerHTMLを使わず直接出力
  return <div className="wrapper">{body}</div>
}

export default Post

export const getStaticProps: GetStaticProps = async (context) => {
  // 記事を取得する
  const slug = context.params.slug
  const sourcePost = await getPost(slug)

  // 2.
  const post = {
    ...sourcePost,
    body: await renderToString(sourcePost.body, {
      components,
      mdxOptions: {
        // 今回はシンタックスハイライト処理を挟んでみます
        rehypePlugins: [rehypePrism],
      },
    }),
  }

  return {
    props: {
      post,
    },
  }
}

```

必要な部分を抜き出し、next-mdx-remoteに関する処理にコメントをつけています。

1. next-mdx-remoteで変換するコンポーネントを定義
1. ビルド時に`renderToString()`でマークダウンをパース
1. クライアント実行時に`hydrate()`でレンダリング

今回は`renderToString()`に[@mapbox/rehype-prism](https://github.com/mapbox/rehype-prism)プラグインを挟むことで、シンタックスハイライトも行っています。

一見`renderToString()`を使ったビルド時の処理だけで良さそうに思えますが、next/imageなどの[クライアント側で動作するコンポーネント](https://zenn.dev/catnose99/articles/883f7dbbe21632a5254e#%E7%94%BB%E5%83%8F%E3%81%8C%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%95%E3%82%8C%E3%82%8B%E4%BB%95%E7%B5%84%E3%81%BF)は`hydrate()`を用いたクライアント側でのレンダリングも必要になります。一度`hydrate()`無しで試してみましたが、変換はされるもののクライアント側での画像最適化などが行われませんでした。

## 専用のコンポーネントを作る

次にnext-mdx-remoteに渡すカスタムコンポーネントを作成します。

わざわざ独自のコンポーネントを作らず、直接Next.jsコンポーネントを指定しても良いですが、今後のサイトカスタマイズが容易になりますので、作ることをお勧めします。

<div className="codeblock-filename">CustomImage.tsx</div>

```tsx
import Image from 'next/image'
import React from 'react'

type Props = {
  src: string
  width: string
  height: string
  alt: string
}

const CustomImage: React.FC<Props> = ({ src, width, height, alt }) => {
  return <Image src={src} width={width} height={height} alt={alt} />
}

export default CustomImage
```

`CustomImage`では受け取った属性をもとにnext/imageコンポーネントを返却しています。

<div className="codeblock-filename">CustomLink.tsx</div>

```tsx
import Link from 'next/link'
import React from 'react'

type Props = {
  href: string
}

const CustomLink: React.FC<Props> = ({ href, ...otherProps }) => {
  const isInternalLink = href.substr(0, 1) === '/' ? true : false

  return (
    <>
      {isInternalLink ? (
        <Link href={href}>
          <a>{otherProps.children}</a>
        </Link>
      ) : (
        <a href={href} target="_blank" rel="noopener noreferrer">
          {otherProps.children}
        </a>
      )}
    </>
  )
}

export default CustomLink
```

`CustomLink`では、内部リンクをnext/linkコンポーネントに変換し、外部リンクを`target="_blank" rel="noopener noreferrer"`を付与した通常のリンクに変換して返しています。

next-mdx-remoteはマークダウンから受け取った各属性をPropsに渡すので、コンポーネントを柔軟に構築することが可能です。

## 所感

next-mdx-remoteはなかなか便利ですが、変換対象のコンポーネントを増やせば増やすほど処理が重くなります。サーバーレス関数などと絡めた処理をする場合はタイムアウトに気を付けてください。

ヘッドレスCMSのAPIから文字列として受け取ったマークダウンを、next-mdx-remoteというライブラリを用いてNext.jsコンポーネントに変換する方法を紹介しています。

ヘッドレスCMSから受け取ったMDXをNext.jsコンポーネントに変換する

このブログにヘッドレスCMS (microCMS) と連携したプレビュー機能を実装したので、備忘録を残しておきます。

基本的に以下の記事を参考にしつつ、個人的に深掘りが必要だった部分を追加しています。

- [Next.js Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)
- [Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する](https://blog.microcms.io/nextjs-preview-mode/)

## プレビュー用のAPIルートを作る

今回はNext.jsのAPIルートを利用してプレビュー機能を実装するため、`pages/api`フォルダに`preview.ts`を作成します。

<div className="codeblock-filename">preview.ts</div>

```ts
import { NextApiRequest, NextApiResponse } from 'next'
import fetch from 'node-fetch'
import { API_ENDPOINT, API_KEY, DRAFT_TOKEN } from 'utils/env'

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const token = req.query.secret

  // 共通鍵を用いた簡易的なセキュリティチェック
  if (!token || token !== DRAFT_TOKEN) {
    res.writeHead(302, { Location: `/404` }).end()
  }

  // リクエストのパラメータをもとに、該当する下書き記事が存在するかヘッドレスCMSに確認する
  const draft = await fetch(`${API_ENDPOINT}/posts/${req.query.draftId}?fields=id&draftKey=${req.query.draftKey}`,
    { headers: { 'X-API-KEY': API_KEY } }
  )
    .then((res) => res.json())
    .catch((err) => res.status(500).end())

  // プレビュー用の情報を含めたCookieをブラウザに付与して記事ページにリダイレクト
  res.setPreviewData({
    draftId: draft.id,
    draftKey: req.query.draftKey,
  })

  res.writeHead(307, { Location: `/posts/${draft.id}` }).end()
}
```

このAPIが叩かれると以下の処理を実行します。

1. トークンを用いたセキュリティチェック
1. CMSのAPIから下書き記事を取得
1. Cookieを付与して記事ページへリダイレクト

今回は共通鍵暗号方式でセキュリティチェックを行っています。`DRAFT_TOKEN`の部分は別途`.env.local`などで管理し、GitHubで閲覧出来ないようにしておきましょう。

プレビュー機能に関しては、最後に登場する`setPreviewData()`というメソッドで実現しています。これを利用することにより以下の情報が記事ページの`getStaticProps()`へ渡されます。

<div className="codeblock-filename">props</div>

```
context: {
  preview: true,
  previewData: {
    // setPreviewDataで指定したデータが入る
    draftId: post.id,
    draftKey: req.query.draftKey,
  }
}
```

draftKeyには`req.query.draftId`ではなく`post.id`を使用してリダイレクトしています。これはリダイレクト機能を悪用してユーザーを別サイトへ誘導する**オープン**リダイレクトの脆弱性を回避するために必要な処理です。

## 記事ページにプレビュー処理を追加

次に`preview.ts`から受け取ったデータを用いて記事ページを更新します。このファイルには他にも色々と処理させてますが、今回は必要最低限のコードを抜き出して記載します。

<div className="codeblock-filename">Pages.tsx</div>

```tsx
export const getStaticProps: GetStaticProps = async (context) => {
  let post

  if (!context.preview) {
    // 公開済みの記事 (getStaticPaths経由)
    post = await getPost(context.params?.slug as string)
    // fallbackが有効なので手動でのエラーハンドリングが必要
    if (!post) return { notFound: true }
  } else if (context.preview) {
    // プレビュー記事 (setPreviewData経由)
    post = await fetch(
      `${process.env.API_ENDPOINT}/posts/${context.previewData.draftId}?draftKey=${context.previewData.draftKey}`,
      { headers: { 'X-API-KEY': process.env.API_KEY as string } }
    ).then((res) => res.json())
  }

  return {
    props: {
      post,
    },
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = await getAllPostPaths()

  return {
    paths,
    fallback: true, // pathsに存在しないページ (プレビューページなど) を自動でリダイレクトさせない
  }
}
```

今回は`context.preview`を用いて公開記事か下書き記事かの判定を行っています。この部分は皆さんの記事取得方法にあわせてよしなに変更してください。

## Cookieを削除するAPIルートを作る

ここまでの処理でほぼプレビュー機能は出来ていますが、このままプレビュー用のCookieを放置したままにすると以下のような問題が起こり得ます。

1. プレビュー画面を閲覧する
1. そのまま他の公開済みの記事ページへ遷移する
1. プレビュー画面が表示されてしまう

これは`setPreviewData()`で付与したCookieが[ブラウザ終了まで維持される仕様](https://nextjs.org/docs/advanced-features/preview-mode#clear-the-preview-mode-cookies)が関係しています。Cookieを保持したまま他の記事ページへアクセスすると、`getStaticProps()`で`context.preview: true`が再度読み込まれ、プレビュー用の処理が走ってしまうのです。

そこで、プレビュー用に作成したAPIと同様にCookie削除用のAPIを作ります。`pages/api`フォルダに任意のファイル名で以下のTypeScriptファイルを設置しましょう。

<div className="codeblock-filename">clear.ts</div>

```ts
import { NextApiRequest, NextApiResponse } from 'next'

export default async (_req: NextApiRequest, res: NextApiResponse) => {
  res.clearPreviewData()
  res.writeHead(302, { Location: `/` }).end()
}
```

`clearPreviewData()`でプレビュー用のCookieを削除した後にトップページへリダイレクトしています。少し面倒ですが、プレビューモードを利用した後はこのAPIへアクセスすることでページの動作が元に戻ります。

この記事を書いてる途中で気づいたんですが、`getStaticProps()`で記事を取得した後に`clearPreviewData()`でCookieを削除してしまっても良いかもしれませんね。

## APIへアクセスするためのURLを設定する

最後にヘッドレスCMSからAPIを叩くためのURLを設定します。私の場合は以下のようになりました。ちなみに、共通鍵として利用するセキュリティ用のトークンは`preview.ts`のトークンと一致させておく必要があります。

<div className="codeblock-filename">URL</div>

```
https://[Your Domain]/api/preview?secret=[セキュリティ用のトークン]&draftId={CONTENT_ID}&draftKey={DRAFT_KEY}
```

以上でプレビュー機能が完成しました。

## 所感

実際に上記のURLでプレビュー用APIへアクセスすると、少し読み込みを挟んでプレビュー記事が表示されたかと思います。プレビュー機能はサーバーレス関数を用いてSSRで動いているため、多少時間がかかるようです。

ちなみに`next build`&`next start`で起動したローカル環境ではプレビュー機能が使えません。`next dev`で起動するローカル環境か、サーバーレス関数をサポートしている本番環境へデプロイした後で確認してください。

VercelへデプロイしているNext.js製のブログにプレビュー機能を追加します。本記事ではヘッドレスCMSサービスのmicroCMSと連動したプレビュー機能を実装しながら、セキュリティの設定やCookieの管理方法を説明しています。

ヘッドレスCMSから受け取ったMDXをNext.jsコンポーネントに変換する

JamstackなNext.jsブログにプレビューモードを実装する