web
Next.js × microCMSで関連記事を表示
公開日:2022年1月15日
最終更新日:2022年1月30日
ブログでよくある関連記事の表示です。
このブログでも下の方に「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>
)
}
自動で関連記事を表示してくれるわけではないですが、簡単に実装できます。
Read next
- 2022年1月15日Next.js × microCMS × VercelでOGP画像をブログのタイトルで自動生成する
- 2021年12月19日Next.jsとmicroCMSで動的にサイトマップを生成する
- 2022年1月23日Next.js × algoliaで検索機能を実装する
- 2022年1月30日Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける
- 2021年12月12日Next.js × Firebaseでユーザーと関連するデータを削除する機能を作る
- 2022年1月30日Next.js × microCMSで目次をつくる
- 2021年11月20日Next.js × microCMSでカテゴリ一覧ページを作る