Next.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる

Movable Type をヘッドレス CMS として使用し、Data API から取得したデータで Next.js による SSG （Static Site Generation）、所謂 Jamstack なサイトを作成してみようというお話。

公開日: 2020-12-01 09:14
更新日: 2024-12-01 11:21

この記事は「Movable Type Advent Calendar 2020」、1日目の記事です。

Movable Type Advent Calendar、私はてっきり過去に何度か参加させていただいたと思い込んでいたんですが、どうやら今回がはじめてみたいです。初参加で 1日目の記事を書くのはどうなのかとは思いましたけども、新参者は他の方が書いてハードルが上がらないうちに終わらせておこうということで、1日目を選択させていただきました。

さて、前置きはこのへんで。今回は、Movable Type をヘッドレス CMS のように利用しつつ、Next.js の SSG （Static Site Generation）による、所謂 Jamstack な Blog サイトを作るっていうのをお勉強がてらにちょっと試してみたので、サンプルを交えつつ簡単に書いてみたいと思います。

なぜこれを作ろうと思ったのか
前提
必要なパッケージのインストール
- Font Awesome の導入
ディレクトリ構成
設定ファイル
Movable Type Data API について
- カスタムフィールドの使用
各ページの作成
動作確認
静的コンテンツとしてエクスポート

なぜこれを作ろうと思ったのか

Jamstack というと、基本的には Markdown、JSON、YAML といった形式のデータを、ローカルで作成、もしくは API から取得し、そのデータを使用してビルド → デプロイするわけですけども、API からデータを取得する場合、ヘッドレス CMS 以外では、脱・動的ページ生成という文脈で WordPress を使用する例（よくあるパターンとしては、WordPress + GraphQL + Gatsby ですかね）というのはメジャーなものの、Movable Type を使用した例っていうのを見たことがなかったので試してみようかなと思ったのが最初。

もともとスタティックに HTML を生成する Movable Type を、わざわざ Jamstack で生成し直すのも微妙かなとも思いましたけど、Movable Type を記事データ投稿のためだけに使用、つまりヘッドレス CMS 的な使い方にしてしまって、Next.js で開発する方が、MT タグを書いていくより楽なケースってのもあるかなと思いますし、更新系のコンテンツを管理するために Movable Type が稼働する環境さえ 1つ用意しておけば（MovabeleType.net とかでもいいし）、実際のサイト自体はサーバレスで配信できるってのは、企業のコーポレートサイトや Blog みたいな用途なら便利なケースも多いかなと。

もちろん、記事を投稿したり、更新した際の自動ビルドとかどうすんの？みたいな話は別途解決しないといけないですけども。

ということで、ソースコード自体は雑ですが、参考までにということで実際に作ってみたサンプルをもとに解説します。

ちなみに、CodeSandbox に動作するサンプルを作っておきましたので、実際のソースコードや動作はそちらで確認してください。

動作サンプル - CodeSandbox

また、サンプルのソースコードは GitHub にまとめてありますのでどうぞ。

burnworks/nextjs-mt-data-api-ssg-blog-sample: Creating jamstack blog sample using Next.js and Movable Type Data API

前提

今回使用した環境は下記の通りです。基本的には本記事用のサンプルを書いていた、11月中旬時点で最新。

Movable Type 7 r.4701
Data API v4
Node.js 14.15.0 LTS
React 17.0.1
Next.js 10.0.1

稼働している Movable Type がすでに存在し、Node.js はすでに導入済みの前提になります。また、私は普段、npm を使用しているのでその前提で書いていますが、パッケージマネージャに yarn を使用している場合は読みかえてください。

必要なパッケージのインストール

まずは基本的なところですが、作業用ディレクトリに移動して、

npx create-next-app blog-sample

しましょう。これで blog-sample という名前でアプリケーションのひな形が成されます。

cd blog-sample

次に上記コマンドで作成されたディレクトリに移動して、

npm run dev

を実行すると開発サーバが立ち上がりますので、ブラウザで localhost:3000 にアクセスしましょう。これで Next.js の初期ページ的なものが開けば OK です。

一旦 Ctrl + C で開発サーバを停止し、今回のサンプルにおいて、追加で必要なパッケージをインストールします。

