この記事は 「Movable Type Advent Calendar 2020」、1日目の記事です。
Movable Type Advent Calendar、私はてっきり過去に何度か参加させていただいたと思い込んでいたんですが、どうやら今回がはじめてみたいです。初参加で 1日目の記事を書くのはどうなのかとは思いましたけども、新参者は他の方が書いてハードルが上がらないうちに終わらせておこうということで、1日目を選択させていただきました。
さて、前置きはこのへんで。今回は、Movable Type をヘッドレス CMS のように利用しつつ、Next.js の SSG （Static Site Generation） による、所謂 Jamstack な Blog サイトを作るっていうのをお勉強がてらにちょっと試してみたので、サンプルを交えつつ簡単に書いてみたいと思います。
目次
- なぜこれを作ろうと思ったのか
- 前提
- 必要なパッケージのインストール
- ディレクトリ構成
- 設定ファイル
- 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 に動作するサンプルを作っておきましたので、実際のソースコードや動作はそちらで確認してください。
また、サンプルのソースコードは GitHub にまとめてありますのでどうぞ。
前提
今回使用した環境は下記の通りです。基本的には本記事用のサンプルを書いていた、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 } />
のように使えばよいと。
その他、詳しくは公式ドキュメントを確認してください。
ディレクトリ構成
ここまでの時点で、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） を強制することができますので、今回はそのようにしています。別に必要ないっていう場合は書かなくても問題はないです。
また、npx create-next-app で生成されるアプリケーションは、サーバにファイルを転送する際、ドキュメントルートに配置される前提になっています。つまり、ファイル内で参照されるリソースのパスがすべて「/」から始まる絶対パスで表記されるわけですけども、ドキュメントルート以外 （例えば https://example.com/blog/ など） で公開する場合は、next.config.js に、下記の設定を記述しておくと、生成されるファイル内のパス表記が、指定した値から始まるようになります。
basePath: '/blog',
basePath について詳しくは公式ドキュメントを確認してください。
次に、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 を決めていきます。
まず、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 の環境変数に関しては、下記に公式ドキュメントがあります。
ちなみに、今回のサンプルでは作っていませんが、カテゴリ別の記事一覧ページが作りたいといった場合、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」 ですが、明日以降、他の方が色々と参考になる記事を書かれると思いますので、ぜひチェックしてみてください。
