ダボハゼのブログ
タイトルの通りですが、Next.jsとmicroCMSでブログっぽいものを作る方法です。
細かいところかなり省略していますが、何かの参考にしていただけたら幸いです。
参考サイト
microCMS公式
microcms-js-sdk
目次
事前準備
パッケージのインストール
microCMSで作成したコンテンツを取得するためにmicrocms-js-sdkをインストールします。
npm i microcms-js-sdk
or
yarn add microcms-js-sdk
APIスキーマの準備
microCMSの管理画面から API設定 > APIスキーマと進み、フィールドを準備します。
コンテンツの作成
下記のように、microcms-js-sdkで取得するコンテンツを作成します。
実装
ソースコードはこんな感じです。
ディレクトリ構成
pages/article.tsx
pages/article/[id].tsx
article.tsx
ブログの記事一覧画面(のつもり)です。
client.getでコンテンツの一覧を取得しています。
queriesのfieldsで取得するフィールドを指定しています。
titleは自分が作成したフィールドで、idとpublishedAtはコンテンツ作成時に自動で付与されます。
import useSWR from 'swr';
import { createClient } from 'microcms-js-sdk';
import Link from 'next/link';
const Article = () => { type Article = { id: string; title: string; } const client = createClient({ serviceDomain: "YOUR_DOMAIN", apiKey: "YOUR_API_KEY", }); const fetcher = async (endpoint: string): Promise<Article[]> => { const article = await client .get({ endpoint, queries: { fields: 'id,title,publishedAt' }, }); return article.contents; } const { data, error } = useSWR('article', fetcher) return ( <ul> {data && data?.map((article, index) => ( <li key={index}> <Link href={`/article/${article.id}`}> <a>{article.title}</a> </Link> </li> ))} </ul> );
}
export default Article;[id].tsx
ブログの記事詳細画面(のつもり)です。
client.getListDetailでcontentIdを指定することで指定されたコンテンツidのコンテンツのみ取得しています。
import { useRouter } from 'next/router'
import useSWR from 'swr';
import { createClient } from 'microcms-js-sdk';
const ArticleDetail = () => { type Article = { title: string; body: string; } const router = useRouter(); const client = createClient({ serviceDomain: "YOUR_DOMAIN", apiKey: "YOUR_API_KEY", }); const fetcher = async (endpoint: string): Promise<Article> => { const article = await client .getListDetail({ endpoint, contentId: router.query.id as string }); return article; } const { data, error } = useSWR(router.query.id && 'article', fetcher) return ( <> {data && ( <div> <h1>{data?.title}</h1> <p>{data?.body}</p> </div> )} </> )
}
export default ArticleDetail;IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！
