Next.jsのブログにタグページを実装してみた

はじめに

このブログに、タグページを実装してみたので、軽く紹介したいと思います。

今回実装したのは、下記のようなページです。

詳細の実装については、下記のサンプルアプリを参照してください。下記のサンプルは、記事以外はこのブログとほとんと同じ内容になっています。

GitHub - monda00/next-app-router-mdx-blog: This is a sample blog application using Next.js with App Router with next-mdx-remote.

This is a sample blog application using Next.js with App Router with next-mdx-remote. - monda00/next-app-router-mdx-blog

背景

このブログに関しては、下記の記事で紹介しているようにWorkPressからNext.jsに移行しました。

【個人開発】ブログをWordPressからNext.jsへ移行してみた

はじめに今回、このブログをWordPressからNext.jsで作り変えましたので、その内容に

しかし、カテゴリページは実装していましたが、タグのページは実装していませんでした。というのも、カテゴリは事前に定義しておけばよかったのですが、タグは記事から定義されているのを集めて表示したり、.(ドット)や (スペース)が含まれている場合があるので、実装が面倒だと思い、記事にはタグは表示しているものの、タグごとのページなどは後回しにしていました。

しかし、自分で自分のブログの記事を探すときに、タグがあったほうが探しやすいと思ったので、これを機に実装してみました。

タグの扱い

まず前提として、タグには下記のような文字が含まれている場合があります。

日本語
(スペース)
.(ドット)
/(スラッシュ)

例えば、私のブログの場合だと、おすすめ本やNext.js、Cloud Pub/Subなどといったタグがあります。特にスペース、ドット、スラッシュが含まれている場合は、URLで扱うのに適していないので、URLに適した形に変換する必要があります。

なので、下記のような関数でタグを正規化しています。（英語の大文字小文字も無視して、全て小文字として扱っています）

1export function normalizeTag(tag: string): string {
2  return tag
3    .normalize('NFKC')
4    .replace(/\s+/g, '')
5    .toLowerCase()
6    .replace(/[／＼/]/g, '')
7    .replace(/[.]/g, '')
8}

また、タグに日本語を使って、そのままURLのパスとして使っているので、パスから取ってくるときはdecodeURIComponentを使い、パスにする際はencodeURIComponentを使っています。

1decodeURIComponent(tag)

1encodeURIComponent(tag)

以上のことができれば、あとはカテゴリごとのページなどと同じように、タグごとのページを作成することができます。

まとめ

今回、Next.jsのブログにタグページを実装してみました。タグは日本語やスペース、ドット、スラッシュなどが含まれている場合があるので、URLに適した形に正規化する必要がありますが、それさえできればあとはカテゴリページと同じように実装できました。

具体的な実装は、サンプルアプリの下記のコミットを参照してください。

✨ feat: Add tag page · monda00/next-app-router-mdx-blog@6dbb133

This is a sample blog application using Next.js with App Router with next-mdx-remote. - ✨ feat: Add tag page · monda00/next-app-router-mdx-blog@6dbb133