Merge branch 'canary' into use-micromatch-regex-remote-patterns

.github/workflows/build_test_deploy.yml

@@ -911,12 +911,13 @@ jobs:
   testDeployE2E:
     name: E2E (deploy)
     runs-on: ubuntu-latest
-    needs: [publishRelease]
+    needs: [publishRelease, build, build-native-test]
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
       VERCEL_TEST_TEAM: 'vtest314-next-e2e-tests'
+      NEXT_TEST_MODE: deploy
     steps:
       - name: Setup node
         uses: actions/setup-node@v3
@@ -930,13 +931,19 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
+      - uses: actions/download-artifact@v3
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+        with:
+          name: next-swc-test-binary
+          path: packages/next-swc/native
+
       - run: npm i -g playwright-chromium@1.14.1 && npx playwright install-deps
         name: Install playwright dependencies
 
       - run: RESET_VC_PROJECT=true node scripts/reset-vercel-project.mjs
         name: Reset test project
 
-      - run: NEXT_TEST_MODE=deploy node run-tests.js --type e2e
+      - run: node run-tests.js --type e2e
         name: Run test/e2e (deploy)
 
       - name: Upload test trace
@@ -1411,7 +1418,7 @@ jobs:
     strategy:
       matrix:
         target: [web, nodejs]
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     steps:
       - uses: actions/cache@v3
         id: restore-build

docs/basic-features/data-fetching/incremental-static-regeneration.md

