I've been following the tutorial on the site to build out a small application. I am stuck with a catch-all route or a nested route based on the subdirectory structure.
I have all my files as markdown in the ./posts directory and in ./pages directory I would like to have subdirectories (categories) that some posts live in.
pages/content/category-1/post1
pages/content/category-2/post2
etc
My site is only able to serve content at pages/content/[id].js, if I put [...id].js as a way to catch-all routes, I get this error:
Error: A required parameter (id) was not provided as an array in getStaticPaths for /category/[...id]
If I place [id].js in every subdirectory ./pages/content/category-1/[id].js it works but that is pretty inefficient if I have a ton of category directories.
I am following the tutorial and my [...id].js looks like this:
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import utilStyles from '../../styles/utils.module.css'
import Head from 'next/head'
export default function Post({ postData }) {
return (
<Layout>
<Head>
<title>{postData.title}</title>
</Head>
<article>
<h1 className={utilStyles.headingXl}>{postData.title}</h1>
<div className={utilStyles.lightText}>
</div>
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
)
}
export async function getStaticPaths() {
// Return a list of possible value for id
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
// Fetch necessary data for the blog post using params.id
const postData = await getPostData(params.id)
return {
props: {
postData
}
}
}
