CODEWITHSUNDEEP
reactjsnext.js
Steve Sanders
Steve Sanders

Reputation: 8651

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

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.

Upvotes: 2

Views: 1249

Answers (1)

Nikolai Kiselev
Nikolai Kiselev

Reputation: 6613

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.

Upvotes: 2

Related Questions