Next.js × microCMSで関連記事を表示

ブログでよくある関連記事の表示です。
このブログでも下の方に「Read next」というセクションを用意しています。

microCMSで関連記事を表示するには、複数コンテンツ参照を使って表示したい記事を選択します。自分で記事を選ぶので、関連記事というよりは読んで欲しい記事を選ぶといいと思います。

microCMS

「API設定」→「APIスキーマ」で関連記事のフィールドを追加します。種類は「複数コンテンツ参照」を選択し、表示したいAPIを選択します。

ここではブログというAPIでその関連記事を表示したいので、ブログを選択します。

これで記事を書くページに関連記事の項目ができるので、表示したい記事を選択し、記事を公開したらOKです。

Next.js

上記の設定をすると、記事のAPIに related_post が追加されていて、中身は記事のスキーマと同じなので、それを表示するだけです。このブログで作っているReadNextコンポーネントでの実装例です。

import Link from 'next/link'
import { Container, List, Item, StyledLink, Title, Date } from './styles'
import { Props } from './types'
import dayjs from 'dayjs'

export const ReadNext = ({ readNestPosts, className }: Props) => {
  return (
    <Container className={className}>
      <Title>Read next</Title>
      <List>
        {readNestPosts.map((item) => {
          return (
            <Item key={item.id}>
              <Date>{dayjs(item.createdAt).format('YYYY年M月D日')}</Date>
              <Link href={`/blog/${item.category.id}/${item.id}`} passHref>
                <StyledLink>{item.title}</StyledLink>
              </Link>
            </Item>
          )
        })}
      </List>
    </Container>
  )
}

自動で関連記事を表示してくれるわけではないですが、簡単に実装できます。