next-routes icon indicating copy to clipboard operation
next-routes copied to clipboard

catch all route?

Open msreekm opened this issue 6 years ago • 9 comments

do we have to define all pages in routes ? if a page is not in route file ,does next-routes find it ? if not, for pages that does not need slug/param ,can we write one route?

msreekm avatar Aug 31 '18 01:08 msreekm

I've only played with next-routes for 5 minutes, but it is my understanding that you do not need to define all routes for all pages - instead, the pages will default to their .js file name, e.g. pages/about.js becomes available as localhost:3000/about with no further action needed.

stoberov avatar Aug 31 '18 19:08 stoberov

it is my understanding that you do not need to define all routes for all pages - instead, the pages will default to their .js file name

This is somewhat true. If you set useFileSystemPublicRoutes: false in your next.config.js and use only this library for routes, then you will need to define all of your routes. If you do not set that config, then the filesystem the default filesystem routing system will be used also. You probably don't want this though, because it means some pages will be accessible through both routing systems, which complicates things, could be bad for SEO (same page served at multiple locations), and could lead to insecure code (expectations for query params won't be met if accessing through default routing).

This should really be documented. I will try to make a PR.

zenflow avatar Aug 31 '18 22:08 zenflow

for pages that does not need slug/param ,can we write one route?

I think the only way to do this (without using two routing systems) is to have a single page (on the Next,js level) with a pageId parameter, because you can't have a single route that maps to multiple Next.js pages.

module.exports = nextRoutes()
  .('page', '/:pageId(home|signup|contact)')
    // '/home' -> 'page', { pageId: 'home' }
    // '/signup' -> 'page', { pageId: 'signup' }
    // '/contact' -> 'page', { pageId: 'contact' } 

You can make the pattern whatever you want. Refer to https://github.com/pillarjs/path-to-regexp

You may want to do code splitting (using import()) in that PagePage, since you won't get it by default.

zenflow avatar Aug 31 '18 22:08 zenflow

Is there a solution to how to have a simple default route? that is, just the "/" route that normally goes to index.js, but when I set userFileSystemPublicRoutes: false, I no longer seem to have a home page. Is it obvious what the routes.add should look like? I tried routes.add("homeRoute",'','index'); and then route to <Link route="homeRoute" > I get a 404.

pkellner avatar Oct 02 '18 03:10 pkellner

@pkellner I think the pattern needs a leading slash? i.e. routes.add("homeRoute",'/','index')

zenflow avatar Oct 02 '18 04:10 zenflow

@zenflow, I did try that. Should have mentioned it.

pkellner avatar Oct 02 '18 04:10 pkellner

Is there currently an issue with Next v8 and catch all routes? I am use a headless API to fetch JSON from a server and all paths should be served from one index.js file. This is the current repo: https://github.com/dohomi/storyblok-mui-nextjs If I open subroutes and do a page reload it leads to 404 Any idea what is missing?

const nextRoutes = require('next-routes')
const routes = module.exports = nextRoutes()

routes.add('/robots.txt','robots.txt')
routes.add('index', '/:slug+')

Thanks

dohomi avatar Feb 20 '19 14:02 dohomi

@dohomi did you find out a solution for catch-all routes?

Bundas avatar Oct 07 '20 12:10 Bundas

@Bundas yes I moved to next 9.x and there you don't need next-routes any longer. Just check the public documentation maybe it fits your use case as well. https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

dohomi avatar Oct 07 '20 23:10 dohomi