Font Awesome の導入

機能的な部分とは全く関係ないんですが、今回のサンプルで 1箇所、Font Awesome を使用していますので、インストールします。

公式に React コンポーネントが提供されていますので、そちらを使用すると簡単です。下記のコマンドをそれぞれ実行してパッケージをインストールしましょう。

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

本筋からは外れるため詳しくは書きませんが、

import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

で読み込んでおいて、次に使用したいアイコンを読み込みますが、例えば今回の作例の中で使用しているアイコン（angle-left）の場合、下記のように指定します。

import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'

法則的には、アイコンを読み込む際に使用する class 名、例えば angle-left アイコンであれば、fa-angle-left をローワーキャメルケース（LCC）に置き換えて faAngleLeft と記述する形ですね。

あとは、実際にアイコンを表示したい箇所で、

<FontAwesomeIcon icon={ faAngleLeft } />

のように使えばよいと。

その他、詳しくは公式ドキュメントを確認してください。

FortAwesome/react-native-fontawesome: Official React Native component for Font Awesome 5

ディレクトリ構成

ここまでの時点で、blog-sample ディレクトリ内は下記のような構成になっていると思います。以降は、blog-sample ディレクトリをプロジェクトのルートディレクトリとして話を進めます。

blog-sample
├ .next/
├ node_modules/
├ styles/
│ ├ globals.css
│ └ Home.module.css
├ pages/
│ ├ api/
│ │ └ hello.js
│ ├ _app.js
│ └ index.js
├ public/
│ ├ favicon.ico
│ └ vercel.svg
├ .gitignore
├ package-lock.json
├ package.json
└ README.md

このうち、今回のサンプルでは、下記のファイルは使用しないので削除してしまっても大丈夫です。

/styles/Home.module.css
/pages/api/hello.js
/public/vercel.svg

あと、

/public/favicon.ico を /public/img/favicon.ico になるように img ディレクトリを作成して移動しておいてください。そうすると後述するソースコードとパスが一致します。

設定ファイル

まず、プロジェクトのルートディレクトリに、Next.js の設定を記述する next.config.js を新規作成して、下記のように設定を記述します。

// next.config.js
module.exports = {
    reactStrictMode: true,
    devIndicators: {
        autoPrerender: false,
    },
    trailingSlash: true,
}

next.config.js に関するドキュメントは下記にありますが、trailingSlash: true という設定で、各ページ URL の末尾につける「/」（トレイリングスラッシュ / Trailing Slash）を強制することができますので、今回はそのようにしています。別に必要ないっていう場合は書かなくても問題はないです。

next.config.js: Introduction - Next.js

また、npx create-next-app で生成されるアプリケーションは、サーバにファイルを転送する際、ドキュメントルートに配置される前提になっています。つまり、ファイル内で参照されるリソースのパスがすべて「/」から始まる絶対パスで表記されるわけですけども、ドキュメントルート以外（例えば https://example.com/blog/ など）で公開する場合は、next.config.js に、下記の設定を記述しておくと、生成されるファイル内のパス表記が、指定した値から始まるようになります。

basePath: '/blog',

basePath について詳しくは公式ドキュメントを確認してください。

next.config.js: basePath - Next.js

次に、package.json をエディタで開き、

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},

上記の記述から、"build": "next build" の部分を、"build": "next build && next export" に変更します。

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

これで、ビルド時、out ディレクトリに、サイトに必要なファイル一式が、Static HTML Export されるようになります。

その他、必須ではありませんが、Autoprefixer などの設定をしておきたい場合は、合わせて記述しておきましょう。

"browserslist": [
  "last 1 version",
  "IE 11"
],

Movable Type Data API について

Movable Type から記事データを取得するため、Data API のエンドポイントについて確認しましょう。Data API は Movable Type 7 で利用可能な v4 を使用します。

公式リファレンスは下記にありますが、今回行いたいのは「記事一覧の取得」ですので、「Entry Collection」内の、「Get」で説明されている方法に基づいてリクエスト URL を決めていきます。

Movable Type Data API v4

まず、Data API のエンドポイントの基本となる URL は下記の通り。[mt-path] は Movable Type のインストールディレクトリです。