@@ -139,7 +139,7 @@ $ next build
 $ next start
 ```
 
-Then, you are able to validate static pages are successfully revalidated.
+Then, you can confirm that static pages have successfully revalidated.
 
 ## Error handling and revalidation
 

errors/custom-document-image-import.md

@@ -14,15 +14,16 @@ If your image needs to be displayed on every page you can relocate it to your [`
 
 ```jsx
 //pages/_app.js
-import yourImage from "path/to/your/image"
-import Image from "next/image"
+import yourImage from 'path/to/your/image'
+import Image from 'next/image'
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
       <Image src={yourImage} alt="your_image_description" />
       <Component {...pageProps} />
     </>
+  )
 }
 
 export default MyApp

errors/next-script-for-ga.md

@@ -15,7 +15,7 @@ import Script from 'next/script'
 
 function Home() {
   return (
-    <div class="container">
+    <div className="container">
       <!-- Global site tag (gtag.js) - Google Analytics -->
       <Script
         src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
@@ -46,7 +46,7 @@ import Script from 'next/script'
 
 function Home() {
   return (
-    <div class="container">
+    <div className="container">
       <Script id="google-analytics" strategy="afterInteractive">
         {`
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -72,7 +72,7 @@ import Script from 'next/script'
 
 function Home() {
   return (
-    <div class="container">
+    <div className="container">
       <Script id="google-analytics" strategy="afterInteractive">
         {`
           window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;

examples/cms-kontent/components/avatar.js

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from '../components/image'
 
 export default function Avatar({ name, picture }) {
   return (

examples/cms-kontent/components/cover-image.js

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import Image from 'next/image'
+import Image from '../components/image'
 import Link from 'next/link'
 
 export default function CoverImage({ title, src, slug }) {

examples/cms-kontent/components/image.js

@@ -0,0 +1,32 @@
+import NextImage from 'next/image'
+import { transformImageUrl } from '@kentico/kontent-delivery'
+
+const KONTENT_ASSET_HOSTNAME_REGEX = /.kc-usercontent.com$/
+
+const getLoader = (src) => {
+  return srcIsKontentAsset(src) ? kontentImageLoader : undefined
+}
+
+const srcIsKontentAsset = (src) => {
+  try {
+    const { hostname } = new URL(src)
+    return KONTENT_ASSET_HOSTNAME_REGEX.test(hostname)
+  } catch {
+    return false
+  }
+}
+
+const kontentImageLoader = ({ src, width, quality = 100 }) => {
+  return new transformImageUrl(src)
+    .withWidth(width)
+    .withQuality(quality)
+    .withCompression('lossless')
+    .withAutomaticFormat()
+    .getUrl()
+}
+
+export default function Image(props) {
+  const loader = getLoader(props.src)
+
+  return <NextImage {...props} loader={loader} />
+}

examples/cms-kontent/lib/api.js

@@ -16,31 +16,32 @@ const client = new DeliveryClient({
 
 function parseAuthor(author) {
   return {
-    name: author.name.value,
-    picture: author.picture.value[0].url,
+    name: author.elements.name.value,
+    picture: author.elements.picture.value[0].url,
   }
 }
 
 function parsePost(post) {
   return {
-    title: post.title.value,
-    slug: post.slug.value,
-    date: post.date.value.toISOString(),
-    content: post.content.value,
-    excerpt: post.excerpt.value,
-    coverImage: post.cover_image.value[0].url,
-    author: parseAuthor(post.author.value[0]),
+    title: post.elements.title.value,
+    slug: post.elements.slug.value,
+    date: post.elements.date.value,
+    content: post.elements.content.value,
+    excerpt: post.elements.excerpt.value,
+    coverImage: post.elements.cover_image.value[0].url,
+    author: parseAuthor(post.elements.author.linkedItems[0]),
   }
 }
 
 export async function getAllPostSlugs() {
-  const postsResponse = await client
+  return await client
     .items()
     .type('post')
     .elementsParameter(['slug'])
     .toPromise()
-
-  return postsResponse.items.map((post) => post.slug.value)
+    .then((response) =>
+      response.data.items.map((post) => post.elements.slug.value)
+    )
 }
 
 export async function getMorePostsForSlug(slug, preview) {
@@ -51,26 +52,22 @@ export async function getMorePostsForSlug(slug, preview) {
     })
     .type('post')
     .orderByDescending('elements.date')
-    .withParameter('elements.slug[neq]', slug)
+    .notEqualsFilter('elements.slug', slug)
     .limitParameter(2)
     .toPromise()
-    .then((res) => {
-      return res.items.map((post) => parsePost(post))
-    })
+    .then((response) => response.data.items.map((post) => parsePost(post)))
 }
 
 export async function getPostBySlug(slug, preview) {
-  const post = await client
+  return await client
     .items()
     .queryConfig({
       usePreviewMode: !!preview,
     })
     .type('post')
     .equalsFilter('elements.slug', slug)
     .toPromise()
-    .then((result) => result.getFirstItem())
-    .then((post) => parsePost(post))
-  return post
+    .then((response) => parsePost(response.data.items[0]))
 }
 
 export async function getAllPosts(preview) {
@@ -82,5 +79,5 @@ export async function getAllPosts(preview) {
     .type('post')
     .orderByDescending('elements.date')
     .toPromise()
-    .then((postsResponse) => postsResponse.items.map((post) => parsePost(post)))
+    .then((response) => response.data.items.map((post) => parsePost(post)))
 }

examples/cms-kontent/package.json

@@ -6,20 +6,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "@kentico/kontent-delivery": "^9.2.0",
+    "@kentico/kontent-delivery": "^11.13.0",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "gray-matter": "4.0.3",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "remark": "14.0.2",
-    "remark-html": "15.0.1",
-    "rxjs": "^6.6.2"
+    "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
     "tailwindcss": "^3.0.15"
   }
 }

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.7-canary.11"
+  "version": "12.1.7-canary.16"
 }

package.json

@@ -15,6 +15,9 @@
     "dev2": "while true; do yarn --check-files && yarn dev; done",
     "test-types": "yarn tsc",
     "test-unit": "yarn jest test/unit/",
+    "test-dev": "cross-env NEXT_TEST_MODE=dev yarn testheadless",
+    "test-start": "cross-env NEXT_TEST_MODE=start yarn testheadless",
+    "test-deploy": "cross-env NEXT_TEST_MODE=deploy yarn testheadless",
     "testonly": "yarn jest --runInBand",
     "testheadless": "cross-env HEADLESS=true yarn testonly",
     "genstats": "cross-env LOCAL_STATS=true node .github/actions/next-stats-action/src/index.js",

packages/create-next-app/helpers/examples.ts

@@ -78,7 +78,7 @@ export function downloadAndExtractRepo(
     ),
     tar.extract(
       { cwd: root, strip: filePath ? filePath.split('/').length + 1 : 1 },
-      [`${name}-${branch}${filePath ? `/${filePath}` : ''}`]
+      [`${name}-${branch.replace(/\//g, '-')}${filePath ? `/${filePath}` : ''}`]
     )
   )
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "keywords": [
     "react",
     "next",
@@ -33,7 +33,7 @@
     "@types/rimraf": "3.0.0",
     "@types/tar": "4.0.3",
     "@types/validate-npm-package-name": "3.0.0",
-    "@vercel/ncc": "0.33.1",
+    "@vercel/ncc": "0.33.4",
     "async-retry": "1.3.1",
     "chalk": "2.4.2",
     "commander": "2.20.0",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.1.7-canary.11",
+    "@next/eslint-plugin-next": "12.1.7-canary.16",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "keywords": [
     "react",
     "next",
@@ -29,7 +29,7 @@
     "prepublish": "yarn release && yarn types"
   },
   "devDependencies": {
-    "@vercel/ncc": "0.33.1",
+    "@vercel/ncc": "0.33.4",
     "dotenv": "10.0.0",
     "dotenv-expand": "8.0.1"
   }

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",