Merge branch 'canary' into breaking-rename-next-image

.github/workflows/build_test_deploy.yml

@@ -7,7 +7,7 @@ on:
 name: Build, test, and deploy
 
 env:
-  NAPI_CLI_VERSION: 2.7.0
+  NAPI_CLI_VERSION: 2.12.0
   TURBO_VERSION: 1.3.2-canary.1
   RUST_TOOLCHAIN: nightly-2022-09-23
   PNPM_VERSION: 7.3.0

.github/workflows/pull_request_stats.yml

@@ -5,7 +5,7 @@ on:
 name: Generate Pull Request Stats
 
 env:
-  NAPI_CLI_VERSION: 2.7.0
+  NAPI_CLI_VERSION: 2.12.0
   TURBO_VERSION: 1.3.2-canary.1
   RUST_TOOLCHAIN: nightly-2022-09-23
   PNPM_VERSION: 7.3.0
@@ -84,7 +84,7 @@ jobs:
 
       # since the repo's dependencies aren't installed we need
       # to install napi globally
-      - run: npm i -g @napi-rs/cli@2.7.0
+      - run: npm i -g @napi-rs/cli@${NAPI_CLI_VERSION}
       - run: npm i -g turbo@${TURBO_VERSION} pnpm@${PNPM_VERSION}
 
       - name: Build

docs/advanced-features/using-mdx.md

@@ -16,7 +16,7 @@ However, because markdown is essentially static content, you can't create _dynam
 
 ## MDX Plugins
 
