web

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

公開日:2022年1月15日
最終更新日:2022年1月30日
目次
  • microCMS
  • Next.js

ブログでよくある関連記事の表示です。
このブログでも下の方に「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>
  )
}


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

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記