Slug that isn't whole file name in Next.js?

Question

I'm attempting to create a route in Next.js that follows a format like:

localhost:3000/post-SLUG

By creating a file with the name:

/pages/post-[slug].js

When I navigate to an example like localhost:3000/post-example I get a 404. Is it possible to do this type of routing? I realize that this is probably not the best URL setup, but I'm trying to match URLs from an already deployed site as a part of a migration to Next.

Answer 1

It's not possible to do it with Next.js routing system because in order to be dynamic the part of URL must match this regular expression:

/\/\[[^/]+?\](?=\/|$)/

So the route have to be /post/[slug]/ .

The /pages/post-[slug].js would be accessible as a static route http://localhost:3000/post-[slug] .

You can utilize a Custom Server to create this kind of routes.