Next.js: Use this to catch all routes inside sub directory, so don't need to create sub directory for each slashed URL.
File:
pages/blog/[...slug].js
Url will be:
/blog/post
/blog/post/one
/blog/post/two/three.xyz
Code:
export async function getStaticPaths() {
return {
paths: [
{ params: { slug: ["post"] } },
{ params: { slug: ["post", "one"] } },
{ params: { slug: ["post", "two", "three.xyz"] } }
],
fallback: false
};
}
export async function getStaticProps({ params }) {
const postData = await getDataBySlug(params.slug)
return {
props: {
postData
}
}
}
export default function Post({ postData }) {
return (...)
}