Merge branch 'canary' into ci/update-diff-check

contributing.md

@@ -132,7 +132,7 @@ Description
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/DIRECTORY_NAME&project-name=DIRECTORY_NAME&repository-name=DIRECTORY_NAME)
 

examples/with-goober/README.md

@@ -10,7 +10,7 @@ Goober initially started with a slogan as "a less than 1KB css-in-js library at
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-goober&project-name=with-goober&repository-name=with-goober)
 

examples/with-hls-js/README.md

@@ -4,7 +4,7 @@ This example shows how to use Next.js along with [HLS.js](https://github.com/vid
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-hls-js&project-name=with-hls-js&repository-name=with-hls-js)
 

examples/with-react-md-typescript/README.md

@@ -19,7 +19,7 @@ for a more complex example of using ReactMD + Next.js.
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-md-typescript&project-name=with-react-md-typescript&repository-name=with-react-md-typescript)
 

examples/with-react-md/README.md

@@ -20,7 +20,7 @@ example for Typescript support.
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-md&project-name=with-react-md&repository-name=with-react-md)
 

examples/with-service-worker/README.md

@@ -6,7 +6,7 @@ The example is based on the following blog post: [Adding a service worker into y
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-service-worker&project-name=with-service-worker&repository-name=with-service-worker)
 

examples/with-urql/README.md

@@ -4,7 +4,7 @@ Use [urql](https://github.com/FormidableLabs/urql) with Next.js using SSG.
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-urql&project-name=with-urql&repository-name=with-urql)
 

packages/next-plugin-storybook/preset.js

@@ -25,7 +25,25 @@ async function webpackFinal(config) {
     ...nextWebpackConfig.resolve,
   }
 
-  config.module.rules = [
+  config.module.rules = {
+    ...filterModuleRules(config),
+    ...nextWebpackConfig.module.rules.map((rule) => {
+      // we need to resolve next-babel-loader since it's not available
+      // relative with storybook's config
+      if (rule.use && rule.use.loader === 'next-babel-loader') {
+        rule.use.loader = require.resolve(
+          'next/dist/build/webpack/loaders/next-babel-loader'
+        )
+      }
+      return rule
+    }),
+  }
+
+  return config
+}
+
+function filterModuleRules(config) {
+  return [
     ...config.module.rules.filter((rule) => {
       // the rules we're filtering use RegExp for the test
       if (!(rule.test instanceof RegExp)) return true
@@ -43,21 +61,10 @@ async function webpackFinal(config) {
       }
       return true
     }),
-    ...nextWebpackConfig.module.rules.map((rule) => {
-      // we need to resolve next-babel-loader since it's not available
-      // relative with storybook's config
-      if (rule.use && rule.use.loader === 'next-babel-loader') {
-        rule.use.loader = require.resolve(
-          'next/dist/build/webpack/loaders/next-babel-loader'
-        )
-      }
-      return rule
-    }),
   ]
-
-  return config
 }
 
 module.exports = {
   webpackFinal,
+  filterModuleRules,
 }

test/unit/webpack-config-overrides.unit.test.js

@@ -1,5 +1,18 @@
 /* eslint-env jest */
 import { attachReactRefresh } from 'next/dist/build/webpack-config'
+import * as storybookPlugin from '../../packages/next-plugin-storybook/preset'
+
+describe('next-plugin-storybook filterModuleRules', () => {
+  it('should filter module rules correctly', async () => {
+    const input = {
+      module: { rules: [{ test: 'babel-loader' }, { test: /.*\.css/ }] },
+    }
+    const expected = [{ test: 'babel-loader' }]
+
+    const output = storybookPlugin.filterModuleRules(input)
+    expect(output).toEqual(expected)
+  })
+})
 
 describe('webpack-config attachReactRefresh', () => {
   it('should skip adding when unrelated', () => {