https://example.com/[mt-path]/mt-data-api.cgi/v4/

これをベースに、記事一覧をリクエストするためのパスを足していきます。下記のような感じですね。

https://example.com/[mt-path]/mt-data-api.cgi/v4/sites/[siteid]/entries

[siteid] には、記事一覧を取得したい対象ブログの blog_id が入ります。

blog_id が「1」であれば、下記のように。

https://example.com/[mt-path]/mt-data-api.cgi/v4/sites/1/entries

あとは少し条件を足します。公開済みの記事だけ取得したいので status パラメータと、今回はとりあえず最新 5件分の記事を取得したいので、limit パラメータを付け加えましょう。

https://example.com/[mt-path]/mt-data-api.cgi/v4/sites/[siteid]/entries?limit=5&status=Publish

もし、「mt」というディレクトリに Movable Type がインストールされていて、対象としたいサイトの blog_id が「1」であれば、リクエスト URL は下記のようになります。

https://example.com/mt/mt-data-api.cgi/v4/sites/1/entries?limit=5&status=Publish

Data API へのリクエスト URL が確定したら、プロジェクトのルートディレクトリ直下に .env ファイルを作成し、下記のように Next.js の環境変数として指定しておきます。

MT_ENDPOINT_URL=https://example.com/mt/mt-data-api.cgi/v4/sites/1/entries

なお、リクエスト URL 末尾に付けた下記のパラメータは、後述するファイル内で後から指定するので一旦保留しておいてください。

?limit=5&status=Publish

Next.js の環境変数に関しては、下記に公式ドキュメントがあります。

Basic Features: Environment Variables - Next.js

ちなみに、今回のサンプルでは作っていませんが、カテゴリ別の記事一覧ページが作りたいといった場合、Movable Type Data API からは、下記のような URL でカテゴリ一覧が取得できるので（blog_id が「1」の場合の例）、

https://example.com/mt/mt-data-api.cgi/v4/sites/1/categories

このデータから各カテゴリの category_id を取得しておいて、下記のようにカテゴリを指定して記事データを取得すればよいと思います（下記の例は、category_id が「3」の場合の例）。

https://example.com/mt/mt-data-api.cgi/v4/sites/1/categories/3/entries

カスタムフィールドの使用

今回のサンプルで使用する（データを取得してくる対象の）ブログは、Movable Type 標準のフィールド（タイトルや本文など）に加えて、カスタムフィールドが 1つだけ設定されている前提になっています。

具体的には OGP 画像の URL を入力するカスタムフィールドが登録されており、記事ごとに、そこに OGP 画像の URL が入っているという前提で記事個別ページのソースコードが書かれていますので、ご自身の環境で試す場合は注意してください。この辺は環境に合わせて書き換える必要があると思います。

各ページの作成

下準備は終わったので、ここから、実際に各ページを作成していきましょう。

ちなみに、今回は styles 内にある各スタイルシートに関してはとりあえずのレイアウトを作るために適当に書いているだけなので特に触れません。具体的な内容は GitHub にあるサンプルコードを見ていただければわかると思います。

共通のページレイアウトを作成

各ページの作成を楽にするため、まずは全体の共通レイアウトを作ってしまいましょう。全ページ共通のヘッダやフッタはここに記述します。

プロジェクトのルートディレクトリに components ディレクトリを作成し、Layout.js ファイルを新規作成します。

Layout.js ファイルの中身は下記の通り。

import React, { useEffect } from 'react'
import Head from 'next/head'
import Link from 'next/link'
 
import styles from '../styles/layout.module.css'
 
