microCMS × Next.js 14 × TypeScriptでブログを作成する
目次
こんにちは、さかです。
今回はmicroCMSとNext.js14(App Router)を使ったブログの作成方法を紹介します。
また、こちらは前回紹介したNext.js14(App Router)で開発環境を構築するから見ていただけると理解しやすい内容となっているので、まだ記事を見てない方はこちらから見ていただけると理解しやすいと思います。
基本情報を入力する
microCMSでAPIを作成します。
また、API作成にあたり、ログイン情報が必要になるので、まだログインしていない場合はログイン情報を入力してから基本情報を入力します。
さっそく作っていきます。
サービスを作成する
ログインができたら、サービス作成をします。
ここでは「１から作成する」を選択します。
サービス情報を入力する
サービス情報を入力します。
今回は練習として「練習用」と入力します。
サービスIDはプロジェクトに合わせて変更してください。
入力後、「サービスを作成する」をクリックして、「サービスを作成しました」の画面に切り替わります。
APIを作成する
ログインができたら、基本情報を入力していきます。
API作成画面から自分で決めるをクリックします。
APIの基本情報を入力する
次にAPI名とエンドポイントを入力します。
今回はブログ作成なので、API名とエンドポイントにblogと入力します。
APIの型の選択する
次にAPIの型を選択します。
型はリスト形式を選択します。
APIスキーマを定義する
型の設定ができたら、次はAPIスキーマを定義します。
以下内容を入力していきます。
これでAPIの作成は完了です。
コンテンツを入力する
APIの作成ができたので、次はコンテンツを入力していきます。
画像内にある「追加」をクリックします。
その後、作成したAPIスキーマに合わせて、各項目が表示されるので、各情報を入力してきます。
入力したら、右上にある「公開」ボタンをクリックします。
これでblogが公開されるようになります。
Next.jsでブログを表示する
ここからNext.jsで実装していきます。
実装にあたり、前記事で紹介した内容を元に進めていきます。
envファイルを作成する
envファイルを作成します。
microcmsはAPIキーを使ってデータの取得や送信をします。
APIキーは、インターネット上で公開することはセキュリティ上よくないので、.envファイルで保護します。
今回はローカル上のみ実行するので、.env.localファイルとして作成しておきます。
APIキーを取得する
サイドバナーにある「権限管理」の「1個のAPIロール」をクリックするとAPIキーがあります。
コピーアイコンをクリックするとAPIキーがコピーされますので、さきほどNext.jsで作成した.env.localファイルにコピーしたAPIキーを貼り付けます。
API_KEY = "APIキー"これでAPIを使ってデータを取得することができます。
サービスドメインを設定する
サービスドメインは管理画面にある「APIプレビュー」をクリックして表示されるドメインがサービスドメインになります。
下線の箇所をコピーして、.env.localファイルに貼り付けます
SERVICE_DOMAIN = "サービスドメイン"
API_KEY = "APIキー"microcms-js-sdkの準備をする
公式で用意されているmicrocms-js-sdkをインストールして、blogデータを取得します。
ターミナルを開き、以下のコマンドを実行します。
npm install --save-dev microcms-js-sdkインストールできたらappディレクトリ配下に_libsフォルダを作成して、microcms.tsファイルを作成します。
microcms.tsファイルには以下の内容を記述します。
import { createClient } from 'microcms-js-sdk';
// microCMSClientの作成
export const microCMSClient = createClient({
serviceDomain: process.env.SERVICE_DOMAIN || '',
apiKey: process.env.API_KEY || '',
});このコードでは、SDKの初期化を行い、service-domainとapi-Keyを設定することで、データを取得することができます。
データを取得する
続けて、データを取得します。
先ほどのmicrocms.tsファイルに以下のコードを記述します。
// blogの取得
export const getBlog = async () => {
const result = await microCMSClient.getListDetail({
customRequestInit: {
cache: 'no-cache',
},
endpoint: 'blog',
contentId: 'shtmtrhblg',
queries: {
fields: ['id', 'title', 'thumbnail', 'content'],
},
});
return {
props: result,
image: result.thumbnail,
};
};このコードついて解説すると、customRequestInitでcacheオプションを使用しています。
今回は'no-cache'にして常にAPI経由でデータを取得するようにしています。
endpointはblogにすることでblogコンテンツを参照し、contentIdは管理画面の「コンテンツID」を使います。fieldsは取得したいデータを絞ってデータを取得しています。
型を定義する
データの型を定義します。
typesフォルダを作成して、その配下にblog.tsファイルを作成します。
以下はコードになります。
export type BlogDataType = {
id: string;
title: string;
thumbnail: {
url: string;
height: number;
width: number;
};
content: string;
};型定義したら、getBlog関数内で型エイリアスを使用して、データ型を指定します。
// blogの取得
export const getBlog = async () => {
const result = await microCMSClient.getListDetail<BlogDataType>({ // 型を定義
...
};これでデータの構造を正確に把握できるようになります。
ブラウザでデータを表示する
取得したデータをブラウザ上で表示します。
以下は、ブラウザ表示するためのコードです。
import { getBlog } from '@/app/_libs/microcms';
import Image from 'next/image';
import parse from 'html-react-parser';
export default async function Home() {
const { props, image } = await getBlog();
console.log(props);
return (
<>
<h1>{props.title}</h1>
<div>
<Image
src={image.url}
width={image.width}
height={image.height}
alt="アイキャッチ"
/>
</div>
<div>{parse(props.content)}</div>
</>
);
}これでコードの記述は完了です。
また、props.contentのデータ内はHTML文字列で返されているため、html-react-parserを使ってHTML文字列をReact要素に変換する必要があります。
事前にインストールして、使えるようにしておきましょう。
npm install html-react-parser外部画像を読み込む
この設定をしていないと、エラーが出てしまい、取得したデータがブラウザに表示されません。
最後にnext.config.mjsファイルを修正して外部画像を読み込めるように修正します。
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.microcms-assets.io',
},
],
},
};
export default nextConfig;これでブラウザ表示されるようになります。
まとめ
以上でmicrocmsを使ったブラウザ表示方法は以上です。
スタイルを適用させることも可能ですので、好みに合わせて編集してみてください。
