Merge branch 'canary' into add/tracing-improvements

Author: kodiakhq[bot]

.github/workflows/build_native.yml

@@ -50,7 +50,15 @@ jobs:
         uses: actions/cache@v2
         with:
           path: packages/next/native/**
-          key: next-swc-nightly-2021-03-25-${{ matrix.target }}-${{ hashFiles('packages/next/build/swc/**') }}
+          key: next-swc-nightly-2021-03-25-${{ matrix.target }}-${{ hashFiles('.github/workflows/build_native.yml', 'packages/next/build/swc/**') }}
+      - name: Cross build aarch64 setup
+        if: ${{ matrix.target == 'aarch64-apple-darwin' && steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+        run: |
+          sudo rm -Rf /Library/Developer/CommandLineTools/SDKs/*;
+          export CC=$(xcrun -f clang);
+          export CXX=$(xcrun -f clang++);
+          SYSROOT=$(xcrun --sdk macosx --show-sdk-path);
+          export CFLAGS="-isysroot $SYSROOT -isystem $SYSROOT";
       - name: 'Build'
         if: steps.binary-cache.outputs.cache-hit != true
         run: yarn build-native --target ${{ matrix.target }}

.github/workflows/build_test_deploy.yml

@@ -8,6 +8,16 @@ on:
 name: Build, test, and deploy
 
 jobs:
+  check-examples:
+    name: Check examples
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install moreutils
+        run: sudo apt install moreutils
+      - name: Check examples
+        run: ./scripts/check-examples.sh
+
   build:
     runs-on: ubuntu-latest
     env:
@@ -58,13 +68,15 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-binaries
           path: packages/next/build/swc/dist
       # Only check linux build for now, mac builds can sometimes be different even with the same code
       - run: |
           mv ./packages/next/build/swc/dist/next-swc.linux-x64-gnu.node \
             ./packages/next/native/next-swc.linux-x64-gnu.node
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       - run: ./scripts/check-pre-compiled.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -305,45 +317,64 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
+        id: docs-change
       - name: Setup node
         uses: actions/setup-node@v2
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           node-version: 14
           check-latest: true
       - name: Install
         uses: actions-rs/toolchain@v1
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           profile: minimal
           toolchain: nightly-2021-03-25
           target: ${{ matrix.target }}
       - name: Cache cargo registry
         uses: actions/cache@v1
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           path: ~/.cargo/registry
           key: stable-${{ matrix.os }}-node@14-cargo-registry-trimmed-${{ hashFiles('**/Cargo.lock') }}
       - name: Cache cargo index
         uses: actions/cache@v1
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           path: ~/.cargo/git
           key: stable-${{ matrix.os }}-node@14-cargo-index-trimmed-${{ hashFiles('**/Cargo.lock') }}
       - name: Cache native binary
         id: binary-cache
         uses: actions/cache@v2
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           path: packages/next/native/next-swc.*.node
-          key: next-swc-nightly-2021-03-25-${{ matrix.target }}-${{ hashFiles('packages/next/build/swc/**') }}
+          key: next-swc-nightly-2021-03-25-${{ matrix.target }}-${{ hashFiles('.github/workflows/build_test_deploy.yml', 'packages/next/build/swc/**') }}
+      - name: Cross build aarch64 setup
+        if: ${{ matrix.target == 'aarch64-apple-darwin' && steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+        run: |
+          sudo rm -Rf /Library/Developer/CommandLineTools/SDKs/*;
+          export CC=$(xcrun -f clang);
+          export CXX=$(xcrun -f clang++);
+          SYSROOT=$(xcrun --sdk macosx --show-sdk-path);
+          export CFLAGS="-isysroot $SYSROOT -isystem $SYSROOT";
       - name: 'Build'
-        if: steps.binary-cache.outputs.cache-hit != 'true'
+        if: ${{ steps.binary-cache.outputs.cache-hit != 'true' && steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         run: yarn build-native --target ${{ matrix.target }}
         env:
           MACOSX_DEPLOYMENT_TARGET: '10.13'
         working-directory: packages/next
       - name: Upload artifact
         uses: actions/upload-artifact@v2
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           name: next-swc-binaries
           path: packages/next/native/next-swc.*.node
       - name: Clear the cargo caches
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         run: |
           cargo install cargo-cache --no-default-features --features ci-autoclean
           cargo-cache
@@ -354,9 +385,15 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
+        id: docs-change
       - name: Install
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         uses: actions-rs/toolchain@v1
         with:
           toolchain: nightly-2021-03-25
           profile: minimal
       - run: cd packages/next/build/swc && cargo test
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}

docs/api-reference/next.config.js/react-strict-mode.md

@@ -6,7 +6,9 @@ description: The complete Next.js runtime is now Strict Mode-compliant, learn ho
 
 > **Suggested**: We strongly suggest you enable Strict Mode in your Next.js application to better prepare your application for the future of React.
 
-The Next.js runtime is now Strict Mode-compliant. To opt-in to Strict Mode, configure the following option in your `next.config.js`:
+React's [Strict Mode](https://reactjs.org/docs/strict-mode.html) is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features.
+
+The Next.js runtime is Strict Mode-compliant. To opt-in to Strict Mode, configure the following option in your `next.config.js`:
 
 ```js
 // next.config.js
@@ -15,9 +17,7 @@ module.exports = {
 }
 ```
 
-If you or your team are not ready to use Strict Mode in your entire application, that's OK! You can incrementally migrate on a page-by-page basis [using `<React.StrictMode>`](https://reactjs.org/docs/strict-mode.html).
-
-React's Strict Mode is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features.
+If you or your team are not ready to use Strict Mode in your entire application, that's OK! You can incrementally migrate on a page-by-page basis using `<React.StrictMode>`.
 
 ## Related
 

docs/api-reference/next/image.md

@@ -263,6 +263,14 @@ Other properties on the `<Image />` component will be passed to the underlying
 - `ref`. Use [`onLoadingComplete`](#onloadingcomplete) instead.
 - `decoding`. It is always `"async"`.
 
+## Styling
+
+`next/image` wraps the `img` element with other `div` elements to maintain the aspect ratio of the image and prevent [Cumulative Layout Shift](https://vercel.com/blog/core-web-vitals#cumulative-layout-shift).
+
+To add styles to the underlying `img` element, pass the `className` prop to the `<Image />` component. Then, use Next.js' [built-in CSS support](/docs/basic-features/built-in-css-support.md) to add rules to that class.
+
+**Note:** If using [`layout="fill"`](/docs/api-reference/next/image.md#layout), ensure the parent element uses `position: relative`.
+
 ## Related
 
 For more information on what to do next, we recommend the following sections:

docs/authentication.md

@@ -101,7 +101,7 @@ const Profile = ({ user }) => {
 export default Profile
 ```
 
-An advantage of this pattern is preventing a flash of unauthenticated content before redirecting. It's important to note fetching user data in `getServerSideProps` will block rendering until the request to your authentication provider resolves. To prevent creating a bottleneck and decreasing your TTFB ([Time to First Byte](https://web.dev/time-to-first-byte/)), you should ensure your authentication lookup is fast. Otherwise, consider [static generation](#authenticating-statically-generated-pages).
+An advantage of this pattern is preventing a flash of unauthenticated content before redirecting. It's important to note fetching user data in `getServerSideProps` will block rendering until the request to your authentication provider resolves. To prevent creating a bottleneck and increasing your TTFB ([Time to First Byte](https://web.dev/time-to-first-byte/)), you should ensure your authentication lookup is fast. Otherwise, consider [static generation](#authenticating-statically-generated-pages).
 
 ## Authentication Providers
 

docs/basic-features/data-fetching.md

@@ -424,7 +424,7 @@ export async function getStaticPaths() {
     paths: [
       { params: { ... } } // See the "paths" section below
     ],
-    fallback: true or false // See the "fallback" section below
+    fallback: true, false, or 'blocking' // See the "fallback" section below
   };
 }
 ```

errors/manifest.json

@@ -427,13 +427,25 @@
           "title": "sharp-missing-in-production",
           "path": "/errors/sharp-missing-in-production.md"
         },
+        {
+          "title": "script-in-document-page",
+          "path": "/errors/no-script-in-document-page.md"
+        },
+        {
+          "title": "script-in-head-component",
+          "path": "/errors/no-script-in-head-component.md"
+        },
         {
           "title": "max-custom-routes-reached",
           "path": "/errors/max-custom-routes-reached.md"
         },
         {
           "title": "module-not-found",
           "path": "/errors/module-not-found.md"
+        },
+        {
+          "title": "next-config-error",
+          "path": "/errors/next-config-error.md"
         }
       ]
     }

errors/next-config-error.md

@@ -0,0 +1,14 @@
+# next.config.js Loading Error
+
+#### Why This Error Occurred
+
+When attempting to load your `next.config.js` file an error occurred. This could be due to a syntax error or attempting to `require` a module that wasn't available.
+
+#### Possible Ways to Fix It
+
+See the error message in your terminal where you started `next` to see more context. The `next.config.js` file is not transpiled by Next.js currently so ensure only features supported by your current node.js version are being used.
+
+### Useful Links
+
+- [next.config.js documentation](https://nextjs.org/docs/api-reference/next.config.js/introduction)
+- [node.js version feature chart](https://node.green/)

errors/no-script-in-document-page.md

@@ -0,0 +1,27 @@
+# Script component inside \_document.js
+
+#### Why This Error Occurred
+
+You can't use the `next/script` component inside the `_document.js` page. That's because the `_document.js` page only runs on the server and `next/script` has client-side functionality to ensure loading order.
+
+#### Possible Ways to Fix It
+
+If you want a global script, instead use the `_app.js` page.
+
+```jsx
+import Script from 'next/script'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Script src="/my-script.js" />
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+export default MyApp
+```
+
+- [custom-app](https://nextjs.org/docs/advanced-features/custom-app)
+- [next-script](https://nextjs.org/docs/basic-features/script#usage)

errors/no-script-in-head-component.md

@@ -0,0 +1,48 @@
+# Script component inside Head component
+
+#### Why This Error Occurred
+
+The `next/script` component shouldn't be placed inside the `next/head` component
+
+#### Possible Ways to Fix It
+
+Move the `<Script />` component outside of `<Head>...</Head>`
+
+**Before**
+
+```js
+import Script from 'next/script'
+import Head from 'next/head'
+
+export default function Index() {
+  return (
+    <Head>
+      <title>Next.js</title>
+      <Script src="/my-script.js" />
+    </Head>
+  )
+}
+```
+
+**After**
+
+```js
+import Script from 'next/script'
+import Head from 'next/head'
+
+export default function Index() {
+  return (
+    <>
+      <Head>
+        <title>Next.js</title>
+      </Head>
+      <Script src="/my-script.js" />
+    </>
+  )
+}
+```
+
+### Useful links
+
+- [next/head](https://nextjs.org/docs/api-reference/next/head)
+- [next/script](https://nextjs.org/docs/basic-features/script#usage)