dynamic routing with nextjs before the page name

Question

I am using react with Nextjs and i would like to use a dynamic name before the page name instead after.

Per example i have 2 files about.tsx and music.tsx wish loads as:

localhost:3000/about

localhost:3000/music

What i would like is:

localhost:3000/nirvana/about

localhost:3000/nirvana/music

localhost:3000/metalica/about

localhost:3000/metalica/music

and to be able to identify the dynamic slug before the page name, so i can know which band name is, does anyone know how to do this with nextjs?

thank you

Answer 1

You can create pages/[music_type]/about.js and pages/[music_type]/music.js files to make music_type dynamic. You can even add dynamic route for '/about ' and '/music' by creating pages/[music_type]/[sub].js