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

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

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.

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).

@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!

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.

Stats from current PR

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</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

Stats from current PR

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</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

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.

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 🤷‍♂️

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>

Stats from current PR

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

<br/>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</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

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.

@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

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

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

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

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.

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;

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.

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

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

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 };
};

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.