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.

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

example: antd-4 with built-in css support #11837

Merged
merged 1 commit into from
May 2, 2020

Conversation

mit123suki
Copy link
Contributor

comprehensive example showing antd-4 integration with next-9.3+ built-in css support.
resolves #9830

@mit123suki mit123suki requested review from lfades and Timer as code owners April 11, 2020 22:30
@mit123suki mit123suki changed the title ant with builtin css example antd-4 with next-9.3+ built-in css support Apr 11, 2020
@ijjk
Copy link
Member

ijjk commented Apr 11, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 10.8s 10.7s -80ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary mit123suki/next.js ant-example Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 11.6s 11.8s ⚠️ +191ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_error.js gzip 233 kB 233 kB ⚠️ +307 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 956 B 956 B
index.js gzip 233 kB 233 kB -16 B
link.js gzip 243 kB 243 kB ⚠️ +2 B
routerDirect.js gzip 241 kB 241 kB ⚠️ +257 B
withRouter.js gzip 241 kB 241 kB ⚠️ +4 B
Overall change 1.19 MB 1.19 MB ⚠️ +554 B

@ijjk
Copy link
Member

ijjk commented Apr 12, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 9.4s 9.6s ⚠️ +222ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary mit123suki/next.js ant-example Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 10.3s 10.5s ⚠️ +202ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 decrease ✓
zeit/next.js canary mit123suki/next.js ant-example Change
_error.js gzip 233 kB 233 kB -209 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 956 B 956 B
index.js gzip 233 kB 233 kB -124 B
link.js gzip 243 kB 243 kB -18 B
routerDirect.js gzip 241 kB 241 kB -67 B
withRouter.js gzip 241 kB 241 kB ⚠️ +28 B
Overall change 1.19 MB 1.19 MB -390 B

@ijjk
Copy link
Member

ijjk commented Apr 12, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 10.9s 11s ⚠️ +94ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary mit123suki/next.js ant-example Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 12.1s 12s -106ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_error.js gzip 233 kB 233 kB -22 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 956 B 956 B
index.js gzip 233 kB 233 kB -104 B
link.js gzip 243 kB 243 kB -283 B
routerDirect.js gzip 241 kB 241 kB ⚠️ +302 B
withRouter.js gzip 241 kB 241 kB ⚠️ +265 B
Overall change 1.19 MB 1.19 MB ⚠️ +158 B

@ijjk
Copy link
Member

ijjk commented Apr 12, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 8.8s 8.7s -120ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary mit123suki/next.js ant-example Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 10s 9.5s -520ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_error.js gzip 233 kB 233 kB ⚠️ +13 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 956 B 956 B
index.js gzip 233 kB 233 kB ⚠️ +65 B
link.js gzip 243 kB 243 kB ⚠️ +53 B
routerDirect.js gzip 241 kB 241 kB ⚠️ +87 B
withRouter.js gzip 241 kB 241 kB -8 B
Overall change 1.19 MB 1.19 MB ⚠️ +210 B

@mit123suki
Copy link
Contributor Author

mit123suki commented Apr 12, 2020

@Timer @lfades prettier modifies the main repo readme file by adding a new line at the end and lint passes it after the modification and the same change in readme seeming to fail my build here.
Weird all commits and repos passes lint and prettier check before they are committed.
I don't know why it is happening to me. Please help

@mit123suki mit123suki force-pushed the ant-example branch 3 times, most recently from d0a0104 to 7707f4a Compare April 13, 2020 08:19

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@ijjk
Copy link
Member

ijjk commented Apr 13, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 12.1s 11.3s -737ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary mit123suki/next.js ant-example Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary mit123suki/next.js ant-example Change
buildDuration 12.1s 12.1s -58ms
nodeModulesSize 61 MB 61 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary mit123suki/next.js ant-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 mit123suki/next.js ant-example 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 decrease ✓
zeit/next.js canary mit123suki/next.js ant-example Change
_error.js gzip 233 kB 233 kB -52 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 956 B 956 B
index.js gzip 233 kB 233 kB ⚠️ +199 B
link.js gzip 243 kB 243 kB -139 B
routerDirect.js gzip 241 kB 241 kB ⚠️ +65 B
withRouter.js gzip 241 kB 241 kB -292 B
Overall change 1.19 MB 1.19 MB -219 B

@dpyzo0o
Copy link

dpyzo0o commented Apr 15, 2020

@mit123suki Any ideas how to add css modules to this setup?

@mit123suki
Copy link
Contributor Author

@mit123suki Any ideas how to add css modules to this setup?

https://github.com/mit123suki/next-ant-css

@xaxist
Copy link

xaxist commented Apr 30, 2020

Hello,

I am using Next.js 9.3 with the built-in SASS feature and was able to import antd css using the above example. Thanks for sharing the webpack config.

I wanted to import the ant less file in order to override the theme settings. Any way we can configure the webpack such that, the less variables of ant can be overriden and we still use the built-in sass for our application code? The moment we use next-css, it disables built-in SASS for backward compatibility I guess.

I tried the following solution, but it disables built-in-sass. https://annacoding.com/article/2cU5baQMXG8SV2pbxh7kO8/How-to-config-Ant-Design--in-Next.js-with-custom-theme

Thanks.

@mit123suki
Copy link
Contributor Author

mit123suki commented Apr 30, 2020

Hello,

I am using Next.js 9.3 with the built-in SASS feature and was able to import antd css using the above example. Thanks for sharing the webpack config.

I wanted to import the ant less file in order to override the theme settings. Any way we can configure the webpack such that, the less variables of ant can be overriden and we still use the built-in sass for our application code? The moment we use next-css, it disables built-in SASS for backward compatibility I guess.

I tried the following solution, but it disables built-in-sass. https://annacoding.com/article/2cU5baQMXG8SV2pbxh7kO8/How-to-config-Ant-Design--in-Next.js-with-custom-theme

Thanks.

Hi, using any of next style plugins disables support for built-in css and sass. For variables you can create css properties(down side is there is no browser support for ie11 and this can be worked out using sass). Please check my github repo, I've added 2 repos for css and less and displayed the use of variables and modules.

Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@Timer Timer added this to the 9.3.7 milestone May 2, 2020
@Timer Timer added the examples Issue was opened via the examples template. label May 2, 2020
@Timer Timer changed the title antd-4 with next-9.3+ built-in css support example: antd-4 with built-in css support May 2, 2020
@Timer Timer merged commit 2dcd4e9 into vercel:canary May 2, 2020
@parondeau
Copy link

Hey @mit123suki, I'm not convinced this PR is actually taking advantage of CSS Modules for Ant Design. I noticed that, for your example, if I remove the entire babel plugin for importing antd, the code works the exact same. I believe this is because this css import line in _app.js is actually loading the entire antd css into the project.

import 'antd/dist/antd.css'

According to the Ant Design docs, when using "Modularized Ant", you should only need to configure the babel-plugin-import, like you've done, and not include the css manually (link).

Furthermore, if I remove the css import line in _app.js, I get the following error:

[ error ] ./node_modules/antd/es/button/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/antd/es/button/style/css.js

Side note, I believe this line here, should be:

        "style": "css"

Am I missing something here?

@Timer Timer modified the milestones: 9.3.7, 9.4 May 11, 2020
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
examples Issue was opened via the examples template.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update Ant Design Examples for New CSS Support (9.2)
7 participants