support breadcrumb style catch-all parallel routes

[ztanner]

A common pattern for parallel routes is breadcrumbs. For example, if I have a lot of dynamic pages, and I want to render a parallel route that renders as a breadcrumb to enumerate those dynamic params, intuitively I'd reach for something like app/@slot/[...allTheThings]/page.tsx. Currently however, [...allTheThings] would only match params to a corresponding app/[allTheThings]/page.tsx. This makes it difficult to build the breadcrumbs use-case unless you re-create every single dynamic page in the parallel route as well.

This adds handling to provide unmatched catch-all routes with all of the params that are known. For example, if I was on /app/[artist]/[album]/[track], and I visited /zack/greatest-hits/1, the parallel @slot params would receive: { allTheThings: ['zack', 'greatest-hits', '1'] }

Fixes #62539

Closes NEXT-3230

[ztanner]

• support breadcrumb style catch-all parallel routes #65063 👈
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
buildDuration	17.1s	14.4s	N/A
buildDurationCached	8s	7.6s	N/A
nodeModulesSize	359 MB	359 MB	⚠️ +17.4 kB
nextStartRea..uration (ms)	391ms	392ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
139-HASH.js gzip	31.8 kB	31.8 kB	N/A
2478adb-HASH.js gzip	53.5 kB	53.5 kB	N/A
4967-HASH.js gzip	5.1 kB	5.1 kB	✓
6701.HASH.js gzip	168 B	168 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	228 B	225 B	N/A
main-HASH.js gzip	31.6 kB	31.6 kB	N/A
webpack-HASH.js gzip	1.65 kB	1.64 kB	N/A
Overall change	50.4 kB	50.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
_app-HASH.js gzip	194 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	511 B	512 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	2.52 kB	2.52 kB	N/A
edge-ssr-HASH.js gzip	266 B	265 B	N/A
head-HASH.js gzip	365 B	362 B	N/A
hooks-HASH.js gzip	391 B	390 B	N/A
image-HASH.js gzip	4.32 kB	4.31 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.69 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	393 B	395 B	N/A
withRouter-HASH.js gzip	323 B	323 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.22 kB	1.22 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
_buildManifest.js gzip	481 B	483 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
index.html gzip	527 B	529 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	522 B	524 B	N/A
Overall change	540 B	540 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
edge-ssr.js gzip	108 kB	108 kB	N/A
page.js gzip	3.04 kB	3.05 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
middleware-b..fest.js gzip	626 B	624 B	N/A
middleware-r..fest.js gzip	155 B	154 B	N/A
middleware.js gzip	27.9 kB	27.9 kB	✓
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	28.8 kB	28.8 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
app-page-exp...dev.js gzip	171 kB	171 kB	N/A
app-page-exp..prod.js gzip	98.4 kB	98.4 kB	N/A
app-page-tur..prod.js gzip	99.9 kB	99.9 kB	N/A
app-page-tur..prod.js gzip	94.2 kB	94.3 kB	N/A
app-page.run...dev.js gzip	157 kB	157 kB	N/A
app-page.run..prod.js gzip	93 kB	93 kB	N/A
app-route-ex...dev.js gzip	21.4 kB	21.4 kB	✓
app-route-ex..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.3 kB	21.3 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	65.3 kB	65.3 kB	✓
Overall change	262 kB	262 kB	✓

build cache

	vercel/next.js canary	vercel/next.js 04-25-support_breadcrumb_style_catch-all_routes	Change
0.pack gzip	1.61 MB	1.61 MB	N/A
index.pack gzip	112 kB	112 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: 6ec75e8

[kevinmitch14]

It would be great to document use-cases like this for parallel routes. They really have not clicked for me and the docs example doesn't seem compelling!

[jer-k]

This work is awesome! Really excited for it and dove in this morning to try it out. A question I have is does this only work for dynamic routes? I made a reproduction of the issue I'm seeing here https://github.com/jer-k/parallel-routes. Copying in what I wrote in the README there. Also I can open a new issue if that is preferred

The structure of the above project has @breadcrumbs/[...catchAll]/page.tsx to capture the path for the breadcrumbs.

Then we have two sets of nested paths

• [name]/[last]/page.tsx
• blog/[slug]/page.tsx

When I visit http://localhost:3000/jeremy/kreutzbender I receive both params

rendering in @breadcrumbs / BreadcrumbSlot {
  params: { catchAll: [ 'jeremy', 'kreutzbender' ] },
  searchParams: {}
}
GET /jeremy/kreutzbender 200 in 937ms

Then when I visit http://localhost:3000/blog/test I do not get blog in the path params

rendering in @breadcrumbs / BreadcrumbSlot { params: { catchAll: [ 'test' ] }, searchParams: {} }
GET /blog/test 200 in 34ms

My question is whether this is in the intended behavior. If so, how would I build my breadcrumbs component
to incorporate Blog into it?