const Layout = (props) => {
 
    const { title, description, url, image, type, children } = props
    const siteTitle = 'サンプルブログ'
 
    const [isSticky, setIsSticky] = React.useState(false)
    useEffect(() => {
        const scrollAction = () => {
            if (150 > window.scrollY) {
                setIsSticky(true)
            } else {
                setIsSticky(false)
            }
        };
        document.addEventListener('scroll', scrollAction, {
            capture: false,
            passive: true,
        })
        scrollAction()
 
        return () => {
            document.removeEventListener('scroll', scrollAction)
        }
    }, [])
 
    return (
        <div className={styles.container}>
            <Head>
                <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
 
                <meta name="description" content={description} />
                <meta property="og:title" content={title ? `${title}` : siteTitle} />
                <meta property="og:site_name" content={siteTitle} />
                <meta property="og:url" content={url} />
                <meta property="og:description" content={description} />
                <meta property="og:image" content={image} />
                <meta property="og:image:secure_url" content={image} />
                <meta property="og:type" content={type} />
            </Head>
 
            <div className={isSticky ? '' : 'isSticky'}>
                <header className={styles.header}>
                    <h1 className={styles.siteTitle}>
                        <Link href="/">{siteTitle}</Link>
                    </h1>
                </header>
            </div>
 
            <main>
                <div className={styles.main}>
                    {children}
                </div>
            </main>
 
            <footer>
                <div className={styles.footer}>
                    <div className={styles.copyright}>
                        <p><small>Sample blog</small></p>
                    </div>
                </div>
            </footer>
 
        </div>
    )
}
 
export default Layout

このうち、下記の部分は、スクロールしたときにヘッダを固定するためのちょっとした仕組みですので、今回のサンプルにおける話の本筋とは関係ありません。不要なら削除しても大丈夫です（useEffect の読み込みも不要）。

const [isSticky, setIsSticky] = React.useState(false)
useEffect(() => {
    const scrollAction = () => {
        if (150 > window.scrollY) {
            setIsSticky(true)
        } else {
            setIsSticky(false)
        }
    };
    document.addEventListener('scroll', scrollAction, {
        capture: false,
        passive: true,
    });
    scrollAction()
 
    return () => {
        document.removeEventListener('scroll', scrollAction)
    }
}, [])

Layout.js では、Head と Link コンポーネントを使用するので読み込み。

import Head from 'next/head'
import Link from 'next/link'

OGP の値などは他のコンポーネントから取得して反映したいので、そのための指定をしておきます。

const { title, description, url, image, type, children } = props
const siteTitle = 'サンプルブログ'

Head 内に必要な記述を入れておきます。

<Head>
    <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
 
    <meta name="description" content={description} />
    <meta property="og:title" content={title ? `${title}` : siteTitle} />
    <meta property="og:site_name" content={siteTitle} />
    <meta property="og:url" content={url} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:image:secure_url" content={image} />
    <meta property="og:type" content={type} />
</Head>

後述する各ページの内容は、下記の部分に読み込まれます。

<main>
    <div className={styles.main}>
        {children}
    </div>
</main>

全ページ共通で head 要素内に入れたい内容を指定

次に pages ディレクトリ内にある _app.js ファイルをエディタで開きましょう。下記のようなソースコードになっていると思います。

import '../styles/globals.css'
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
 
export default MyApp

これを下記のように書き換えて保存します。

import Head from 'next/head'
import '../styles/globals.css'
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}
 
export default MyApp

Head コンポーネントを追加し、ここに全ページ共通で、head 要素に入れたい内容を記述します。例えば、Google Analytics 用のコードなんかもここに記述すればよいでしょう。

次のセクションで説明している _document.js に記述する例が多いのですが、個人的には _app.js に記述する方がよいと思います。

日本語対応

Next.js で生成される HTML は、そのままだと html 要素に lang="en" が指定されてしまいます。今回作成するのは日本語サイトという前提ですので、その辺を設定します。

pages ディレクトリ内に _document.js ファイルを新規作成し、下記のようにソースコードを記述して保存しましょう。

import Document, { Html, Head, Main, NextScript } from 'next/document'
 
