Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

backport: support breadcrumb style catch-all parallel routes (#65063) #70794

Merged
merged 2 commits into from
Oct 4, 2024
Merged

backport: support breadcrumb style catch-all parallel routes (#65063) #70794

merged 2 commits into from
Oct 4, 2024

Conversation

ztanner
Copy link
Member

@ztanner ztanner commented Oct 4, 2024

ztanner and others added 2 commits October 4, 2024 07:31
@ztanner
support breadcrumb style catch-all parallel routes (#65063)
1b72af9 
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
@agadzik @ztanner
Provide non-dynamic segments to catch-all parallel routes (#65233)
c188a24 
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 <[email protected]>
@ijjk
Copy link
Member

ijjk commented Oct 4, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
buildDuration 16.4s 14.8s N/A
buildDurationCached 8.7s 6.5s N/A
nodeModulesSize 200 MB 200 MB ⚠️ +131 kB
nextStartRea..uration (ms) 406ms 402ms N/A
Client Bundles (main, webpack)
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
1a9f679d-HASH.js gzip 53.7 kB 53.7 kB N/A
5428.HASH.js gzip 181 B 180 B N/A
6067-HASH.js gzip 5.05 kB 5.05 kB N/A
6428-HASH.js gzip 31.6 kB 31.6 kB N/A
framework-HASH.js gzip 44.9 kB 44.9 kB ✓
main-app-HASH.js gzip 242 B 243 B N/A
main-HASH.js gzip 32.3 kB 32.3 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 44.9 kB 44.9 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
_app-HASH.js gzip 196 B 196 B ✓
_error-HASH.js gzip 184 B 185 B N/A
amp-HASH.js gzip 502 B 504 B N/A
css-HASH.js gzip 321 B 324 B N/A
dynamic-HASH.js gzip 1.82 kB 1.82 kB N/A
edge-ssr-HASH.js gzip 258 B 257 B N/A
head-HASH.js gzip 352 B 352 B ✓
hooks-HASH.js gzip 371 B 372 B N/A
image-HASH.js gzip 4.23 kB 4.23 kB N/A
index-HASH.js gzip 259 B 257 B N/A
link-HASH.js gzip 2.67 kB 2.68 kB N/A
routerDirect..HASH.js gzip 316 B 314 B N/A
script-HASH.js gzip 385 B 386 B N/A
withRouter-HASH.js gzip 311 B 310 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 654 B 654 B ✓
Client Build Manifests
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
_buildManifest.js gzip 483 B 479 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
index.html gzip 529 B 526 B N/A
link.html gzip 542 B 540 B N/A
withRouter.html gzip 524 B 524 B ✓
Overall change 524 B 524 B ✓
Edge SSR bundle Size
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
edge-ssr.js gzip 95.4 kB 95.4 kB N/A
page.js gzip 3.06 kB 3.06 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
middleware-b..fest.js gzip 658 B 657 B N/A
middleware-r..fest.js gzip 156 B 154 B N/A
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 839 B 839 B ✓
Next Runtimes Overall increase ⚠️
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
app-page-exp...dev.js gzip 171 kB 171 kB ⚠️ +106 B
app-page-exp..prod.js gzip 98.2 kB 98.3 kB ⚠️ +111 B
app-page-tur..prod.js gzip 99.9 kB 100 kB ⚠️ +110 B
app-page-tur..prod.js gzip 94.2 kB 94.3 kB ⚠️ +112 B
app-page.run...dev.js gzip 145 kB 145 kB ⚠️ +108 B
app-page.run..prod.js gzip 92.7 kB 92.8 kB ⚠️ +112 B
app-route-ex...dev.js gzip 22 kB 22 kB ✓
app-route-ex..prod.js gzip 15.5 kB 15.5 kB ✓
app-route-tu..prod.js gzip 15.5 kB 15.5 kB ✓
app-route-tu..prod.js gzip 15.2 kB 15.2 kB ✓
app-route.ru...dev.js gzip 21.7 kB 21.7 kB ✓
app-route.ru..prod.js gzip 15.2 kB 15.2 kB ✓
pages-api-tu..prod.js gzip 9.58 kB 9.58 kB ✓
pages-api.ru...dev.js gzip 9.85 kB 9.85 kB ✓
pages-api.ru..prod.js gzip 9.57 kB 9.57 kB ✓
pages-turbo...prod.js gzip 22.5 kB 22.5 kB ✓
pages.runtim...dev.js gzip 23.2 kB 23.2 kB ✓
pages.runtim..prod.js gzip 22.5 kB 22.5 kB ✓
server.runti..prod.js gzip 51.5 kB 51.5 kB ✓
Overall change 955 kB 956 kB ⚠️ +659 B
build cache
vercel/next.js 14-2-1 vercel/next.js zt/cherry-pick-breadcrumbs Change
0.pack gzip 1.6 MB 1.6 MB N/A
index.pack gzip 113 kB 112 kB N/A
Overall change 0 B 0 B ✓
Diff details
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

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: c188a24

@ijjk
Copy link
Member

ijjk commented Oct 4, 2024 •
edited
Loading

Tests Passed

@ztanner ztanner marked this pull request as ready for review October 4, 2024 15:06
@ztanner ztanner requested review from huozhi and ijjk October 4, 2024 15:06
@ztanner ztanner merged commit 540ea2d into 14-2-1 Oct 4, 2024
50 of 55 checks passed
@ztanner ztanner deleted the zt/cherry-pick-breadcrumbs branch October 4, 2024 16:18
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@huozhi huozhi huozhi approved these changes

@ijjk ijjk ijjk approved these changes

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. locked tests type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@ztanner @ijjk @huozhi @agadzik