profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/vrease/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Jonathan Yngfors vrease Vrea Webbutveckling Sweden https://vrea.se

vrease/formium 0

The headless form builder for the modern web.

vrease/sanity-recipes 0

A collection of recipies / snippets / frequently asked questions about Sanity.io

vrease/use-local-storage-state 0

React hook that persist data in local storage

vrease/whatsapp-sharing 0

whatsapp sharing button + generator

issue commentvercel/next.js

Image optimization is not serving images in next-gen formats

Seems like this image is in webp and served from the next js server though.

Maybe it is related to the cloud provider widencdn, but I added it to the images domain in the next.config file

davidpaley

comment created time in 4 minutes

issue commentvercel/next.js

Image optimization is not serving images in next-gen formats

Hi David, I've check your website and you have some img well served in webp and others (from embed.widencdn.net) served in jpeg

Screenshot 2021-02-24 at 21 47 31

but you put this domain in the next.config.js so it is weird

@laurentDellaNegra this is because all the images served from https://auth-cityfurniture.dotcmscloud.com are the images of the header that doesn't use the Next js Image component.

davidpaley

comment created time in 7 minutes

issue commentvercel/next.js

Automatic static optimization should work with getStaticProps w/out getStaticPaths

Related to #14200 because I want to be able to fetch data at build-time using getStaticProps that has nothing to do with the dynamic page parameters (i.e. page should behave just like an automatically statically optimized one).

nicholaschiang

comment created time in 10 minutes

issue commentvercel/next.js

Automatic static optimization should work with getStaticProps w/out getStaticPaths

@TommySorensen your concerns make sense, but I've already addressed all of them.

The point of using getStaticPaths is to fetch stuff non user specific content at build time or when page is requested. If it's not generated it will be generated in fallback mode until the page is generated. If you dont know the url for the [org] and [id] before user visit the url, then you dont need the "fallback" mode because there is nothing to prebuild for the NextJS.

I was using automatic static optimization (as described in the client-side data fetching guide) but I want to show a list of organizations in the footer of each page.

Thus, I need to fetch that (public) organization data to render the footer links for each page. I'll fetch the data during build-time because it doesn't change often and I want it there immediately for SEO purposes.

When looking at https://github.com/tutorbookapp/tutorbook/blob/develop/pages/%5Borg%5D/users/%5Bid%5D/index.tsx#L128 it seems like you fetch user specific data in the getStaticProps function. As you comment explain there will be a "data change flashes". I will strongly recommend you not to do that since you are basically giving one users content to the next user because its static generated. So potentially you could run into some security issues here. Instead you should use getServerSideProps for that since you need the data at request time, and not for the last user's visit. Any user specific data could and should be fetched after hydration with useSwr.

The data that is fetched in that getStaticProps function is public. The data change flashes occur if you're an admin and have access to the un-truncated data (which is fetched client-side using SWR if you're authenticated).

For user-specific pages (e.g. pages/[org]/overview or pages/[org]/calendar), I fetch sensitive data client-side using SWR; only authenticated users are able to see their data. But, I want to use getStaticProps on those pages to--as mentioned earlier--include a list of organizations in the page footer.

Does that make sense @TommySorensen? Thanks for responding BTW. Always nice to get a second opinion!

nicholaschiang

comment created time in 12 minutes

push eventvercel/next.js

Alex Castle

commit sha a0d44ca3119bf8e34f17c1f99c669e31d774d652

