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

Next.js

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

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

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

React

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

Windows

Next.js - Breathnote

このブログは、[next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)というパッケージを使い、ヘッドレスCMSから受け取ったマークダウンデータをJSXに変換しています。

next-mdx-remoteは非常に素晴らしいパッケージですが、数式の変換と表示に対応していません。ということで、別のパッケージを噛ませることで対応しました。

本記事では、実装の過程で詰まった箇所を記録しておきます。

## 実装例

[remark-math](https://github.com/remarkjs/remark-math)と[rehype-katex](https://www.npmjs.com/package/rehype-katex)をプロジェクトに追加します。

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

```shell
yarn add -D remark-math
yarn add -D rehype-katex
```

next-mdx-remoteのプラグインオプションに上記2つを追加します。さらに、数式をスタイリングするため、スタイルシートをCDNで読み込みます。

<div className="codeblock-filename">pages/posts/[slug].tsx</div>

```tsx
const remarkMath = require('remark-math')
const rehypePrism = require('@mapbox/rehype-prism')
const rehypeKatex = require('rehype-katex')

const Posts: NextPage<Props> = ({ post }) => {
  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
          integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
          crossOrigin="anonymous"
        />
      </Head>
      <Article post={post} body={body} />
    </>
  )
}

export const getStaticProps: GetStaticProps = async (context) => {
  post = {
    ...post,
    body: await renderToString(post.body, {
      components,
      mdxOptions: {
        remarkPlugins: [remarkMath], // 追加
        rehypePlugins: [rehypePrism, rehypeKatex], // 追加（rehypeKatex）
      },
    }),
  }
}
```

これだけです。

<div className="codeblock-filename">変換前</div>

```
$$
L = \frac{1}{2} \rho v^2 S C_L
$$
```

という文字が、

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

という感じで変換、表示されます。

JamstackなNext.jsブログで数式をスタイリングするためにTexを導入しました。next-mdx-remoteというパッケージに数式変換用のパッケージを噛ませることで実現できました。

next-mdx-remoteに数式変換処理を挟む

Jestは、next/routerをテストできません。というわけでモックを作って対応するのですが、素直にモック関数を作るだけでは動いてくれなかったので、備忘録をアウトプットしておきます。

- [How to mock useRouter?](https://github.com/vercel/next.js/issues/7479)

## モックの作り方

<div className="codeblock-filename">テスト対象のコンポーネント</div>

```tsx
import { useRouter } from 'next/router'

const Example: NextPage = () => {
  const router = useRouter()
  const currentUser = useRecoilValue(currentUserState)

  useEffect(() => {
    currentUser === null && router.push('/login')
  }, [currentUser])

  return (
    <>
      {currentUser ? <Components /> : <Spinner />}
    </>
  )
}

export default Example
```

<div className="codeblock-filename">テストファイル</div>

```tsx
import { useRouter } from 'next/router'
import Example from 'components/Example'

jest.mock('next/router', () => ({ useRouter: jest.fn() })) // モック関数を作成

describe(`*****`, () => {
  afterEach(cleanup)

  test('ログインしていないユーザー', async () => {
    const mockRouter = {
      push: jest.fn() // 今回はrouter.pushを利用します
    }

    render(
      <RecoilRoot initializeState={loggedInInit}>
        <Example />
      </RecoilRoot>
    )

    // ログインページへリダイレクトしているか
    expect(mockRouter.push).toHaveBeenCalledWith('/login')
  })
})
```

Next.jsアプリをJestでテストする際、next/routerのモック化に手間取ったので、備忘録を残しておきます。

Jestでnext/routerをモック化

Next.jsは、Create React Appのように標準のテスト環境を提供していないため、開発者自身がテスト環境を用意する必要があります。

私は、JestとReact Testing Libraryを使ってこのブログをテストしていますが、環境変数を利用しているコンポーネントをテストする際に、Jestが環境変数をうまく読み込んでくれませんでした。

調べてみると、いくつか対処法が見つかったので、採用した方法とその他諸々をアウトプットしておきます。

- [Can't access ENV vars defined in .env.test](https://github.com/vercel/next.js/discussions/16270)
- [Misleading documentation: variables in .env and .env.test are not being loaded in test environment](hhttps://github.com/vercel/next.js/issues/17903)

## 最善策

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

```ts
import { loadEnvConfig } from '@next/env'

export default async (): Promise<void> => {
  loadEnvConfig(process.env.PWD || process.cwd())
}
```

<div className="codeblock-filename">jest.config.js</div>

```js
module.exports = {
  globalSetup: '<rootDir>/setupEnv.ts',
}
```

テスト実行前に`@next/env`の`loadEnvConfig()`で環境変数ファイルを読み込みます。

`loadEnvConfig()`の引数は`process.env.PWD`だけでも動きますが、Windows環境では`process.env.PWD`が`undefined`を返す可能性があるため、`process.cwd()`も追加しています。

## 他の対処法

上記の方法が最善ですが、残りの対処法も紹介しておきます。

### 1. Next.jsのインスタンスを生成する

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

```ts
import next from 'next'
next({})
```

<div className="codeblock-filename">jest.config.js</div>

```js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
```

テストの前にNext.jsをインスタンス化してしまい、Next.js環境下でテストを実施する方法です。

この方法の良いところは、環境変数だけでなくfetch関数なども利用可能になる点でしょう。

ただ、インスタンスの作成にはビルドした`.next`フォルダが必要となります。GitHub Actionsなどを用いてテストをCIで回す場合、毎回`next build`が必要になります。

あと単純にテストが重くなります。

### 2. テスト用にdotenvを別途導入する

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

```shell
yarn add --dev dotenv
```

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

```ts
import dotenv from "dotenv";
dotenv.config({ path: ".env.local" });
```

<div className="codeblock-filename">jest.config.js</div>

```js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
```

上で述べた欠点を改良した原始的な対処法です。

ただ、せっかくNext.jsがビルトインサポートしているdotenvを、テストのためだけに再インストールするのは気が乗りませんでした。

Next.js × Jestのテストにおいて、デフォルトでは環境変数を読み込めません。本記事では、テストの実行前に処理を挟むことにより、環境変数を読み込む方法を紹介しています。

Jestを用いたNext.jsのテストで環境変数を利用する

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の管理方法を説明しています。

Next.js

next-mdx-remoteに数式変換処理を挟む

Jestでnext/routerをモック化

Jestを用いたNext.jsのテストで環境変数を利用する

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

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