I'm currently working on setting up a blog using Next.js and TypeScript, and I've encountered an issue with [slug].tsx. The error message I'm receiving is:
Build error occurred Error: A required parameter (slug) was not provided as a string in getStaticPaths for /blog/[slug]
I've been following a tutorial closely, and you can find the specific timestamp here:
https://youtu.be/jJF6oBw1lbo?t=582
Initially, I had success in converting the tutorial from JavaScript to TypeScript until I ran into this particular issue which is now causing the build to fail.
When I attempt to run "yarn run dev", I encounter the following error:
TypeError: Cannot read property 'tap' of undefined
Below is the code snippet for [slug].tsx:
import { GetStaticPaths, GetStaticProps } from 'next'
let client = require('contentful').createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
})
type Params = {
params: {
slug: string
}
}
export const getStaticPaths: GetStaticPaths = async () => {
let data = await client.getEntries({
content_type: 'article',
});
return {
paths: data.items.map(item => ({
params: {slug: item.fields.slug},
})),
fallback: true,
}
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
let data = await client.getEntries({
content_type: 'article',
'fields.slug': params.slug
})
return {
props: {
article: data.items[0]
}
}
}
export default function Article({ article }) {
return <article>
<h1>{article.fields.title}</h1>
{article.fields.content}
</article>
}
I suspect the issue might have to do with the data type of the slug. Should I explicitly define it as a string? And if so, how can I go about doing that?