Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Parameterized Filesystem Routing, e.g. `pages/product/@id.js`

See original GitHub issue

Edit

We settled for this:

FILESYSTEM                 URL
pages/product/@id.js       /product/:id

Original Post

Goal is to add support for Parameterized Filesytem Routing:

FILESYSTEM                 URL
pages/product/[pid].js     /product/:pid

On certain OS, e.g. Linux, filenames starting with a special charcater are poorly handled.

For example, on Linux, a file [pid].js needs the [ character to be escaped, and ls doens’t show the escape character but wraps the filename with '.

$ ls \[pid\].js 
'[pid].js'

Support for a filename like :pid.js is even worse on Linux.

What character could we use that is well supported across all OS?

Issue Analytics

State:
Created 2 years ago
Comments:25 (16 by maintainers)

Top GitHub Comments

1reaction

brilloutcommented, May 8, 2022

Implemented in vite-plugin-ssr 0.4.

1reaction

brilloutcommented, Nov 17, 2021

Hm, AFAICT, it’s confusing and I don’t see the added value.

So far the plan:

/product/42 => /pages/product/@productId.js /product/42/reviews => 404

And with:

// /pages/product/catch-all.page.route.js
export const '/product/*'

/product/42/reviews => /pages/product/catch-all.page.route.js

I like this most so far.

Catch-all routes are seldomly used and forcing the user to create a .page.route.js in order to implement a catch-all route is I’d say ok.

Objections, as always, welcome.

Top Results From Across the Web

Parameterized routes using the filesystem · Issue #859 - GitHub

Just starting to try out next.js, really like it so far! Are there any disadvantages to using the filesystem for parameterized routes?

Next.js Sub-Pages for parameterized routes - Stack Overflow

So to make this clear, you have a folder name pages (where all pages folder and files are), then you have a user...

How to Use File-Based Routing in Next.js - Upmostly

Dynamic Routing with Parameters. Next.js allows you to use brackets to define dynamic routes. The dynamic parts of the route will then be...

Routing - Remix

Nested Routing is the general idea of coupling segments of the URL to component hierarchy in the UI. We've found that in almost...

File System Route API | Gatsby

Use the File System Route API when you want to create dynamic pages e.g. to create ... src/pages/products/{Product.name}.js will generate a route like ......