Allow smaller sizes in srcset for image with fill layout and sizes prop (#21670) Currently, the image component doesn't handle use of the `sizes` property with `layout="fill"` and `layout="responsive"` very well for small viewports. It will never include sizes smaller than the smallest viewport (640px) in the srcset, so even if you specify `sizes="30vw"` in your image, you have to download the full-viewport-width image on small devices. This PR adds logic such that if you use `layout="fill"` and include a `sizes` property, the image component will include the full range of image sizes in the `srcset`. It also includes an optimization where it finds the smallest `vw` value in the sizes value and combines that with the smallest viewport width, and uses that as the floor of the srcset. It does this so it doesn't unnecessarily increase transfer size by including ALL sizes. This is still a conservative optimization--for 95% of cases, taking the _largest_ `vw` size would work, but I don't see a way to do that without breaking a few corner cases. The case of a sizes prop with `px` values is fixed but not optimized--though generally that case is less of a good fit for the fill or responsive layout anyway.

view details

push time in 19 minutes

PR merged vercel/next.js

Reviewers
Allow smaller sizes in srcset for image with fill layout and sizes prop type: chrome type: next

Currently, the image component doesn't handle use of the sizes property with layout="fill" and layout="responsive" very well for small viewports. It will never include sizes smaller than the smallest viewport (640px) in the srcset, so even if you specify sizes="30vw" in your image, you have to download the full-viewport-width image on small devices.

This PR adds logic such that if you use layout="fill" and include a sizes property, the image component will include the full range of image sizes in the srcset.

It also includes an optimization where it finds the smallest vw value in the sizes value and combines that with the smallest viewport width, and uses that as the floor of the srcset. It does this so it doesn't unnecessarily increase transfer size by including ALL sizes. This is still a conservative optimization--for 95% of cases, taking the largest vw size would work, but I don't see a way to do that without breaking a few corner cases.

The case of a sizes prop with px values is fixed but not optimized--though generally that case is less of a good fit for the fill or responsive layout anyway.

+52 -4

11 comments

4 changed files

atcastle

pr closed time in 19 minutes

pull request commentvercel/next.js

Add support for the content-visibility CSS property to the image component

Stats from current PR

<details> <summary><strong>Default Server Mode</strong> (Decrease detected ✓)</summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary Joonpark13/next.js canary Change
buildDuration 9.6s 9.6s -26ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +365 B

</details>

<details> <summary><strong>Page Load Tests</strong> Overall decrease ⚠️</summary>

vercel/next.js canary Joonpark13/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 1.704 1.724 ⚠️ +0.02
/ avg req/sec 1467 1449.91 ⚠️ -17.09
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.089 1.118 ⚠️ +0.03
/error-in-render avg req/sec 2296.31 2236.48 ⚠️ -59.83

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
677f882d2ed8..e7a0.js gzip 13.4 kB 13.4 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.65 kB 6.65 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.7 kB 59.7 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
amp-e3e9bc99..932c.js gzip 536 B 536 B
hooks-5023ef..3670.js gzip 888 B 888 B
index-3a2b03..c677.js gzip 227 B 227 B
link-177412b..043e.js gzip 1.67 kB 1.67 kB
routerDirect..1a66.js gzip 303 B 303 B
withRouter-9..1b7d.js gzip 302 B 302 B
Overall change 8.66 kB 8.66 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_buildManifest.js gzip 347 B 347 B
Overall change 347 B 347 B

</details>

<details> <summary><strong>Rendered Page Sizes</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
index.html gzip 613 B 613 B
link.html gzip 619 B 619 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

</details>

</details> <hr/> <details> <summary><strong>Serverless Mode</strong></summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary Joonpark13/next.js canary Change
buildDuration 11.5s 11.1s -324ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +365 B

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
677f882d2ed8..e7a0.js gzip 13.4 kB 13.4 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.65 kB 6.65 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.7 kB 59.7 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
amp-e3e9bc99..932c.js gzip 536 B 536 B
hooks-5023ef..3670.js gzip 888 B 888 B
index-3a2b03..c677.js gzip 227 B 227 B
link-177412b..043e.js gzip 1.67 kB 1.67 kB
routerDirect..1a66.js gzip 303 B 303 B
withRouter-9..1b7d.js gzip 302 B 302 B
Overall change 8.66 kB 8.66 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_buildManifest.js gzip 347 B 347 B
Overall change 347 B 347 B

</details>

<details> <summary><strong>Serverless bundles</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_error.js 1.01 MB 1.01 MB
404.html 2.67 kB 2.67 kB
500.html 2.65 kB 2.65 kB
amp.amp.html 10.4 kB 10.4 kB
amp.html 1.86 kB 1.86 kB
hooks.html 1.92 kB 1.92 kB
index.js 1.01 MB 1.01 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.06 MB 1.06 MB
withRouter.js 1.06 MB 1.06 MB
Overall change 5.21 MB 5.21 MB

</details>

</details> <hr/> <details> <summary><strong>Webpack 5 Mode</strong> (Decrease detected ✓)</summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary Joonpark13/next.js canary Change
buildDuration 11.3s 11.2s -63ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +365 B

</details>

<details> <summary><strong>Page Load Tests</strong> Overall decrease ⚠️</summary>

vercel/next.js canary Joonpark13/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 1.699 1.745 ⚠️ +0.05
/ avg req/sec 1471.52 1432.66 ⚠️ -38.86
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.061 1.084 ⚠️ +0.02
/error-in-render avg req/sec 2355.21 2306.98 ⚠️ -48.23

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
597-74632e79..1d47.js gzip 13.3 kB 13.3 kB
framework.HASH.js gzip 39.3 kB 39.3 kB
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 954 B 954 B
Overall change 60.1 kB 60.1 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB
Overall change 31.1 kB 31.1 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_app-aedc815..1421.js gzip 1.26 kB 1.26 kB
_error-71ec2..1a96.js gzip 3.38 kB 3.38 kB
amp-33a09cb0..6745.js gzip 536 B 536 B
hooks-4e968a..f870.js gzip 902 B 902 B
index-5c6845..f75c.js gzip 230 B 230 B
link-99f0c6c..b84a.js gzip 1.65 kB 1.65 kB
routerDirect..bb56.js gzip 306 B 306 B
withRouter-7..2133.js gzip 302 B 302 B
Overall change 8.57 kB 8.57 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
_buildManifest.js gzip 326 B 326 B
Overall change 326 B 326 B

</details>

<details> <summary><strong>Rendered Page Sizes</strong></summary>

vercel/next.js canary Joonpark13/next.js canary Change
index.html gzip 587 B 587 B
link.html gzip 594 B 594 B
withRouter.html gzip 582 B 582 B
Overall change 1.76 kB 1.76 kB

</details>

Diffs

<details> <summary>Diff for <strong>index.html</strong></summary>

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "Cmu-zQcZDuEBuewAk3FBt",
+        "buildId": "KcV0SqH3Hls5cV0pv44b6",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/Cmu-zQcZDuEBuewAk3FBt/_buildManifest.js"
+      src="/_next/static/KcV0SqH3Hls5cV0pv44b6/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/Cmu-zQcZDuEBuewAk3FBt/_ssgManifest.js"
+      src="/_next/static/KcV0SqH3Hls5cV0pv44b6/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> <details> <summary>Diff for <strong>link.html</strong></summary>

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "Cmu-zQcZDuEBuewAk3FBt",
+        "buildId": "KcV0SqH3Hls5cV0pv44b6",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/Cmu-zQcZDuEBuewAk3FBt/_buildManifest.js"
+      src="/_next/static/KcV0SqH3Hls5cV0pv44b6/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/Cmu-zQcZDuEBuewAk3FBt/_ssgManifest.js"
+      src="/_next/static/KcV0SqH3Hls5cV0pv44b6/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> <details> <summary>Diff for <strong>withRouter.html</strong></summary>

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "Cmu-zQcZDuEBuewAk3FBt",
+        "buildId": "KcV0SqH3Hls5cV0pv44b6",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/Cmu-zQcZDuEBuewAk3FBt/_buildManifest.js"
+      src="/_next/static/KcV0SqH3Hls5cV0pv44b6/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/Cmu-zQcZDuEBuewAk3FBt/_ssgManifest.js"
+      src="/_next/static/KcV0SqH3Hls5cV0pv44b6/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> </details> Commit: 960abfd09ee687cbf6880b7edc3d620264fa9f96

Joonpark13

comment created time in 30 minutes

pull request commentvercel/next.js

Allow smaller sizes in srcset for image with fill layout and sizes prop

Stats from current PR

<details> <summary><strong>Default Server Mode</strong> (Decrease detected ✓)</summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
buildDuration 11.2s 10.8s -360ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +1.64 kB

</details>

<details> <summary><strong>Page Load Tests</strong> Overall decrease ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
/ failed reqs 0 0
/ total time (seconds) 2.028 1.999 -0.03
/ avg req/sec 1232.62 1250.4 +17.78
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.26 1.276 ⚠️ +0.02
/error-in-render avg req/sec 1983.4 1959.73 ⚠️ -23.67

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
677f882d2ed8..e7a0.js gzip 13.4 kB 13.4 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.65 kB 6.65 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.7 kB 59.7 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
amp-e3e9bc99..932c.js gzip 536 B 536 B
hooks-5023ef..3670.js gzip 888 B 888 B
index-3a2b03..c677.js gzip 227 B 227 B
link-177412b..043e.js gzip 1.67 kB 1.67 kB
routerDirect..1a66.js gzip 303 B 303 B
withRouter-9..1b7d.js gzip 302 B 302 B
Overall change 8.66 kB 8.66 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_buildManifest.js gzip 347 B 347 B
Overall change 347 B 347 B

</details>

<details> <summary><strong>Rendered Page Sizes</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
index.html gzip 613 B 613 B
link.html gzip 619 B 619 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

</details>

</details> <hr/> <details> <summary><strong>Serverless Mode</strong></summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
buildDuration 13.2s 13.3s ⚠️ +52ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +1.64 kB

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
677f882d2ed8..e7a0.js gzip 13.4 kB 13.4 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.65 kB 6.65 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.7 kB 59.7 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
amp-e3e9bc99..932c.js gzip 536 B 536 B
hooks-5023ef..3670.js gzip 888 B 888 B
index-3a2b03..c677.js gzip 227 B 227 B
link-177412b..043e.js gzip 1.67 kB 1.67 kB
routerDirect..1a66.js gzip 303 B 303 B
withRouter-9..1b7d.js gzip 302 B 302 B
Overall change 8.66 kB 8.66 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_buildManifest.js gzip 347 B 347 B
Overall change 347 B 347 B

</details>

<details> <summary><strong>Serverless bundles</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_error.js 1.01 MB 1.01 MB
404.html 2.67 kB 2.67 kB
500.html 2.65 kB 2.65 kB
amp.amp.html 10.4 kB 10.4 kB
amp.html 1.86 kB 1.86 kB
hooks.html 1.92 kB 1.92 kB
index.js 1.01 MB 1.01 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.06 MB 1.06 MB
withRouter.js 1.06 MB 1.06 MB
Overall change 5.21 MB 5.21 MB

</details>

</details> <hr/> <details> <summary><strong>Webpack 5 Mode</strong> (Increase detected ⚠️)</summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
buildDuration 13.2s 13s -228ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +1.64 kB

</details>

<details> <summary><strong>Page Load Tests</strong> Overall increase ✓</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
/ failed reqs 0 0
/ total time (seconds) 2.038 1.994 -0.04
/ avg req/sec 1226.49 1254.05 +27.56
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.256 1.215 -0.04
/error-in-render avg req/sec 1990.21 2057.04 +66.83

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
597-74632e79..1d47.js gzip 13.3 kB 13.3 kB
framework.HASH.js gzip 39.3 kB 39.3 kB
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 954 B 954 B
Overall change 60.1 kB 60.1 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB
Overall change 31.1 kB 31.1 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_app-aedc815..1421.js gzip 1.26 kB 1.26 kB
_error-71ec2..1a96.js gzip 3.38 kB 3.38 kB
amp-33a09cb0..6745.js gzip 536 B 536 B
hooks-4e968a..f870.js gzip 902 B 902 B
index-5c6845..f75c.js gzip 230 B 230 B
link-99f0c6c..b84a.js gzip 1.65 kB 1.65 kB
routerDirect..bb56.js gzip 306 B 306 B
withRouter-7..2133.js gzip 302 B 302 B
Overall change 8.57 kB 8.57 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_buildManifest.js gzip 326 B 326 B
Overall change 326 B 326 B

</details>

<details> <summary><strong>Rendered Page Sizes</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
index.html gzip 587 B 587 B
link.html gzip 594 B 594 B
withRouter.html gzip 582 B 582 B
Overall change 1.76 kB 1.76 kB

</details>

Diffs

<details> <summary>Diff for <strong>index.html</strong></summary>

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "NtUCyDlsbaOfKj7k8bduE",
+        "buildId": "0lHm7DUYqZkT1RsZlsXIh",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/NtUCyDlsbaOfKj7k8bduE/_buildManifest.js"
+      src="/_next/static/0lHm7DUYqZkT1RsZlsXIh/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/NtUCyDlsbaOfKj7k8bduE/_ssgManifest.js"
+      src="/_next/static/0lHm7DUYqZkT1RsZlsXIh/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> <details> <summary>Diff for <strong>link.html</strong></summary>

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "NtUCyDlsbaOfKj7k8bduE",
+        "buildId": "0lHm7DUYqZkT1RsZlsXIh",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/NtUCyDlsbaOfKj7k8bduE/_buildManifest.js"
+      src="/_next/static/0lHm7DUYqZkT1RsZlsXIh/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/NtUCyDlsbaOfKj7k8bduE/_ssgManifest.js"
+      src="/_next/static/0lHm7DUYqZkT1RsZlsXIh/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> <details> <summary>Diff for <strong>withRouter.html</strong></summary>

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "NtUCyDlsbaOfKj7k8bduE",
+        "buildId": "0lHm7DUYqZkT1RsZlsXIh",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/NtUCyDlsbaOfKj7k8bduE/_buildManifest.js"
+      src="/_next/static/0lHm7DUYqZkT1RsZlsXIh/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/NtUCyDlsbaOfKj7k8bduE/_ssgManifest.js"
+      src="/_next/static/0lHm7DUYqZkT1RsZlsXIh/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> </details> Commit: fa82398cfa4681b390f1b37960b5750c50033cd5

atcastle

comment created time in an hour

issue openedvercel/next.js

Next fails to build when using webpack's CompressionPlugin

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

v14.15.1

What browser are you using?

Chrome

What operating system are you using?

Xubuntu 20.04

How are you deploying your application?

N/A

Describe the Bug

Using webpack's CompressionPlugin makes Next's build process fail with following error message

> Build error occurred
Error: Cannot find module 'webpack'

Full error log

This was working in Next v10.0.5. Note, I haven't found which is latest working version of Next.

Expected Behavior

To build and create the compressed files.

To Reproduce

  1. Clone https://github.com/awareness481/Next-With-CompressionPlugin-bug
  2. Install deps
  3. Run npm run build
  4. Observe failed build

I'm not sure if Next.js is expected to work with webpack's CompressionPlugin or webpack's core plugins, but it was working in earlier versions which is why I decided to file this issue.

created time in an hour

issue commentvercel/next.js

Custom error page can't have SSR-only modules in getInitialProps

I'm not sure how to fix the issue. But NextJS has something they call dynamicyou can use to lazy load client only code. Its pretty easy to set up, and you dont need the stuff you mentioned in the package file. Example here: https://nextjs.org/docs/advanced-features/dynamic-import#basic-usage

You can even set it to ssr: false like this

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

Maybe it helps 🤷‍♂️

nicholaschiang

comment created time in 2 hours

pull request commentvercel/next.js

Allow smaller sizes in srcset for image with fill layout and sizes prop

Failing test suites <!--2117379193-->

Commit: 3b03fc2f29ca764e024294c09c962b07e1914764

test/integration/image-component/base-path/test/index.test.js

  • Image Component basePath Tests > dev mode > should work with sizes and automatically use layout-responsive
  • Image Component basePath Tests > server mode > should work with sizes and automatically use layout-responsive
  • Image Component basePath Tests > serverless mode > should work with sizes and automatically use layout-responsive

<details> <summary>Expand output</summary>

● Image Component basePath Tests › dev mode › should work with sizes and automatically use layout-responsive

expect(received).toBe(expected) // Object.is equality

Expected: "/docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w"
Received: "/docs/_next/image?url=%2Fdocs%2Fwide.png&w=16&q=75 16w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=32&q=75 32w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=48&q=75 48w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=64&q=75 64w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=96&q=75 96w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=128&q=75 128w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=256&q=75 256w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=384&q=75 384w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w"

  371 |         '/docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75'
  372 |       )
