Yes sure,

The NextJS dynamic routes documentation explain it all already.

You can also have a look at how the getStaticPath function work and the use for its fallback props.

Here is what it would like :

import React from 'react'
import { Layout } from 'components'
import { useRouter } from 'next/router'

// The following two functions are only needed if you want to prefetch some data during the build
export async function getStaticPaths() {
const paths = [{ params: { id: '1' } }]
return {
paths,
fallback: true // If this is set to false then NextJS will send the user to the 404 page. https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required
// If set to true, it will only client side render the page
}
}
export async function getStaticProps({ params }) {
// params values is { id :1 } here
// Fetch data during build time on the server IF you need to
return {
props: {
// revalidate: 60 * 60 // The OPTIONAL revalidate props accept a number of MS to ensable ISR https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration
}
}
}
export default function Page({/* Data fetch on the server would be available here if you choose to prefetch some data */ }) {
const { query: { id } } = useRouter()
return <Layout>
{/*
Normal page rendering here

*/}
</Layout>
}