Create Pages With Dynamic Routes in Blitz.js

Share this video with your friends

Send Tweet

Blitz supports pages with dynamic routes. For example, if you create a file called app/pages/posts/[slug].tsx, then it will be accessible at posts/my-first-post, posts/my-second-post, etc.

Example: If you create app/pages/[slug].tsx that exports a React component like below, it will be accessible at /post/you-slug-param.

import { useParams } from "blitz"

const Post = () => {
  const params = useParams()
  return (
    <div>
      <h1>Post: {params.title}</h1>
    </div>
  )
}

export default Post

Using the useParams or useParam hooks provided by blitz to get the dynamic param and use it in your component.