カテゴリ別一覧ページを作りたい

Question

前提・実現したいこと

Next.jsでブログを作成しています。
カテゴリ別で投稿を一覧表示するページを作りたいのですが、動的ルーティングの方法がよくわからず詰まっています。

各投稿はMarkdownで書かれています。
Next.jsのチュートリアルを参照に、全投稿を一覧表示するページの作成は完了しました。

各Markdownのfrontmatterにカテゴリ名を記載し、そのカテゴリ名ごとに一覧ページを作りたいと思っています。

このケースの場合、getStaticPropsをどのように実装すれば良いのでしょうか。

ページ構成は以下のようになっています。

root
├ .next/
├ node_modules/
├ styles/
│ ├ globals.css
│ └ その他各CSS
├ pages/
│ ├ app.js
│ ├ 400.js
│ ├ api.js
│ ├ index.js
│ ├ posts/
│ ├ [id].js //全記事一覧ページ
│ └ category/
│ └ [categories].js //カテゴリ別一覧ページ
├ components/
│ ├ layout.js
│ ├ date.js
│ └ layout.module.css
├ lib/
│ └ post.js
├ public/
│ └ img
│ ├ favicon.ico
│ └ その他画像
├ package-lock.json
├ package.json
└ posts/
└ 各投稿（Markdown）

該当のソースコード

lib/posts.js

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'posts')

~省略~

export async function getAllPostCategories(id){
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const matterResult = matter(fileContents)
  const categoryNames = matterResult.category
  return categoryNames.map(categoryName => {
    const categoryNames = categoryNames
    return {
        params: {
          category: categoryName
        }
      }
  })
}

pages/posts/category/[category].js

import Layout from '../../../components/layout'
import { getAllPostCategories } from '../../../lib/posts'

export async function getStaticPaths(){
    const paths = getAllPostCategories()
    return {
        paths,
        fallback: false
    }
}

export default function Category(){
    return <Layout>...</Layout>
}

posts内のMarkdown

---
title: '◯◯◯'
date: '◯◯◯'
category: 'カテゴリ１'
---

本文

エラー

現在は以下のようなエラーが出ています。

Error: Invalid paths value returned from getStaticPaths in /posts/category/[category].
paths must be an array of strings or objects of shape { params: [key: string]: string }

よろしくお願いいたします。