ヘッドレスCMSから記事情報の取得

masterak

ヘッドレスCMSから、データを取得していい感じに表示する。

使用するフレームワーク・ライブラリ・CMS

参考一覧

masterak

カスタムフィールド
カスタムフィールドはAPIスキーマで選択可能なフィールドをベースに、複数のフィールドを組み合わせたり、レイアウトを調整できる機能です。
新しい記事の作成などに、自分のカスタムした要素を追加できる。スキーマ定義にはメタ情報などは標準でないので、自分でカスタムフィールドを使ってテンプレートを作成する。

contentId
フォーマットの確認が行われるケース

コンテンツIDの変更時
PUT APIの利用時
ファイルインポート時（コンテンツIDを指定する場合）

<dl>: 説明リスト要素
<dl> は HTML の要素で、説明リストを表します。この要素は、一連の用語（<dt> 要素を使用して指定）と説明（<dd> 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。

masterak

MicroCMS関連のエラー

~~Tailwind CSS が消える問題~~
microCMS のチュートリアルに沿って、作成してビルドした結果、すべてのページにTailwind CSSが適応されない。 -> import "./globals.css";をいつの間にか、消していただけだった...

~~get list関数を実行しても、複数のリストを表示出来ない問題~~
App router の仕様でした。.nextディレクトリの内容は、ビルドをしても継承される
.nextディレクトリを削除してから、Build を実行すれば解決する。

~~APIで取得したhtml データに、Tailwind CSSを適応出来ない問題~~
index.module.cssを使ったほうが読み易いので、削除

~~microCMS公式テンプレートのpディレクトリ~~
p: page 又はpagination の略称

~~paginationからディレクトリのネストが深くなると、リスト表示がうまくいかない~~
basePath にディレクトリを追加

masterak

Next.js

とても参考になる記事

ISR(Incremental Static Regeneration)
直訳すると、(段階的な静的サイト生成)となります。
簡単に説明すると、リクエストに対して静的にビルドされたページを返す。かつ、有効期限を超えたら非同期で静的ページの再生成をSSRで行うことです*。

notFound function
notFound()関数を呼び出すと、NEXT_NOT_FOUNDエラーがスローされ、スローされたルートセグメントのレンダリングが終了します。Not-foundファイルを指定することで、セグメント内で Not Found UI をレンダリングすることで、このようなエラーを潔く処理することができます。

masterak

VScode のデバッグツール

cd next_app_name
mkdir touch
touch launch.json

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
          {
            "name": "debug server",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
          },
          {
            "name": "debug client",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
          }
        ]
      }

F5 ：デバッグスタート

example

// ブログ一覧を取得
export const getList = async (queries?: MicroCMSQueries) => {
    const listData = await client.getList<Blog>({
        endpoint: "reports",
        queries,
        }).catch(notFound);
🔴    console.log(listData);
    return listData;
    };

デバッグコンソール
{contents: Array(10), totalCount: 11, offset: 0, limit: 10}

masterak

Swiper

使用するオプション

Autoplay

ソースコード

'use client';

import Link from 'next/link';
import { News } from '@/libs/client';
import { formatDate } from '@/libs/utils';
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from 'swiper/modules';

import 'swiper/css'

type Props = {
    articles?: News[];
};

export default function AnimationNewsTimeline({ articles }: Props) {

    if (!articles) {
        return null;
    }
    if (articles.length === 0) {
        return <p>記事がありません。</p>;
    }

return (
    <section>
        <div className="flex text-center">
            <Swiper
            spaceBetween={30}
            centeredSlides={true}
            autoplay={{
              delay: 500,
              disableOnInteraction: false,
            }}
            modules={[Autoplay]}
            className="mySwiper"
            >
                {articles.map((article) => (
                    <SwiperSlide key={article.id}>
                        <Link href={`/news/${article.id}`}>
                            {formatDate(article.publishedAt || article.createdAt)}:{article.title}
                        </Link>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    </section>
);
}

祖先要素にclassName = "flex-grow flex "があると、表示がバグる模様。

デモ

ニュースティッカーデモ

ヘッドレスCMSから記事情報の取得

ヘッドレスCMSから、データを取得していい感じに表示する。

参考一覧

TODO

FIX

MicroCMS関連のエラー

Next.js

VScode のデバッグツール

Swiper

ソースコード

デモ