next-routes
next-routes copied to clipboard
catch all route?
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?
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.
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.
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.
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 I think the pattern
needs a leading slash? i.e. routes.add("homeRoute",'/','index')
@zenflow, I did try that. Should have mentioned it.
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 did you find out a solution for catch-all routes?
@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