> 373 |       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
      |                                                                    ^
  374 |         '/docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w'
  375 |       )
  376 |       expect(await browser.elementById(id).getAttribute('sizes')).toBe(

  at Object.<anonymous> (integration/image-component/base-path/test/index.test.js:373:68)

● Image Component basePath Tests › server mode › should work with sizes and automatically use layout-responsive

expect(received).toBe(expected) // Object.is equality

Expected: "/docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w"
Received: "/docs/_next/image?url=%2Fdocs%2Fwide.png&w=16&q=75 16w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=32&q=75 32w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=48&q=75 48w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=64&q=75 64w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=96&q=75 96w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=128&q=75 128w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=256&q=75 256w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=384&q=75 384w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w"

  371 |         '/docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75'
  372 |       )
> 373 |       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
      |                                                                    ^
  374 |         '/docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w'
  375 |       )
  376 |       expect(await browser.elementById(id).getAttribute('sizes')).toBe(

  at Object.<anonymous> (integration/image-component/base-path/test/index.test.js:373:68)
      at runMicrotasks (<anonymous>)

● Image Component basePath Tests › serverless mode › should work with sizes and automatically use layout-responsive

expect(received).toBe(expected) // Object.is equality

Expected: "/docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w"
Received: "/docs/_next/image?url=%2Fdocs%2Fwide.png&w=16&q=75 16w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=32&q=75 32w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=48&q=75 48w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=64&q=75 64w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=96&q=75 96w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=128&q=75 128w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=256&q=75 256w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=384&q=75 384w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w"

  371 |         '/docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75'
  372 |       )