-Internally MDX uses remark and rehype. Remark is a markdown processor powered by a plugins ecosystem. This plugin ecosystem lets you parse code, transform `HTML` elements, change syntax, extract frontmatter, and more.
+Internally MDX uses remark and rehype. Remark is a markdown processor powered by a plugins ecosystem. This plugin ecosystem lets you parse code, transform `HTML` elements, change syntax, extract frontmatter, and more. Using [remark-gfm to enable GitHub flavored markdown (GFM)](https://mdxjs.com/guides/gfm/) is a popular option.
 
 Rehype is an `HTML` processor, also powered by a plugin ecosystem. Similar to remark, these plugins let you manipulate, sanitize, compile and configure all types of data, elements and content.
 
@@ -44,6 +44,9 @@ The following steps outline how to setup `@next/mdx` in your Next.js project:
    const withMDX = require('@next/mdx')({
      extension: /\.mdx?$/,
      options: {
+       // If you use remark-gfm, you'll need to use next.config.mjs
+       // as the package is ESM only
+       // https://github.com/remarkjs/remark-gfm#install
        remarkPlugins: [],
        rehypePlugins: [],
        // If you use `MDXProvider`, uncomment the following line.

errors/invalid-route-source.md

@@ -2,12 +2,18 @@
 
 #### Why This Error Occurred
 
-When defining custom routes a route was added that causes an error during parsing. This can be due to trying to use normal `RegExp` syntax like negative lookaheads (`?!exclude`) without following `path-to-regexp`'s syntax for it.
+When defining custom routes, or a middleware `matcher`, a pattern could not be parsed.
+
+This could have been due to trying to use normal `RegExp` syntax like negative lookaheads (`?!exclude`) without following [`path-to-regexp`](https://github.com/pillarjs/path-to-regexp)'s syntax for it.
 
 #### Possible Ways to Fix It
 
 Wrap the `RegExp` part of your `source` as an un-named parameter.
 
+---
+
+Custom routes:
+
 **Before**
 
 ```js
@@ -26,6 +32,26 @@ Wrap the `RegExp` part of your `source` as an un-named parameter.
 }
 ```
 
+---
+
+Middleware:
+
+**Before**
+
+```js
+const config = {
+  matcher: '/feedback/(?!general)',
+}
+```
+
+**After**
+
+```js
+const config = {
+  matcher: '/feedback/((?!general).*)',
+}
+```
+
 ### Useful Links
 
 - [path-to-regexp](https://github.com/pillarjs/path-to-regexp)

examples/progressive-web-app/next.config.js

@@ -1,10 +1,8 @@
 /** @type {import('next').NextConfig} */
-const withPWA = require('next-pwa')
-const runtimeCaching = require('next-pwa/cache')
+const withPWA = require('next-pwa')({
+  dest: 'public',
+})
 
 module.exports = withPWA({
-  pwa: {
-    dest: 'public',
-    runtimeCaching,
-  },
+  // config
 })

examples/progressive-web-app/package.json

@@ -7,9 +7,9 @@
   },
   "dependencies": {
     "next": "latest",
-    "next-pwa": "5.5.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next-pwa": "^5.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "17.0.4",

examples/with-sfcc/.env.local.example

@@ -0,0 +1,5 @@
+SFDC_CLIENT_ID=
+SFDC_SECRET=
+SFDC_ORGANIZATIONID=
+SFDC_SHORTCODE=
+SFDC_SITEID=

examples/with-sfcc/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-sfcc/README.md

@@ -0,0 +1,31 @@
+# Example Next.js app with Salesforce Commerce Cloud
+
+This example shows how to create a headless ecommerce application using Next.js, [Salesforce commerce cloud](https://www.salesforce.com/products/commerce-cloud/overview/), and [Tailwind](https://tailwindcss.com).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or view the demo [here](https://salesforce-cloud-commerce.vercel.app/)
+
+[![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-sfcc&project-name=with-sfcc&repository-name=with-sfcc&env=SFDC_CLIENT_ID,SFDC_SECRET,SFDC_ORGANIZATIONID,SFDC_SHORTCODE,SFDC_SITEID&envDescription=API%20Keys%20from%20SFCC%20needed%20to%20run%20this%20application.)
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/with-sfcc) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example::
+
+```bash
+ npx create-next-app --example with-sfcc nextjs-sfcc-app
+```
+
+```bash
+yarn create next-app --example with-sfcc nextjs-sfcc-app
+```
+
+```bash
+pnpm create next-app --example with-sfcc nextjs-sfcc-app
+```
+
+## References
+
+- SDK: https://github.com/SalesforceCommerceCloud/commerce-sdk

examples/with-sfcc/components/Header.js

@@ -0,0 +1,41 @@
+import Image from 'next/future/image'
+
+export default function Header({ scrollHandler }) {
+  return (
+    <header className="relative">
+      <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+      <div className="mx-auto">
+        <div className="relative shadow-xl sm:overflow-hidden">
+          <div className="absolute inset-0">
+            <Image
+              priority
+              fill
+              className="h-full w-full object-cover"
+              src="/hero.jpg"
+              alt="Coffee grinder"
+            />
+            <div className="absolute inset-0 bg-orange-100 mix-blend-multiply" />
+          </div>
+          <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+            <p className="relative left-0 right-0 mx-auto mt-5 max-w-xl text-center text-xl  font-semibold uppercase tracking-wide text-orange-600">
+              The Coffee House
+            </p>
+            <h1 className="mt-1 text-center font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-7xl">
+              <span className="block text-white">Life is better with</span>
+              <span className="block text-orange-500">coffee</span>
+            </h1>
+
+            <div className="mx-auto mt-10 max-w-xs sm:flex sm:max-w-none sm:justify-center">
+              <button
+                className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-orange-600 shadow-sm hover:bg-orange-100 sm:px-8"
+                onClick={scrollHandler}
+              >
+                Shop coffees
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

examples/with-sfcc/components/ProductCard.js

@@ -0,0 +1,39 @@
+import Image from 'next/future/image'
+import Link from 'next/link'
+import { useState } from 'react'
+
+function cn(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function ProductCard({ product }) {
+  const [isLoading, setLoading] = useState(true)
+
+  return (
+    <Link href={`/products/${product.id}`}>
+      <a className="group">
+        <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
+          <Image
+            alt=""
+            src={product.imageGroups[0].images[0].link}
+            fill
+            className={cn(
+              'object-cover duration-700 ease-in-out group-hover:opacity-75	',
+              isLoading
+                ? 'scale-110 blur-2xl grayscale'
+                : 'scale-100 blur-0 grayscale-0'
+            )}
+            onLoadingComplete={() => setLoading(false)}
+          />
+        </div>
+        <div className="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+          <h3>{product.name}</h3>
+          <p>${product.price}</p>
+        </div>
+        <p className="mt-1 text-sm italic text-gray-500">
+          {product.shortDescription}
+        </p>
+      </a>
+    </Link>
+  )
+}

examples/with-sfcc/components/layout.js

@@ -0,0 +1,17 @@
+export default function Layout({ children }) {
+  return (
+    <>
+      <main>{children}</main>
+      <footer className="center mt-5 flex justify-center space-x-4 bg-[#E7E8EF] p-4 text-xs">
+        <p>Powered by Next.js, Salesforce Commerce Cloud, and Vercel </p>
+        <span>|</span>
+        <a
+          href="https://github.com/vercel/next.js/tree/canary/examples/with-sfcc"
+          className="font-medium text-orange-600"
+        >
+          Source code
+        </a>
+      </footer>
+    </>
+  )
+}

examples/with-sfcc/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  images: {
+    domains: ['zzte-003.sandbox.us02.dx.commercecloud.salesforce.com'],
+  },
+}

examples/with-sfcc/package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "commerce-sdk": "^2.8.0",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@types/node": "17.0.4",
+    "@types/react": "17.0.38",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.7",
+    "typescript": "4.5.4"
+  }
+}

examples/with-sfcc/pages/_app.js

@@ -0,0 +1,18 @@
+import '../styles/globals.css'
+import Layout from '../components/layout'
+import Head from 'next/head'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>The Coffee House</title>
+      </Head>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </>
+  )
+}
+
+export default MyApp

examples/with-sfcc/pages/_document.js

@@ -0,0 +1,23 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <meta
+          name="description"
+          content="The premiere coffee delivery service."
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}