support breadcrumb style catch-all parallel routes by ztanner · Pull Request #65063 · vercel/next.js

ztanner · 2024-04-25T20:46:29Z

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 · 2024-04-25T20:46:46Z

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 · 2024-04-25T20:50:31Z

Tests Passed

ijjk · 2024-04-25T20:57:23Z

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 · 2024-04-26T00:40:09Z

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 · 2024-04-29T14:58:47Z

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?

Fixes an issue with #65063 where the catch-all param only contains dynamic segments and is missing non-dynamic route segments. This makes building breadcrumbs extremely hard as we're missing information to properly render the correct breadcrumb components. This fix makes parallel route catch-all params behave like the standard catch-all params in non-parallel routes --------- Co-authored-by: Zack Tanner <1939140+ztanner@users.noreply.github.com>

ijjk added created-by: Next.js team PRs by the Next.js team. tests type: next labels Apr 25, 2024

ztanner force-pushed the 04-25-support_breadcrumb_style_catch-all_routes branch from c6825b4 to 05a4b5c Compare April 25, 2024 21:03

ztanner changed the title ~~support breadcrumb style catch-all routes~~ support breadcrumb style catch-all parallel routes Apr 25, 2024

ztanner mentioned this pull request Apr 25, 2024

Catch-all parallel routes don't receive params if a normal route matches the path #62539

Closed

support breadcrumb style catch-all routes

6ec75e8

ztanner force-pushed the 04-25-support_breadcrumb_style_catch-all_routes branch from 05a4b5c to 6ec75e8 Compare April 25, 2024 22:10

ztanner marked this pull request as ready for review April 25, 2024 22:52

ztanner requested review from feedthejim, huozhi, ijjk, shuding, timneutkens and wyattjoh as code owners April 25, 2024 22:52

ijjk approved these changes Apr 26, 2024

View reviewed changes

ztanner merged commit 270a9db into canary Apr 26, 2024

ztanner deleted the 04-25-support_breadcrumb_style_catch-all_routes branch April 26, 2024 16:01

agadzik mentioned this pull request May 1, 2024

Provide non-dynamic segments to catch-all parallel routes #65233

Merged

ztanner mentioned this pull request May 9, 2024

Dynamic segment parallel route does not match static normal route #62656

Closed

github-actions bot added the locked label May 14, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

support breadcrumb style catch-all parallel routes#65063

support breadcrumb style catch-all parallel routes#65063
ztanner merged 1 commit intocanaryfrom
04-25-support_breadcrumb_style_catch-all_routes

ztanner commented Apr 25, 2024 •

edited

Loading

Uh oh!

ztanner commented Apr 25, 2024

Uh oh!

ijjk commented Apr 25, 2024 •

edited

Loading

Uh oh!

ijjk commented Apr 25, 2024 •

edited

Loading

Uh oh!

kevinmitch14 commented Apr 26, 2024

Uh oh!

jer-k commented Apr 29, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

ztanner commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ztanner commented Apr 25, 2024

Uh oh!

ijjk commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests Passed

Uh oh!

ijjk commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

Uh oh!

kevinmitch14 commented Apr 26, 2024

Uh oh!

jer-k commented Apr 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ztanner commented Apr 25, 2024 •

edited

Loading

ijjk commented Apr 25, 2024 •

edited

Loading

ijjk commented Apr 25, 2024 •

edited

Loading

jer-k commented Apr 29, 2024 •

edited

Loading