Currently engrossed in a project for a client using NextJs,
The blog section comprises various paths like blog/[:category], blog/[:category]/[:post], and blog/author/[:author]. To achieve this, I am utilizing getStaticPaths and getStaticProps.
My approach involves fetching all posts and authors from ContentfulAPI, then iterating through them to generate valid paths to be added to the paths array.
Note: It functions correctly when manually coding each path...
Here's my function:
export const getStaticPaths = async () => {
const posts = await DataController.getEntriesByContentType(
"componentBlog",
);
const blogPosts = posts.items.map(item => {
return {params: {blog_post: [item.fields.category.replace(/\s+/g, '-').replace(/'/g, '').toLowerCase(), item.fields.slug]}}
})
const authors = await DataController.getEntriesByContentType(
"author",
);
const authorPaths = authors.items.map(item => {
return {params: {blog_post: ['author', item.fields.slug]}}
})
return {
paths: [
blogPosts,
authorPaths,
],
fallback: false,
}
}
An error crops up when attempting to access a blog link:
error - Error: Additional keys were returned from `getStaticPaths` in page "/blog/[...blog_post]". URL Parameters intended for this dynamic route must be nested under the `params` key, for example:
return { params: { blog_post: ... } }
Keys that need to be moved: 0, 1, 2, 3, 4, 5, 6, 7, 8.
at C:\Workspace\phoenix-v2\next\new-phoenix\node_modules\next\dist\build\utils.js:518:23
at Array.forEach (<anonymous>)
at Object.buildStaticPaths (C:\Workspace\phoenix-v2\next\new-phoenix\node_modules\next\dist\build\utils.js:492:17) at processTicksAndRejections (internal/process/task_queues.js:95:5) {
type: 'Error',
page: '/blog/[...blog_post]'
}
Puzzled about the cause of this error.. appreciate any assistance!