Need some help figuring out route rewrites

[lriggle-strib]

Summary

I'm struggling with a regex rewrite and could use some help.

The website this is for has a hierarchy of section pages that have URLs like /:dynamic-path/:optional-dynamic-path/:optional-dynamic-path, and they should all render the same way. Examples:

• /parent-section
• /other-parent-section
• /parent-section/child-section
• /other-parent-section/other-child-section/grandchild-section

It also has content pages that have urls like /:random-slug/:numeric-id. Examples:

• /some-slug/123456
• /some-other-slug/234567

What I'd like to be able to do is have any content page (identified by the numeric id in the URL) to render on a specific page.tsx file (maybe app/(content)/[id] or app/[slug]/[id]) but when I try and set up a rewrite to grab any url that has a numeric ID in it, it doesn't seem to work, and the urls like /parent-section/child-section end up getting sent there too, even though there are no numbers in it.

I tried modifying the regex example in the documentation (source: '/:slug/:id(\\d{1,})') but this doesn't seem to get the job done, and I'm not really sure what is incorrect based on the example given in the docs. I've also looked through this repo and it has not been helpful.

Can someone please help me figure out how to route these pages correctly?

Additional information

No response

Example

No response

[icyJoseph]

Did you get around trying this? #70303 (comment)

'/:slug/:id([0-9]{1,})'

[icyJoseph]

path-to-regexp, I guess somewhat, expectedly does work with the /:slug/:id(\\d{1,}) matcher too... I'll debug a bit

[icyJoseph]

Ok, so the "vanilla" matching is not the issue

  async rewrites() {
    return [{
      source: '/:slug/:id([0-9]{1,})',
      destination: '/'
    }
    ]
  }

Correctly takes me to / when I go to /foo/1234, but 404's (since I only have a / page), for anything like /foo/bar

[icyJoseph]

I think the issue are the rewrite names, as per your previous discussion, you were rewriting to the same root, test, but if we change that:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  async rewrites() {
    return [
      {
        source: '/:slug/:id(\\d{1,})',
        destination: '/test/:slug/:id'
      },
      {
        source: '/:section*', //for everything else
        destination: '/skip/:section*',
      },
    ]
  }
};

export default nextConfig;

With this tree within app:

src/app
├── layout.tsx
├── page.tsx
├── skip
│   └── [...rest]
│       └── page.tsx
└── test
    └── [slug]
        └── [id]
            └── page.tsx

Then I see that I map correctly, I think:

Screen.Recording.2025-04-10.at.22.56.00.mov

[lriggle-strib]

Thank you for this info @icyJoseph! After reading through what you've provided and playing around with it myself, I think you are correct about me rewriting to the same root.

If my rewrites look like this:

    return [
      {
        source: '/:slug/:id([0-9]{1,})',
        destination: '/:slug/:id',
      },
      {
        source: '/:path*',
        destination: '/:path*',
      },
    ]

And my folder structure looks like this:

app/
├─ [slug]/
│  ├─ [id]/
│  │  ├─ page.tsx
├─ [...path]
│  ├─ page.tsx

It's not going to be able to differentiate, no matter if there is regex in there or not.

Even if I have my folders set up like this, it won't matter because route groups are not something I can specify in the destination:

app/
├─ (content)/
│  ├─ [slug]/
│  │  ├─ [id]/
│  │  │  ├─ page.tsx
├─ [...path]
│  ├─ page.tsx

So what I think we're going to end up doing is adding a folder like /section above /[...path] and call it good enough for now.

Thanks for helping me work through this!