added "with-route-as-modal" example #11473
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| buildDuration | 11.9s | 12.2s | |
| nodeModulesSize | 52.8 MB | 52.8 MB | ✓ |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| main-HASH.js gzip | 6.24 kB | 6.24 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..c6c1.js gzip | 10.1 kB | 10.1 kB | ✓ |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 56.2 kB | 56.2 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| main-HASH.module.js gzip | 4.77 kB | 4.77 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..dule.js gzip | 6.71 kB | 6.71 kB | ✓ |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 51.4 kB | 51.4 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
| Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _app.js gzip | 1.24 kB | 1.24 kB | ✓ |
| _error.js gzip | 3.15 kB | 3.15 kB | ✓ |
| hooks.js gzip | 664 B | 664 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js gzip | 2.03 kB | 2.03 kB | ✓ |
| routerDirect.js gzip | 279 B | 279 B | ✓ |
| withRouter.js gzip | 278 B | 278 B | ✓ |
| Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _app.module.js gzip | 594 B | 594 B | ✓ |
| _error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
| hooks.module.js gzip | 370 B | 370 B | ✓ |
| index.module.js gzip | 212 B | 212 B | ✓ |
| link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
| routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
| withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
| Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _error.js gzip | 293 kB | 294 kB | |
| 404.html gzip | 1.32 kB | 1.32 kB | ✓ |
| hooks.html gzip | 958 B | 958 B | ✓ |
| index.js gzip | 294 kB | 294 kB | |
| link.js gzip | 302 kB | 301 kB | -880 B |
| routerDirect.js gzip | 300 kB | 300 kB | |
| withRouter.js gzip | 300 kB | 300 kB | |
| Overall change | 1.49 MB | 1.49 MB |
extra space missing in style.css oops linted
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
IAmMorrow
changed the title
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| buildDuration | 11.5s | 11.6s | |
| nodeModulesSize | 52.8 MB | 52.8 MB | ✓ |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| main-HASH.js gzip | 6.24 kB | 6.24 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..c6c1.js gzip | 10.1 kB | 10.1 kB | ✓ |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 56.2 kB | 56.2 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| main-HASH.module.js gzip | 4.77 kB | 4.77 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..dule.js gzip | 6.71 kB | 6.71 kB | ✓ |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 51.4 kB | 51.4 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
| Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _app.js gzip | 1.24 kB | 1.24 kB | ✓ |
| _error.js gzip | 3.15 kB | 3.15 kB | ✓ |
| hooks.js gzip | 664 B | 664 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js gzip | 2.03 kB | 2.03 kB | ✓ |
| routerDirect.js gzip | 279 B | 279 B | ✓ |
| withRouter.js gzip | 278 B | 278 B | ✓ |
| Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _app.module.js gzip | 594 B | 594 B | ✓ |
| _error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
| hooks.module.js gzip | 370 B | 370 B | ✓ |
| index.module.js gzip | 212 B | 212 B | ✓ |
| link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
| routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
| withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
| Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
| zeit/next.js canary | IAmMorrow/next.js canary | Change | |
|---|---|---|---|
| _error.js gzip | 294 kB | 294 kB | |
| 404.html gzip | 1.32 kB | 1.32 kB | ✓ |
| hooks.html gzip | 958 B | 958 B | ✓ |
| index.js gzip | 294 kB | 294 kB | |
| link.js gzip | 302 kB | 301 kB | -569 B |
| routerDirect.js gzip | 300 kB | 300 kB | -42 B |
| withRouter.js gzip | 300 kB | 300 kB | -39 B |
| Overall change | 1.49 MB | 1.49 MB |
|
@IAmMorrow Can you enable contributions please, I can't push to your branch:
|
|
It was already enabled, I do not understand ?! |
|
Nvm, looks like I was having conflicts with my local canary's 😌 |
|
Lovely!! Have already used this for reference. Great contribution. |
|
I looked at the example but couldn't figure out: What new Next.js feature enables this? Seems like everything I am seeing in this example you could do just fine before? |
|
@dminkovsky It’s not new functionality, we just didn’t previously have an example showing how to do it |
|
Ahhh. I guess I assumed it was related to something new because I saw it in the release notes for v9.3.4, but of course that just says the example was added. Thanks for clarifying @lachlanjc. |
This was referenced Apr 24, 2020
|
Thanks for this example, but I have a small problem with remembering scroll positions. I am displaying a long list of images in a Masonry Grid using react-virtualized. While the modal is showing up correctly etc, the scroll position within the grid is being lost. It is always displaying modal at the top of the page and keeps me there when I close the modal. Any help on what the mistake I might be doing? |
|
I just donwloaded the example and is not keeping the scroll position, when you open the modal it refreshes the scroll position to the top of the page, do you know how we can achieve this? |
|
|
|
@lfades Oh thank you very much! |
This was referenced Mar 30, 2021
This was referenced Sep 12, 2021
This was referenced Jan 17, 2022
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR provide an exemple on how to achieve the modern "route as a modal" pattern using Next.js routing. This is achievable since the recent release
^9.2.1-canary.6.Linking to #8023 as a few people are looking forward to achieve this.