> 373 |       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
      |                                                                    ^
  374 |         '/docs/_next/image?url=%2Fdocs%2Fwide.png&w=640&q=75 640w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=750&q=75 750w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=828&q=75 828w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1080&q=75 1080w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1200&q=75 1200w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=1920&q=75 1920w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=2048&q=75 2048w, /docs/_next/image?url=%2Fdocs%2Fwide.png&w=3840&q=75 3840w'
  375 |       )
  376 |       expect(await browser.elementById(id).getAttribute('sizes')).toBe(

  at Object.<anonymous> (integration/image-component/base-path/test/index.test.js:373:68)

</details>

atcastle

comment created time in 2 hours

pull request commentvercel/next.js

Allow smaller sizes in srcset for image with fill layout and sizes prop

Stats from current PR

<details> <summary><strong>Default Server Mode</strong> (Decrease detected ✓)</summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
buildDuration 10s 9.7s -244ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +1.64 kB

</details>

<details> <summary><strong>Page Load Tests</strong> Overall decrease ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
/ failed reqs 0 0
/ total time (seconds) 1.789 1.808 ⚠️ +0.02
/ avg req/sec 1397.77 1382.45 ⚠️ -15.32
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.092 1.138 ⚠️ +0.05
/error-in-render avg req/sec 2288.43 2196.01 ⚠️ -92.42

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
677f882d2ed8..e7a0.js gzip 13.4 kB 13.4 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.65 kB 6.65 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.7 kB 59.7 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
amp-e3e9bc99..932c.js gzip 536 B 536 B
hooks-5023ef..3670.js gzip 888 B 888 B
index-3a2b03..c677.js gzip 227 B 227 B
link-177412b..043e.js gzip 1.67 kB 1.67 kB
routerDirect..1a66.js gzip 303 B 303 B
withRouter-9..1b7d.js gzip 302 B 302 B
Overall change 8.66 kB 8.66 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_buildManifest.js gzip 347 B 347 B
Overall change 347 B 347 B

</details>

<details> <summary><strong>Rendered Page Sizes</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
index.html gzip 613 B 613 B
link.html gzip 619 B 619 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

</details>

</details> <hr/> <details> <summary><strong>Serverless Mode</strong></summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
buildDuration 11.6s 11.6s ⚠️ +18ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +1.64 kB

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
677f882d2ed8..e7a0.js gzip 13.4 kB 13.4 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.65 kB 6.65 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.7 kB 59.7 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
amp-e3e9bc99..932c.js gzip 536 B 536 B
hooks-5023ef..3670.js gzip 888 B 888 B
index-3a2b03..c677.js gzip 227 B 227 B
link-177412b..043e.js gzip 1.67 kB 1.67 kB
routerDirect..1a66.js gzip 303 B 303 B
withRouter-9..1b7d.js gzip 302 B 302 B
Overall change 8.66 kB 8.66 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_buildManifest.js gzip 347 B 347 B
Overall change 347 B 347 B

</details>

<details> <summary><strong>Serverless bundles</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_error.js 1.01 MB 1.01 MB
404.html 2.67 kB 2.67 kB
500.html 2.65 kB 2.65 kB
amp.amp.html 10.4 kB 10.4 kB
amp.html 1.86 kB 1.86 kB
hooks.html 1.92 kB 1.92 kB
index.js 1.01 MB 1.01 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.06 MB 1.06 MB
withRouter.js 1.06 MB 1.06 MB
Overall change 5.21 MB 5.21 MB

</details>

</details> <hr/> <details> <summary><strong>Webpack 5 Mode</strong> (Increase detected ⚠️)</summary>

<br/>

<details> <summary><strong>General</strong> Overall increase ⚠️</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
buildDuration 11.7s 11.6s -121ms
nodeModulesSize 42.7 MB 42.7 MB ⚠️ +1.64 kB

</details>

<details> <summary><strong>Page Load Tests</strong> Overall increase ✓</summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
/ failed reqs 0 0
/ total time (seconds) 1.771 1.705 -0.07
/ avg req/sec 1411.91 1465.91 +54
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.139 1.093 -0.05
/error-in-render avg req/sec 2193.99 2287 +93.01

</details>

<details> <summary><strong>Client Bundles (main, webpack, commons)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
597-74632e79..1d47.js gzip 13.3 kB 13.3 kB
framework.HASH.js gzip 39.3 kB 39.3 kB
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 954 B 954 B
Overall change 60.1 kB 60.1 kB

</details>

<details> <summary><strong>Legacy Client Bundles (polyfills)</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB
Overall change 31.1 kB 31.1 kB

</details>

<details> <summary><strong>Client Pages</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_app-aedc815..1421.js gzip 1.26 kB 1.26 kB
_error-71ec2..1a96.js gzip 3.38 kB 3.38 kB
amp-33a09cb0..6745.js gzip 536 B 536 B
hooks-4e968a..f870.js gzip 902 B 902 B
index-5c6845..f75c.js gzip 230 B 230 B
link-99f0c6c..b84a.js gzip 1.65 kB 1.65 kB
routerDirect..bb56.js gzip 306 B 306 B
withRouter-7..2133.js gzip 302 B 302 B
Overall change 8.57 kB 8.57 kB

</details>

<details> <summary><strong>Client Build Manifests</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
_buildManifest.js gzip 326 B 326 B
Overall change 326 B 326 B

</details>

<details> <summary><strong>Rendered Page Sizes</strong></summary>

vercel/next.js canary azukaru/next.js image-component-update-fill-sizing Change
index.html gzip 587 B 587 B
link.html gzip 594 B 594 B
withRouter.html gzip 582 B 582 B
Overall change 1.76 kB 1.76 kB

</details>

Diffs

<details> <summary>Diff for <strong>index.html</strong></summary>

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "TpdomL4EgDh8FX6uRYfhU",
+        "buildId": "p8wB9OKUYcx_DKEkV5S0Y",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/TpdomL4EgDh8FX6uRYfhU/_buildManifest.js"
+      src="/_next/static/p8wB9OKUYcx_DKEkV5S0Y/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/TpdomL4EgDh8FX6uRYfhU/_ssgManifest.js"
+      src="/_next/static/p8wB9OKUYcx_DKEkV5S0Y/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> <details> <summary>Diff for <strong>link.html</strong></summary>

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "TpdomL4EgDh8FX6uRYfhU",
+        "buildId": "p8wB9OKUYcx_DKEkV5S0Y",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/TpdomL4EgDh8FX6uRYfhU/_buildManifest.js"
+      src="/_next/static/p8wB9OKUYcx_DKEkV5S0Y/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/TpdomL4EgDh8FX6uRYfhU/_ssgManifest.js"
+      src="/_next/static/p8wB9OKUYcx_DKEkV5S0Y/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> <details> <summary>Diff for <strong>withRouter.html</strong></summary>

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "TpdomL4EgDh8FX6uRYfhU",
+        "buildId": "p8wB9OKUYcx_DKEkV5S0Y",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/TpdomL4EgDh8FX6uRYfhU/_buildManifest.js"
+      src="/_next/static/p8wB9OKUYcx_DKEkV5S0Y/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/TpdomL4EgDh8FX6uRYfhU/_ssgManifest.js"
+      src="/_next/static/p8wB9OKUYcx_DKEkV5S0Y/_ssgManifest.js"
       async=""
     ></script>
   </body>

</details> </details> Commit: 3b03fc2f29ca764e024294c09c962b07e1914764

atcastle

comment created time in 2 hours

issue commentvercel/next.js

Automatic static optimization should work with getStaticProps w/out getStaticPaths

Why not use the optional catch all route to catch multiple urls in the id file like this pages/[org]/users/[[...id]].tsx? The point of using getStaticPaths is to fetch stuff non user specific content at build time or when page is requested. If it's not generated it will be generated in fallback mode until the page is generated. If you dont know the url for the [org] and [id] before user visit the url, then you dont need the "fallback" mode because there is nothing to prebuild for the NextJS.

When looking at https://github.com/tutorbookapp/tutorbook/blob/develop/pages/%5Borg%5D/users/%5Bid%5D/index.tsx#L128 it seems like you fetch user specific data in the getStaticProps function. As you comment explain there will be a "data change flashes". I will strongly recommend you not to do that since you are basically giving one users content to the next user because its static generated. So potentially you could run into some security issues here. Instead you should use getServerSideProps for that since you need the data at request time, and not for the last user's visit. Any user specific data could and should be fetched after hydration with useSwr.

nicholaschiang

comment created time in 2 hours

issue commentvercel/next.js

Redirects don't work with i18n and trailingSlash

@timneutkens Not sure if you have eyes on this issue somewhere else, but I confirmed here that this still isn't working in 10.0.6

suckydev

comment created time in 2 hours

issue commentvercel/next.js

Image optimization is not serving images in next-gen formats

Hi David, I've check your website and you have some img well served in webp and others (from embed.widencdn.net) served in jpeg

Screenshot 2021-02-24 at 21 47 31

but you put this domain in the next.config.js so it is weird

davidpaley

comment created time in 2 hours

issue commentvercel/next.js

Getting ReactDOMServer does not yet support Suspense error while using styled-components

I see this mentioned here without resolution: https://github.com/vercel/next.js/discussions/16216

pdugan20

comment created time in 3 hours

issue openedvercel/next.js

Getting ReactDOMServer does not yet support Suspense while using styled-components

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

14.4.0

What browser are you using?

Firefox

What operating system are you using?

Mac

How are you deploying your application?

Heroku

Describe the Bug

I recently updated next-i18next to 8.0.0 and am also using styled components with a custom _document.js as described in the nextjs examples section.

If I load my page index and navigate to another page like /about, everything works fine. If I try to navigate directly to /about, I get the following error: Error: ReactDOMServer does not yet support Suspense.

Expected Behavior

I would expect to be able to load other pages directly without an error appearing.

To Reproduce

Code snippets below in the comments.

The error I'm getting is: Error: ReactDOMServer does not yet support Suspense.

Screen Shot 2021-02-24 at 12 34 34 PM

Here's an example of _document.js

import React from 'react';
import PropTypes from 'prop-types';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet as StyledComponentsSheet } from 'styled-components';
import { ServerStyleSheets as MaterialUiSheets } from '@material-ui/core/styles';

