catch-all with dynamic routes

Feature request

Is your feature request related to a problem? Please describe.

Since next 9 we have finally dynamic routes: https://github.com/zeit/next.js/issues/7607 👍

The one important thing missing, but mentioned in the RFC is the ability to define catch-all pages and i did not find an open issue that tracks the progress of that.

E.g. if you have a list of pages (from a cms or so) that can be nested, where every page has a path (that might contain slashes /), you can’t currently match them with dynamic routes. A possible workaround would be (if you limit the depth of the paths) to do nested multiple pages.

Describe the solution you’d like

i think the solution proposed in https://github.com/zeit/next.js/issues/7607 would be good ( pages/website-builder/[customerName]/%.tsx))

One thing to consider is:

can the page define whether it accepts a path or not? E.g. consider this pattern: content/%.tsx. Given this url-path: “content/about/team”, i would receive this segment: about/team and then e.g. fetch a page somewhere from a cms with this path. If this page does not exist, i would like to show a 404, so the page should “reject” this path.

Describe alternatives you’ve considered

A first-class code-driven routing approach that uses path-to-regexp without custom server would be much more flexible in the future. I think forcing the route pattern to be in the filenames has too much downsides (filesystem restrictions) without adding much value to developers, but that’s my opinion.

[macrozone]

ok i found a (somewhat silly) workaround, assuming the depth of your dynamic pages paths is limited:

1. Create this directory structure in pages:

you can uses as many subfolders as you like, depending on the depth of your dynamic pages

1. in the most inner index.js, you can load your page:

import * as React from "react";

import { withRouter } from "next/router";

const ContentPage = withRouter(({ router }) => {
  // assuming usePage loads a page from a database/graphql with the given path
  const { page } = usePage(router.asPath);
  return <Whatever page={page} />
});

export default ContentPage;

and in any other index.js in this tree:

import page from "./[slug]";
export default page;

1. Now if you want to generate a <Link /> to that page, you need a little trick, e.g. a component like this:

import Link from "next/link";
import React from "react";

// assuming page is an object with .path , e.g. path=/about/team/bigboss
const PageLink = ({ page, ...props }) => {
  const depth = page.path.split("/").length - 1;
  return <Link href={"/" + new Array(depth).fill("[slug]").join("/")} as={page.path} {...props} />;
};
export default PageLink;

This works, however it has a huge problem: When going to a childpage, an addition, identical bundle of that page is also loaded

[timneutkens]

You can see here: https://github.com/zeit/next.js/milestones?direction=asc&sort=due_date it’s not far away.