Dynamic Routes

Often times, your app pages will need to be created dynamically.

Similar to page-pased routes, Flareact allows you to define dynamic routes using React components defined in files.

To define a dynamic route, create a file with a name wrapped by square brackets [], e.g. /pages/[slug].js.

Dynamic Routes with getEdgeProps

If you need to fetch data for your dynamic page component, the dynamic parts will be passed as a params property to your getEdgeProps function.

Example: Your /pages/posts/[slug].js file might look like this:

export async function getEdgeProps({ params }) {
  const { slug } = params;
  const post = await getSomeRemotePost({ slug });

  return {
    props: {

export default function Post({ post }) {

Nested Dynamic Routes

You can also nest dynamic routes, e.g.


The params passed to your getEdgeProps function will contain each dynamic path property:

  params: {

Coming soon: Access dynamic route query params with the useRouter hook.