Create dynamic top level page with app routing on Next.js 13

Question

I am using NextJS 13 with app routing and I need to make dynamic pages like the following

mydomain.com/about
mydomain.com/contact

I've created a file in the app directory app/[slug].tsx and put the following code:

import { FC } from 'react'
import React from "react"

interface pageProps {
  params: { slug: string }
}

const Page: FC<pageProps> = ({ params }) => {
  return (
    <h1>{params.slug}</h1>
  )
}
export default Page

Somehow, it redirects to the 404 page. Could you tell me what I am doing wrong?

Read the nextjs documentation and understood the differences of App and Pages routing.

Answer 1

You should name the folder with square brackets and place a page.tsx file inside it.

// in: app/[slug]/page.tsx

import { FC } from 'react'
import React from "react"

interface pageProps {
  params: { slug: string }
}

const Page: FC<pageProps> = ({ params }) => {
  return (
    <h1>{params.slug}</h1>
  )
}
export default Page

for more information here is the official documentation on how to use Dynamic Routes in Next JS.