const { NEXT_PUBLIC_GA_TRACKING_ID } = process.env;

const propTypes = {
    lang: PropTypes.string,
};

const defaultProps = {
    lang: 'en',
};

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const styledComponentsSheet = new StyledComponentsSheet();
        const materialUiSheets = new MaterialUiSheets();
        const originalRenderPage = ctx.renderPage;

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App) => (props) =>
                        styledComponentsSheet.collectStyles(
                            materialUiSheets.collect(<App {...props} />),
                        ),
                });

            const initialProps = await Document.getInitialProps(ctx);

            return {
                ...initialProps,
                styles: [
                    <React.Fragment key='styles'>
                        {initialProps.styles}
                        {materialUiSheets.getStyleElement()}
                        {styledComponentsSheet.getStyleElement()}
                    </React.Fragment>,
                ],
            };
        } finally {
            styledComponentsSheet.seal();
        }
    }

    render() {
        const { lang } = this.props;

        return (
            <Html lang={lang}>
                <Head>
                    <script
                        async
                        src={`https://www.googletagmanager.com/gtag/js?id=${NEXT_PUBLIC_GA_TRACKING_ID}`}
                    />
                    <script
                        async
                        src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
                    />
                    <script
                        dangerouslySetInnerHTML={{
                            __html: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);} gtag('js',new Date());gtag('config','${NEXT_PUBLIC_GA_TRACKING_ID}',{page_path:window.location.pathname,});`,
                        }}
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                    <script> </script>
                </body>
            </Html>
        );
    }
}

MyDocument.propTypes = propTypes;
MyDocument.defaultProps = defaultProps;

export default MyDocument;

Here's an example of a page:

import React from 'react';
import PropTypes from 'prop-types';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { RichText } from 'prismic-reactjs';
import Page from '../layouts/main';
import { getPageData } from '../utils/page';
import IntroSection from '../components/about/section/Intro';
import MapSection from '../components/about/section/Map';
import FooterSection from '../components/landing/section/Footer';
import { RootView } from '../styles/page';

const propTypes = {
    title: PropTypes.array.isRequired,
    description: PropTypes.array.isRequired,
};

const AboutPage = ({ title, description }) => {
    title = JSON.parse(title);
    description = JSON.parse(description);

    const renderMainColumn = () => {
        return (
            <RootView>
                <IntroSection title={title} description={description} />
                <MapSection />
                <FooterSection />
            </RootView>
        );
    };

    return (
        <Page
            singleColumn
            fullWidth
            title={RichText.asText(title)}
            mainColumn={renderMainColumn()}
        />
    );
};

export async function getServerSideProps({ req, locale }) {
    const page = await getPageData(req, locale, 'about');

    return {
        props: {
            title: JSON.stringify(page.data.title),
            description: JSON.stringify(page.data.description),
            ...(await serverSideTranslations(locale, [
                'about',
                'common',
                'header',
                'footer',
            ])),
        },
    };
}

AboutPage.propTypes = propTypes;

export default AboutPage;

created time in 3 hours

release sendgrid/sendgrid-nodejs

7.4.3

released time in 3 hours

created tagsendgrid/sendgrid-nodejs

tag7.4.3

The Official Twilio SendGrid Led, Community Driven Node.js API Library

created time in 3 hours

push eventsendgrid/sendgrid-nodejs

Twilio

commit sha ec8e762e21b0dd05576e0dd179d3478b56b5612b

[Librarian] Version Bump

view details

Twilio

commit sha 6e90f09d46f6306abca26675fbe4d5784b875146

Release 7.4.3

view details

push time in 3 hours

push eventsendgrid/sendgrid-nodejs

Twilio

commit sha b2a7be0bd10ad3de154b4160a65e6c9f9b745094

Release 7.4.2

view details

Tyler Holden

commit sha c9bfe3abb477dc736f955c2a17847357d86800bb

docs: Update API Docs link in Readme's (#1252)

view details

Elmer Thomas

commit sha 72cfa0d491869966b3fb8f7b69754b9d3b6c0d68

fix: Node 6 build failure (#1257)

view details

Twilio

commit sha ec8e762e21b0dd05576e0dd179d3478b56b5612b

[Librarian] Version Bump

view details

push time in 3 hours

issue commentvercel/next.js

TypeError: Object(...) is not a function

Look @Trapintrovert I don't remember how I solved this problem anymore. But post the code and the error that is appearing so that we can help you.

rodrigooler

comment created time in 3 hours

push eventsendgrid/sendgrid-nodejs

Elmer Thomas

commit sha 72cfa0d491869966b3fb8f7b69754b9d3b6c0d68

fix: Node 6 build failure (#1257)

view details

push time in 3 hours

delete branch sendgrid/sendgrid-nodejs

delete branch : node6

delete time in 3 hours

PR merged sendgrid/sendgrid-nodejs

fix: Node 6 build failure status: code review request

This change ensures that we don't pull in Chai v4.3.0 (which no longer supports Node 6) with npm install or yarn install.

Checklist

  • [x] I acknowledge that all my contributions will be made under the project's license
+5 -1

0 comment

2 changed files

thinkingserious

pr closed time in 3 hours

PR opened sendgrid/sendgrid-nodejs

fix: Node 6 build failure

This change ensures that we don't pull in Chai v4.3.0 (which no longer supports Node 6) with npm install or yarn install.

Checklist

  • [x] I acknowledge that all my contributions will be made under the project's license
+5 -1

0 comment

2 changed files

pr created time in 3 hours

push eventsendgrid/sendgrid-nodejs

Elmer Thomas

commit sha 556d8c4e446edac149566ff73e123803f81abd42

fix: node6 build failure

view details

push time in 4 hours

issue openedvercel/next.js

Automatic static optimization should work with getStaticProps w/out getStaticPaths

Describe the feature you'd like to request

Automatic static optimization should work with getStaticProps w/out getStaticPaths when using dynamic SSG pages.

Right now, I have to add an empty getStaticPaths to every one of my dynamic pages (e.g. pages/[org]/users/[id]/index.tsx) that uses getStaticProps:

export const getStaticPaths: GetStaticPaths<UserDisplayPageQuery> = async () => {
  return { paths: [], fallback: true };
};

This works fine, but is inconvenient and adds boilerplate code to each of my pages.

Describe the solution you'd like

Instead, Next.js should extend it's automatic static optimization capabilities to include dynamic pages with getStaticProps by simply using the existing fallback: true behavior. I don't know why this doesn't already exist. Seems easy enough.

Describe alternatives you've considered

Just adding that boilerplate getStaticPaths to every page:

export const getStaticPaths: GetStaticPaths<UserDisplayPageQuery> = async () => {
  return { paths: [], fallback: true };
};

created time in 4 hours

push eventsendgrid/sendgrid-nodejs

Elmer Thomas

commit sha 147c7d2a94dd936d91ae75be22373a7ac02df4a3

fix: node6 build failure

view details

push time in 4 hours

issue closedvercel/next.js

Returning notFound: false from getServerSideProps results in 404

What version of Next.js are you using?

10.0.3

What version of Node.js are you using?

14.7.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

When returning notFound: false from getServerSideProps, the 404 status and page are returned, as if notFound: true was returned.

This does not occur when returning notFound: false from getStaticProps.

The obvious workaround is to only set notFound if true, but it's convenient to be able to pass along a variable to notFound, regardless of value. For example:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const props = await pagePropsFactory.create(context);

  return {
    props,
    notFound: props.notFound
  };
};

Additionally, the behavior should be consistent with getStaticProps.

Expected Behavior

Returning notFound: false from getServerSideProps should not result in a 404 status and page. It should render the page as expected (like returning notFound: false from getStaticProps).

To Reproduce

Return notFound: false from a page with getServerSideProps.

export async function getServerSideProps(context) {
  return {
    props: {},
    notFound: false
  }
}

The resulting page will always result in a 404.

closed time in 4 hours

ambrauer