class MyDocument extends Document {
    render() {
        return (
            <Html lang="ja" dir="ltr">
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}
export default MyDocument

dir="ltr" の指定はお好みでですが、

<Html lang="ja">

とすることで、生成される HTML ファイルの html 要素に lang="ja" が指定されるようになります。

Data API からデータを取得するための処理を実装

次のセクションから、実際のトップページ（記事一覧ページ）や各記事の個別ページを作成しますが、その前に、それらで繰り返し使うことになる Movable Type Data API からデータを取得する部分の処理を作っておきます。

プロジェクトのルートディレクトリに lib ディレクトリを作成し、api.js というファイルを新規作成しましょう。中身は下記のような感じです。

const ENDPOINT = process.env.MT_ENDPOINT_URL
 
const fetchAPI = async (path) => {
    const res = await fetch(`${ENDPOINT}${path}`).catch((err) => { console.error(err) })
    const json = await res.json()
    return json
}
 
const fetchAllPosts = () => {
    const params = [['limit', '5'], ['status', 'Publish']]
    const param = new URLSearchParams(params).toString()
 
    return fetchAPI(`?${param}`)
}
 
export const getAllPosts = async () => {
    const data = await fetchAllPosts()
    return data
}

前述したセクションで環境変数に指定したエンドポイントの URL をここで読み込みます。

const ENDPOINT = process.env.MT_ENDPOINT_URL

環境変数に URL をセットする際に、末尾のパラメータはあとで付けますと書きましたが、それが下記の部分です。

const fetchAllPosts = () => {
    // ↓ここでパラメータをセット。あとから修正しやすいように
    const params = [['limit', '5'], ['status', 'Publish']]
    const param = new URLSearchParams(params).toString()
 
    return fetchAPI(`?${param}`)
}

getAllPosts() を export することで、他の場所から簡単に呼び出すことができるようになります。

export const getAllPosts = async () => {
    const data = await fetchAllPosts()
    return data
}

トップページ（記事一覧ページ）の作成

そうしたら、やっとですが、記事の一覧ページとなるトップページを作成しましょう。

pages ディレクトリ内に index.js があると思いますので、それをエディタで開いて編集します。今回書いた実際のソースコードは下記の通り。

import Link from 'next/link'
import Layout from '../components/Layout'
import styles from '../styles/top.module.css'
import { getAllPosts } from '../lib/api'
 
export const getStaticProps = async () => {
    const allPosts = await getAllPosts()
    return {
        props: {
            posts: allPosts.items
        }
    }
}
 
const Blog = (posts) => {
    return (
        <Layout
            title="トップページ"
            description="サンプルブログのトップページです。"
            url="https://example.com/"
            image="/img/ogp.png"
            type="website"
        >
            <div className={styles.pageHeader}>
                <h2>新着記事</h2>
            </div>
            <div className={styles.articleList}>
                <ul>
                    {posts.posts.map((post) => (
                        <li key={post.id}>
                            <Link href={`/articles/${post.basename}`}>
                                {post.title}
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        </Layout>
    )
}
 
export default Blog

まず、先ほど作成した共通レイアウトを読み込みます。

import Layout from '../components/Layout'

また、前のセクションで作成しておいた、Movable Type Data API からデータを取得するための処理もここで読み込みますね。

import { getAllPosts } from '../lib/api'

getStaticProps を使用して、Movable Type Data API から JSON 形式のデータを取得します。

export const getStaticProps = async () => {
    const allPosts = await getAllPosts()
    return {
        props: {
            posts: allPosts.items
        }
    }
}

あとは取得したデータをページ内に反映していきましょう。

const Blog = (posts) => {
    return (
        <Layout
            title="トップページ"
            description="サンプルブログのトップページです。"
            url="https://example.com/"
            image="/img/ogp.png"
            type="website"
        >
            <div className={styles.pageHeader}>
                <h2>新着記事</h2>
            </div>
            <div className={styles.articleList}>
                <ul>
                    {posts.posts.map((post) => (
                        <li key={post.id}>
                            <Link href={`/articles/${post.basename}`}>
                                {post.title}
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        </Layout>
    )
}
 
export default Blog

Layout コンポーネントに、先ほど、Layout.js で受け取れるように指定した各データをセットしておきます。

<Layout
    title="トップページ"
    description="サンプルブログのトップページです。"
    url="https://example.com/"
    image="/img/ogp.png"
    type="website"
>

JSON データから必要なデータを取り出していきますが、今回、ここで使用しているのは、各エントリーの id、basename、title です。

<div className={styles.pageHeader}>
    <h2>新着記事</h2>
</div>
<div className={styles.articleList}>
    <ul>
        {posts.posts.map((post) => (
            <li key={post.id}>
                <Link href={`/articles/${post.basename}`}>
                    {post.title}
                </Link>
            </li>
        ))}
    </ul>
</div>

これで、各エントリーのタイトルがリスト表示され、basename をもとに、各タイトルにリンクが設定されることになります。

リンク部分は、Link コンポーネントを使用して下記のように記述していますが、今回は各記事のページが articles ディレクトリ以下に配置される前提で進めるためです。

<Link href={`/articles/${post.basename}`}>

これでトップページが完了。次に各記事ごとのページを生成します。

各記事個別ページの作成

pages ディレクトリ内に articles ディレクトリを作成し、その中に [slug].js を新規作成しましょう。

pages ディレクトリ内で、ファイル名に [] を附与することで「ダイナミックルーティング（Dynamic Routes）」が有効になります。その上で getStaticPaths によってパスを指定することで、ダイナミックルーティングされたページの SSG が可能です。

今回は [slug].js というファイル名にしていますが、これはそのページの用途によってわかりやすい名前でよいと思います。例えばカテゴリ別にページを生成するなら [category].js などとしてもよいでしょう。

[slug].js ファイルの中身は下記のような感じです。

import Link from 'next/link'
import Layout from '../../components/Layout'
import styles from '../../styles/posts.module.css'
import { getAllPosts } from '../../lib/api'
 
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
 
export const getStaticPaths = async () => {
    const allPosts = await getAllPosts()
    return {
        paths: allPosts.items.map((post) => ({
            params: {
                slug: post.basename
            }
        })),
        fallback: false
    }
}
 
export const getStaticProps = async ({ params }) => {
    const allPosts = await getAllPosts()
    const slug = params.slug
    const result = allPosts.items.find((v) => v.basename === slug)
    return {
        props: {
            post: result
        }
    }
}
 
const Slug = (post) => {
    return (
        <Layout
            title={post.post.title}
            description={post.post.excerpt}
            url={post.post.permalink}
            image={post.post.customFields[0].value}
            type="article"
        >
            <div className={styles.title}>
                <h2>{post.post.title}</h2>
            </div>
            <div className={styles.excerpt}>
                <p>{post.post.excerpt}</p>
            </div>
            <div className={styles.entryBody}>
                <div className={styles.body}
                    dangerouslySetInnerHTML={{ __html: post.post.body }}
                />
                <div className={styles.more}
                    dangerouslySetInnerHTML={{ __html: post.post.more }}
                />
            </div>
            <div className={styles.backHome}>
                <FontAwesomeIcon icon={faAngleLeft} />
                <Link href="/">Back</Link>
            </div>
        </Layout>
    )
}
export default Slug

記事一覧ページ同様に、getAllPosts を読み込みますが、lib/api.js までのパスが異なっているので気をつけてください。

import { getAllPosts } from '../../lib/api'

まず、getStaticPaths を使用して Movable Type Data API から取得したデータをもとに、各記事ページのパスをに設定していきます。今回は、各記事の basename からパスを生成しますので、JSON データからその部分を抜き出してセット。

export const getStaticPaths = async () => {
    const allPosts = await getAllPosts()
    return {
        paths: allPosts.items.map(post => ({
            params: {
                slug: post.basename
            }
        })),
        fallback: false
    }
}

fallback: false とすることで、今回設定したパス以外の、存在しないパスにアクセスされたときは 404 を返すようにします。

次に記事ごとのページの中身ですが、上で設定したパスごとに該当する記事のデータを取得しないといけないので、そこをどうするか。

今回は、getStaticPaths から受け取った slug と同じ値の basename を持った記事を探す（find()）っていう方法にしてみました。

export const getStaticProps = async ({ params }) => {
    const allPosts = await getAllPosts()
    const slug = params.slug
    const result = allPosts.items.find((v) => v.basename === slug)
    return {
        props: {
            post: result
        }
    }
}

basename が絶対に重複しない前提のコードになってしまっているので、その辺はもう少し真面目に考えた方がよいかもしれませんけども、Movable Type って basename が重複しないようになってた気がするし、まぁ今回はサンプルなので気にしないということで。

<Layout
  title={post.post.title}
  description={post.post.excerpt}
  url={post.post.permalink}
  image={post.post.customFields[0].value}
  type="article"
>

ちなみに、上記部分の、image={post.post.customFields[0].value} 部分が、先に「カスタムフィールドの使用」セクションで書いたカスタムフィールドからデータを取得している部分です。ここはブログに設定されているカスタムフィールドの数や、カスタムフィールドの種類が異なる場合、修正が必要になるかと思いますし、同じように別のカスタムフィールドからデータを取得してページに反映することも可能ですので、色々と試してみるとよいかもしれません。

動作確認

さて、ここまできたら、再度開発サーバを立ち上げて、各ページが正しく表示されるかを確認してみましょう。

npm run dev

して、ブラウザで localhost:3000 にアクセスします。

トップページに記事一覧が表示され、記事をクリックした時にきちんと記事のページに遷移できれば成功です。エラーが出る場合はエラーメッセージを確認して修正しましょう。

サンプルブログのトップページ表示例

上記は、当 Blog の最新記事 5件を取得して作ってみた、トップページ表示例です

静的コンテンツとしてエクスポート

動作確認ができたら、

npm run build

しましょう。

Page                                                         Size     First Load JS
┌ ● /                                                        2.63 kB        65.8 kB
├   └ css/hoge.css                           327 B
├   /_app                                                    0 B            63.2 kB
├ ○ /404                                                     1.21 kB        64.4 kB
└ ● /articles/[slug]
 
[...略...]
 
λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

上記のようなメッセージと共に build & export が実行されます。エラーがなく処理が終了すれば、プロジェクトのルートディレクトリ直下に out ディレクトリが生成され、Web サイト一式が書き出されていると思います。

ということで、Movable Type Data API から取得したデータを使用して、Next.js で SSG してみるというお話でした。書いてみたら長かった。

Jamstack なサイトを開発する際に Movable Type を使用するケースっていうのはあまりなさそうな気もしますが、ひとつのサンプルとして参考になれば。

Movable Type.net さんなんかも、GraphQL に対応するとか API 側を強化した、低価格な「ヘッドレス CMS」プランとか出してみたら面白いんじゃないですかね。まぁ余計なお世話ですけども。

さて、今回参加させていただいた、「Movable Type Advent Calendar 2020」ですが、明日以降、他の方が色々と参考になる記事を書かれると思いますので、ぜひチェックしてみてください。

Next.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる

目次

なぜこれを作ろうと思ったのか

前提

必要なパッケージのインストール

Font Awesome の導入

ディレクトリ構成

設定ファイル

Movable Type Data API について

カスタムフィールドの使用

各ページの作成

共通のページレイアウトを作成

全ページ共通で head 要素内に入れたい内容を指定

日本語対応

Data API からデータを取得するための処理を実装

トップページ （記事一覧ページ） の作成

各記事 個別ページの作成

動作確認

静的コンテンツとしてエクスポート

関連記事

Web UI で指定した URL に対するアクセシビリティチェックレポートを生成可能な 「Burnworks A11y Reporter Web UI」

アクセシビリティチェック（試験）で補助的に使えるブックマークレット集を更新しました

CSS の :has() 疑似クラスを使って :hover や :focus-within されたセルをわかりやすくハイライトする

tailwindcss-animation-delay プラグインを Tailwind CSS v4 に対応させました

この Blog で使用している Tailwind CSS を v3 から v4 にアップグレードしてみた

Tailwind CSS v4.0 が正式リリース。高速化、CSS ファイル内での設定など大幅進化

JSON データをテンプレートで作るときに、面倒くさい「末尾のカンマ」の処理をほんのちょっとだけ楽にする Movable Type プラグイン

著書 「できるポケット HTML&CSS 全事典」 が 3 度目の全面改訂、「改訂 4 版」 の発売が決定しました

オープンソースのヘッドレス CMS 「Strapi」をさくらの VPS でセルフホストしてみる

details 要素の name 属性によるグルーピングが全ブラウザで利用可能に

トップページ（記事一覧ページ）の作成

各記事個別ページの作成

Web UI で指定した URL に対するアクセシビリティチェックレポートを生成可能な「Burnworks A11y Reporter Web UI」

著書「できるポケット HTML&CSS 全事典」が 3 度目の全面改訂、「改訂 4 版」の発売が決定しました