Merge branch 'canary' into replace-make-dir

examples/cms-sanity/.env.local.example

@@ -1,3 +1,3 @@
-SANITY_PREVIEW_SECRET=
-SANITY_PROJECT_ID=
-SANITY_API_TOKEN=
+NEXT_PUBLIC_SANITY_PROJECT_ID=
+SANITY_API_TOKEN=
+SANITY_PREVIEW_SECRET=

examples/cms-sanity/README.md

@@ -10,7 +10,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 
 Once you have access to [the environment variables you'll need](#step-4-set-up-environment-variables), 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/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&env=SANITY_PREVIEW_SECRET,SANITY_API_TOKEN,SANITY_PROJECT_ID&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
 
 ### Related examples
 
@@ -78,16 +78,16 @@ cp .env.local.example .env.local
 
 Then set each variable on `.env.local`:
 
-- `SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
-- `SANITY_PROJECT_ID`: Get the `projectId` value from the `sanity.json` file created in step 2.
-- `SANITY_API_TOKEN`: Copy the API token generated in the previous step.
+- `NEXT_PUBLIC_SANITY_PROJECT_ID` should be the `projectId` value from the `sanity.json` file created in step 2.
+- `SANITY_API_TOKEN` should be the API token generated in the previous step.
+- `SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
 
 Your `.env.local` file should look like this:
 
 ```bash
-SANITY_PREVIEW_SECRET=...
-SANITY_PROJECT_ID=...
+NEXT_PUBLIC_SANITY_PROJECT_ID=...
 SANITY_API_TOKEN=...
+SANITY_PREVIEW_SECRET=...
 ```
 
 ### Step 5. Prepare project for previewing
@@ -156,7 +156,7 @@ Now, if you go to the post page on localhost, you won't see the updated title. H
 
 To view the preview, go to the post edit page on Sanity, click the three dots above the document and select **Open preview** ([see the instruction here](https://www.sanity.io/docs/preview-content-on-site))
 
-You should now be able to see the updated title. To exit the preview mode, you can click on _"Click here to exit preview mode"_ at the top.
+You should now be able to see the updated title. To exit Preview Mode, you can click on _"Click here to exit preview mode"_ at the top.
 
 ### Step 10. Deploy on Vercel
 
@@ -172,4 +172,4 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
 
 Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&env=SANITY_PREVIEW_SECRET,SANITY_API_TOKEN,SANITY_PROJECT_ID&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)

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

@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import Link from 'next/link'
-import { imageBuilder } from '../lib/api'
+import { imageBuilder } from '../lib/sanity'
 
 export default function CoverImage({ title, url, slug }) {
   const image = (

examples/cms-sanity/lib/api.js

@@ -1,5 +1,4 @@
 import client, { previewClient } from './sanity'
-import sanityImage from '@sanity/image-url'
 
 const getUniquePosts = (posts) => {
   const slugs = new Set()
@@ -25,8 +24,6 @@ const postFields = `
 
 const getClient = (preview) => (preview ? previewClient : client)
 
-export const imageBuilder = sanityImage(client)
-
 export async function getPreviewPostBySlug(slug) {
   const data = await getClient(true).fetch(
     `*[_type == "post" && slug.current == $slug] | order(date desc){

examples/cms-sanity/lib/sanity.js

@@ -1,18 +1,24 @@
 import sanityClient from '@sanity/client'
+import sanityImage from '@sanity/image-url'
 
 const options = {
   // Find your project ID and dataset in `sanity.json` in your studio project
   dataset: 'production',
-  projectId: process.env.SANITY_PROJECT_ID,
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
   useCdn: process.env.NODE_ENV === 'production',
   // useCdn == true gives fast, cheap responses using a globally distributed cache.
   // Set this to false if your application require the freshest possible
   // data always (potentially slightly slower and a bit more expensive).
 }
 
-export default sanityClient(options)
+const client = sanityClient(options)
+
+export const imageBuilder = sanityImage(client)
+
 export const previewClient = sanityClient({
   ...options,
   useCdn: false,
   token: process.env.SANITY_API_TOKEN,
 })
+
+export default client

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.4.5-canary.29"
+  "version": "9.4.5-canary.30"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "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": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-bundle-analyzer/readme.md

@@ -25,6 +25,14 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 module.exports = withBundleAnalyzer({})
 ```
 
+Or configuration as a function:
+
+```js
+module.exports = (phase, defaultConfig) => {
+  return withBundleAnalyzer(defaultConfig)
+}
+```
+
 Then you can run the command below:
 
 ```bash

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-nomodule/package.json

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

packages/next/build/index.ts

@@ -17,6 +17,7 @@ import { fileExists } from '../lib/file-exists'
 import { findPagesDir } from '../lib/find-pages-dir'
 import loadCustomRoutes, {
   getRedirectStatus,
+  normalizeRouteRegex,
   Redirect,
   RouteType,
 } from '../lib/load-custom-routes'
@@ -273,7 +274,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
             permanent: undefined,
           }
         : {}),
-      regex: routeRegex.source,
+      regex: normalizeRouteRegex(routeRegex.source),
     }
   }
 
@@ -291,7 +292,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
         const routeRegex = getRouteRegex(page)
         return {
           page,
-          regex: routeRegex.re.source,
+          regex: normalizeRouteRegex(routeRegex.re.source),
           routeKeys: routeRegex.routeKeys,
           namedRegex: routeRegex.namedRegex,
         }
@@ -611,23 +612,24 @@ export default async function build(dir: string, conf = null): Promise<void> {
       if (isDynamicRoute(page)) {
         const routeRegex = getRouteRegex(dataRoute.replace(/\.json$/, ''))
 
-        dataRouteRegex = routeRegex.re.source.replace(
-          /\(\?:\\\/\)\?\$$/,
-          '\\.json$'
+        dataRouteRegex = normalizeRouteRegex(
+          routeRegex.re.source.replace(/\(\?:\\\/\)\?\$$/, '\\.json$')
         )
         namedDataRouteRegex = routeRegex.namedRegex!.replace(
           /\(\?:\/\)\?\$$/,
           '\\.json$'
         )
         routeKeys = routeRegex.routeKeys
       } else {
-        dataRouteRegex = new RegExp(
-          `^${path.posix.join(
-            '/_next/data',
-            escapeStringRegexp(buildId),
-            `${pagePath}.json`
-          )}$`
-        ).source
+        dataRouteRegex = normalizeRouteRegex(
+          new RegExp(
+            `^${path.posix.join(
+              '/_next/data',
+              escapeStringRegexp(buildId),
+              `${pagePath}.json`
+            )}$`
+          ).source
+        )
       }
 
       return {
@@ -789,7 +791,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
       const isSsgFallback = ssgFallbackPages.has(page)
       const isDynamic = isDynamicRoute(page)
       const hasAmp = hybridAmpPages.has(page)
-      let file = normalizePagePath(page)
+      const file = normalizePagePath(page)
 
       // The dynamic version of SSG pages are only prerendered if the fallback
       // is enabled. Below, we handle the specific prerenders of these.
@@ -824,11 +826,12 @@ export default async function build(dir: string, conf = null): Promise<void> {
           // `getStaticPaths` (additionalSsgPaths).
           const extraRoutes = additionalSsgPaths.get(page) || []
           for (const route of extraRoutes) {
-            await moveExportedPage(page, route, route, true, 'html')
-            await moveExportedPage(page, route, route, true, 'json')
+            const pageFile = normalizePagePath(route)
+            await moveExportedPage(page, route, pageFile, true, 'html')
+            await moveExportedPage(page, route, pageFile, true, 'json')
 
             if (hasAmp) {
-              const ampPage = `${normalizePagePath(route)}.amp`
+              const ampPage = `${pageFile}.amp`
               await moveExportedPage(page, ampPage, ampPage, true, 'html')
               await moveExportedPage(page, ampPage, ampPage, true, 'json')
             }
@@ -887,14 +890,17 @@ export default async function build(dir: string, conf = null): Promise<void> {
       )
 
       finalDynamicRoutes[tbdRoute] = {
-        routeRegex: getRouteRegex(tbdRoute).re.source,
+        routeRegex: normalizeRouteRegex(getRouteRegex(tbdRoute).re.source),
         dataRoute,
         fallback: ssgFallbackPages.has(tbdRoute)
           ? `${normalizedRoute}.html`
           : false,
-        dataRouteRegex: getRouteRegex(
-          dataRoute.replace(/\.json$/, '')
-        ).re.source.replace(/\(\?:\\\/\)\?\$$/, '\\.json$'),
+        dataRouteRegex: normalizeRouteRegex(
+          getRouteRegex(dataRoute.replace(/\.json$/, '')).re.source.replace(
+            /\(\?:\\\/\)\?\$$/,
+            '\\.json$'
+          )
+        ),
       }
     })
     const prerenderManifest: PrerenderManifest = {

packages/next/lib/load-custom-routes.ts

@@ -29,6 +29,11 @@ export function getRedirectStatus(route: Redirect): number {
   )
 }
 
+export function normalizeRouteRegex(regex: string) {
+  // clean up un-necessary escaping from regex.source which turns / into \\/
+  return regex.replace(/\\\//g, '/')
+}
+
 function checkRedirect(
   route: Redirect
 ): { invalidParts: string[]; hadInvalidStatus: boolean } {

packages/next/next-server/lib/router/utils/route-regex.ts

@@ -51,6 +51,25 @@ export function getRouteRegex(
   // dead code eliminate for browser since it's only needed
   // while generating routes-manifest
   if (typeof window === 'undefined') {
+    let routeKeyCharCode = 97
+    let routeKeyCharLength = 1
+
+    // builds a minimal routeKey using only a-z and minimal number of characters
+    const getSafeRouteKey = () => {
+      let routeKey = ''
+
+      for (let i = 0; i < routeKeyCharLength; i++) {
+        routeKey += String.fromCharCode(routeKeyCharCode)
+        routeKeyCharCode++
+
+        if (routeKeyCharCode > 122) {
+          routeKeyCharLength++
+          routeKeyCharCode = 97
+        }
+      }
+      return routeKey
+    }
+
     const routeKeys: { [named: string]: string } = {}
 
     let namedParameterizedRoute = segments
@@ -59,7 +78,22 @@ export function getRouteRegex(
           const { key, optional, repeat } = parseParameter(segment.slice(1, -1))
           // replace any non-word characters since they can break
           // the named regex
-          const cleanedKey = key.replace(/\W/g, '')
+          let cleanedKey = key.replace(/\W/g, '')
+          let invalidKey = false
+
+          // check if the key is still invalid and fallback to using a known
+          // safe key
+          if (cleanedKey.length === 0 || cleanedKey.length > 30) {
+            invalidKey = true
+          }
+          if (!isNaN(parseInt(cleanedKey.substr(0, 1)))) {
+            invalidKey = true
+          }
+
+          if (invalidKey) {
+            cleanedKey = getSafeRouteKey()
+          }
+
           routeKeys[cleanedKey] = key
           return repeat
             ? optional

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -76,8 +76,8 @@
     "@babel/preset-typescript": "7.9.0",
     "@babel/runtime": "7.9.6",
     "@babel/types": "7.9.6",
-    "@next/react-dev-overlay": "9.4.5-canary.29",
-    "@next/react-refresh-utils": "9.4.5-canary.29",
+    "@next/react-dev-overlay": "9.4.5-canary.30",
+    "@next/react-refresh-utils": "9.4.5-canary.30",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -115,7 +115,7 @@
     "react-dom": "^16.6.0"
   },
   "devDependencies": {
-    "@next/polyfill-nomodule": "9.4.5-canary.29",
+    "@next/polyfill-nomodule": "9.4.5-canary.30",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "9.4.5-canary.29",
+  "version": "9.4.5-canary.30",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",