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.
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
Fix higherOrderComponent causing broken layout #17812
Fix higherOrderComponent causing broken layout #17812
Conversation
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
buildDuration | 13.8s | 13.9s | |
nodeModulesSize | 63.4 MB | 63.4 MB | ✓ |
Page Load Tests Overall increase ✓
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.722 | 2.828 | |
/ avg req/sec | 918.39 | 884.02 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.735 | 1.678 | -0.06 |
/error-in-render avg req/sec | 1440.54 | 1490.19 | +49.65 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..133b.js gzip | 11.1 kB | 11.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-faae5f7..727a.js gzip | 7.22 kB | 7.22 kB | ✓ |
webpack-e067..f178.js gzip | 751 B | 751 B | ✓ |
Overall change | 58 kB | 58 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..dule.js gzip | 6.9 kB | 6.9 kB | ✓ |
framework.HA..dule.js gzip | 39 kB | 39 kB | ✓ |
main-d2ce890..dule.js gzip | 6.28 kB | 6.28 kB | ✓ |
webpack-07c5..dule.js gzip | 751 B | 751 B | ✓ |
Overall change | 52.9 kB | 52.9 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
polyfills-4b..e242.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-9a0b9e1..b37e.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-ed1b0..8fbd.js gzip | 3.44 kB | 3.44 kB | ✓ |
hooks-89731c..c609.js gzip | 887 B | 887 B | ✓ |
index-17468f..5d83.js gzip | 227 B | 227 B | ✓ |
link-409b283..e3ab.js gzip | 1.32 kB | 1.32 kB | ✓ |
routerDirect..924c.js gzip | 284 B | 284 B | ✓ |
withRouter-7..c13d.js gzip | 284 B | 284 B | ✓ |
Overall change | 7.73 kB | 7.73 kB | ✓ |
Client Pages Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-75d3a82..dule.js gzip | 625 B | 625 B | ✓ |
_error-4469a..dule.js gzip | 2.29 kB | 2.29 kB | ✓ |
hooks-cbf13f..dule.js gzip | 387 B | 387 B | ✓ |
index-b9a643..dule.js gzip | 226 B | 226 B | ✓ |
link-92d3016..dule.js gzip | 1.28 kB | 1.28 kB | ✓ |
routerDirect..dule.js gzip | 284 B | 284 B | ✓ |
withRouter-f..dule.js gzip | 282 B | 282 B | ✓ |
Overall change | 5.37 kB | 5.37 kB | ✓ |
Client Build Manifests
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_buildManifest.js gzip | 323 B | 323 B | ✓ |
_buildManife..dule.js gzip | 329 B | 329 B | ✓ |
Overall change | 652 B | 652 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
index.html gzip | 1 kB | 1 kB | ✓ |
link.html gzip | 1.01 kB | 1.01 kB | ✓ |
withRouter.html gzip | 995 B | 995 B | ✓ |
Overall change | 3.01 kB | 3.01 kB | ✓ |
Serverless Mode
General
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
buildDuration | 15.9s | 15.3s | -585ms |
nodeModulesSize | 63.4 MB | 63.4 MB | ✓ |
Client Bundles (main, webpack, commons)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..133b.js gzip | 11.1 kB | 11.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-faae5f7..727a.js gzip | 7.22 kB | 7.22 kB | ✓ |
webpack-e067..f178.js gzip | 751 B | 751 B | ✓ |
Overall change | 58 kB | 58 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..dule.js gzip | 6.9 kB | 6.9 kB | ✓ |
framework.HA..dule.js gzip | 39 kB | 39 kB | ✓ |
main-d2ce890..dule.js gzip | 6.28 kB | 6.28 kB | ✓ |
webpack-07c5..dule.js gzip | 751 B | 751 B | ✓ |
Overall change | 52.9 kB | 52.9 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
polyfills-4b..e242.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-9a0b9e1..b37e.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-ed1b0..8fbd.js gzip | 3.44 kB | 3.44 kB | ✓ |
hooks-89731c..c609.js gzip | 887 B | 887 B | ✓ |
index-17468f..5d83.js gzip | 227 B | 227 B | ✓ |
link-409b283..e3ab.js gzip | 1.32 kB | 1.32 kB | ✓ |
routerDirect..924c.js gzip | 284 B | 284 B | ✓ |
withRouter-7..c13d.js gzip | 284 B | 284 B | ✓ |
Overall change | 7.73 kB | 7.73 kB | ✓ |
Client Pages Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-75d3a82..dule.js gzip | 625 B | 625 B | ✓ |
_error-4469a..dule.js gzip | 2.29 kB | 2.29 kB | ✓ |
hooks-cbf13f..dule.js gzip | 387 B | 387 B | ✓ |
index-b9a643..dule.js gzip | 226 B | 226 B | ✓ |
link-92d3016..dule.js gzip | 1.28 kB | 1.28 kB | ✓ |
routerDirect..dule.js gzip | 284 B | 284 B | ✓ |
withRouter-f..dule.js gzip | 282 B | 282 B | ✓ |
Overall change | 5.37 kB | 5.37 kB | ✓ |
Client Build Manifests
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_buildManifest.js gzip | 323 B | 323 B | ✓ |
_buildManife..dule.js gzip | 329 B | 329 B | ✓ |
Overall change | 652 B | 652 B | ✓ |
Serverless bundles
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_error.js | 1.05 MB | 1.05 MB | ✓ |
404.html | 4.34 kB | 4.34 kB | ✓ |
hooks.html | 3.92 kB | 3.92 kB | ✓ |
index.js | 1.05 MB | 1.05 MB | ✓ |
link.js | 1.1 MB | 1.1 MB | ✓ |
routerDirect.js | 1.09 MB | 1.09 MB | ✓ |
withRouter.js | 1.09 MB | 1.09 MB | ✓ |
Overall change | 5.41 MB | 5.41 MB | ✓ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@amirsaeed671 I don't see how is the change you did to our docs related to the description, can you please provide more details 🙏
@lfades , In a small screen, if you goto docs > getting started > fast refresh page... you will see the page overflows due to higherOrderComponent line, on Navbar you can see the extra whitespace due to overflow caused by this line. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@amirsaeed671 LGTM. Thank you!
your welcome, @lfades |
Stats from current PRDefault Server Mode (Decrease detected ✓)General
Page Load Tests Overall decrease
|
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.693 | 2.656 | -0.04 |
/ avg req/sec | 928.3 | 941.34 | +13.04 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.593 | 1.623 | |
/error-in-render avg req/sec | 1568.88 | 1540.83 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..133b.js gzip | 11.1 kB | 11.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-2540b2f..aa10.js gzip | 7.22 kB | 7.22 kB | ✓ |
webpack-e067..f178.js gzip | 751 B | 751 B | ✓ |
Overall change | 58 kB | 58 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..dule.js gzip | 6.9 kB | 6.9 kB | ✓ |
framework.HA..dule.js gzip | 39 kB | 39 kB | ✓ |
main-0d1e0b8..dule.js gzip | 6.28 kB | 6.28 kB | ✓ |
webpack-07c5..dule.js gzip | 751 B | 751 B | ✓ |
Overall change | 52.9 kB | 52.9 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
polyfills-4b..e242.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-9a0b9e1..b37e.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-ed1b0..8fbd.js gzip | 3.44 kB | 3.44 kB | ✓ |
hooks-89731c..c609.js gzip | 887 B | 887 B | ✓ |
index-17468f..5d83.js gzip | 227 B | 227 B | ✓ |
link-409b283..e3ab.js gzip | 1.32 kB | 1.32 kB | ✓ |
routerDirect..924c.js gzip | 284 B | 284 B | ✓ |
withRouter-7..c13d.js gzip | 284 B | 284 B | ✓ |
Overall change | 7.73 kB | 7.73 kB | ✓ |
Client Pages Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-75d3a82..dule.js gzip | 625 B | 625 B | ✓ |
_error-4469a..dule.js gzip | 2.29 kB | 2.29 kB | ✓ |
hooks-cbf13f..dule.js gzip | 387 B | 387 B | ✓ |
index-b9a643..dule.js gzip | 226 B | 226 B | ✓ |
link-92d3016..dule.js gzip | 1.28 kB | 1.28 kB | ✓ |
routerDirect..dule.js gzip | 284 B | 284 B | ✓ |
withRouter-f..dule.js gzip | 282 B | 282 B | ✓ |
Overall change | 5.37 kB | 5.37 kB | ✓ |
Client Build Manifests
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_buildManifest.js gzip | 323 B | 323 B | ✓ |
_buildManife..dule.js gzip | 329 B | 329 B | ✓ |
Overall change | 652 B | 652 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
index.html gzip | 1 kB | 1 kB | ✓ |
link.html gzip | 1.01 kB | 1.01 kB | ✓ |
withRouter.html gzip | 996 B | 996 B | ✓ |
Overall change | 3.01 kB | 3.01 kB | ✓ |
Serverless Mode
General
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
buildDuration | 15.7s | 15.8s | |
nodeModulesSize | 63.4 MB | 63.4 MB | ✓ |
Client Bundles (main, webpack, commons)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..133b.js gzip | 11.1 kB | 11.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-2540b2f..aa10.js gzip | 7.22 kB | 7.22 kB | ✓ |
webpack-e067..f178.js gzip | 751 B | 751 B | ✓ |
Overall change | 58 kB | 58 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
677f882d2ed8..dule.js gzip | 6.9 kB | 6.9 kB | ✓ |
framework.HA..dule.js gzip | 39 kB | 39 kB | ✓ |
main-0d1e0b8..dule.js gzip | 6.28 kB | 6.28 kB | ✓ |
webpack-07c5..dule.js gzip | 751 B | 751 B | ✓ |
Overall change | 52.9 kB | 52.9 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
polyfills-4b..e242.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-9a0b9e1..b37e.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-ed1b0..8fbd.js gzip | 3.44 kB | 3.44 kB | ✓ |
hooks-89731c..c609.js gzip | 887 B | 887 B | ✓ |
index-17468f..5d83.js gzip | 227 B | 227 B | ✓ |
link-409b283..e3ab.js gzip | 1.32 kB | 1.32 kB | ✓ |
routerDirect..924c.js gzip | 284 B | 284 B | ✓ |
withRouter-7..c13d.js gzip | 284 B | 284 B | ✓ |
Overall change | 7.73 kB | 7.73 kB | ✓ |
Client Pages Modern
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_app-75d3a82..dule.js gzip | 625 B | 625 B | ✓ |
_error-4469a..dule.js gzip | 2.29 kB | 2.29 kB | ✓ |
hooks-cbf13f..dule.js gzip | 387 B | 387 B | ✓ |
index-b9a643..dule.js gzip | 226 B | 226 B | ✓ |
link-92d3016..dule.js gzip | 1.28 kB | 1.28 kB | ✓ |
routerDirect..dule.js gzip | 284 B | 284 B | ✓ |
withRouter-f..dule.js gzip | 282 B | 282 B | ✓ |
Overall change | 5.37 kB | 5.37 kB | ✓ |
Client Build Manifests
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_buildManifest.js gzip | 323 B | 323 B | ✓ |
_buildManife..dule.js gzip | 329 B | 329 B | ✓ |
Overall change | 652 B | 652 B | ✓ |
Serverless bundles
vercel/next.js canary | amirsaeed671/next.js layout-broken-fix-fast-refresh-page | Change | |
---|---|---|---|
_error.js | 1.05 MB | 1.05 MB | ✓ |
404.html | 4.34 kB | 4.34 kB | ✓ |
hooks.html | 3.92 kB | 3.92 kB | ✓ |
index.js | 1.05 MB | 1.05 MB | ✓ |
link.js | 1.1 MB | 1.1 MB | ✓ |
routerDirect.js | 1.09 MB | 1.09 MB | ✓ |
withRouter.js | 1.09 MB | 1.09 MB | ✓ |
Overall change | 5.41 MB | 5.41 MB | ✓ |
higherOrderComponent(WrappedComponent)
causing the layout broken in mobile screen.if we could make it
HOC(WrappedComponent)
it will not break the layout in mobile screen