Merge branch 'not-found/fix-blocking-ssg-404' of github.com:ijjk/next…

….js into not-found/fix-blocking-ssg-404
vercel · Oct 27, 2020 · 345338a · 345338a
2 parents 3b28644 + f8fd63a
commit 345338a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
@@ -44,11 +44,30 @@ export default Home
 
 - `width` and `height` are required to prevent [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google is going to [use in their search ranking](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)
 - `width` and `height` are automatically responsive, unlike the HTML `<img>` element
+- `quality` can be configured per image, default 75
 - See [`next/image`](/docs/api-reference/next/image.md) for list of available props.
 
 ## Configuration
 
-You can configure Image Optimization by using the `images` property in `next.config.js`.
+You can optionally configure Image Optimization by using the `images` property in `next.config.js`.
+
+If no configuration is provided, the following default configuration will be used.
+
+```js
+module.exports = {
+  images: {
+    deviceSizes: [320, 420, 768, 1024, 1200],
+    iconSizes: [],
+    domains: [],
+    path: '/_next/image',
+    loader: 'default',
+  },
+}
+```
+
+If a specific property is omitted, such as `deviceSizes`, that property will use the default above.
+
+This means you only need to configure the properties you wish to change.
 
 ### Device Sizes
 

diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
@@ -218,18 +218,12 @@ function assignDefaults(userConfig: { [key: string]: any }) {
   if (result?.images) {
     const { images } = result
 
-    // Normalize defined image host to end in slash
-    if (images?.path) {
-      if (images.path[images.path.length - 1] !== '/') {
-        images.path += '/'
-      }
-    }
-
     if (typeof images !== 'object') {
       throw new Error(
         `Specified images should be an object received ${typeof images}`
       )
     }
+
     if (images.domains) {
       if (!Array.isArray(images.domains)) {
         throw new Error(
@@ -306,6 +300,14 @@ function assignDefaults(userConfig: { [key: string]: any }) {
         )
       }
     }
+
+    // Append trailing slash for non-default loaders
+    if (images.path) {
+      const isDefaultLoader = !images.loader || images.loader === 'default'
+      if (!isDefaultLoader && images.path[images.path.length - 1] !== '/') {
+        images.path += '/'
+      }
+    }
   }
 
   if (result.experimental?.i18n) {

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -71,10 +71,7 @@ function runTests(mode) {
       expect(
         await hasImageMatchingUrl(
           browser,
-          mode === 'serverless'
-            ? // FIXME: this is a bug
-              `http://localhost:${appPort}/_next/image/?url=%2Ftest.jpg&w=420&q=75`
-            : `http://localhost:${appPort}/_next/image?url=%2Ftest.jpg&w=420&q=75`
+          `http://localhost:${appPort}/_next/image?url=%2Ftest.jpg&w=420&q=75`
         )
       ).toBe(true)
     } finally {