Merge branch 'canary' into feat/hook-webvitals

docs/api-reference/next/link.md

@@ -55,7 +55,7 @@ export default Home
 `Link` accepts the following props:
 
 - `href` - The path or URL to navigate to. This is the only required prop
-- `as` - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
+- `as` - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked. Note: when this path differs from the one provided in `href` the previous `href`/`as` behavior is used as shown in the [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes).
 - [`passHref`](#if-the-child-is-a-custom-component-that-wraps-an-a-tag) - Forces `Link` to send the `href` property to its child. Defaults to `false`
 - `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing `prefetch={false}`. When `prefetch` is set to `false`, prefetching will still occur on hover. Pages using [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions. Prefetching is only enabled in production.
 - [`replace`](#replace-the-url-instead-of-push) - Replace the current `history` state instead of adding a new url into the stack. Defaults to `false`

docs/api-reference/next/router.md

@@ -71,7 +71,7 @@ router.push(url, as, options)
 ```
 
 - `url` - The URL to navigate to
-- `as` - Optional decorator for the URL that will be shown in the browser. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
+- `as` - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked. Note: when this path differs from the one provided in `href` the previous `href`/`as` behavior is used as shown in the [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)
 - `options` - Optional object with the following configuration options:
   - `scroll` - Optional boolean, controls scrolling to the top of the page after navigation. Defaults to `true`
   - [`shallow`](/docs/routing/shallow-routing.md): Update the path of the current page without rerunning [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation), [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) or [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md). Defaults to `false`

docs/basic-features/typescript.md

@@ -35,6 +35,8 @@ touch tsconfig.json
 
 Next.js will automatically configure this file with default values. Providing your own `tsconfig.json` with custom [compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) is also supported.
 
+You can also provide a relative path to a tsconfig.json file by setting `typescript.tsconfigPath` prop inside your `next.config.js` file.
+
 > Next.js uses Babel to handle TypeScript, which has some [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats), and some [compiler options are handled differently](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options).
 
 Then, run `next` (normally `npm run dev` or `yarn dev`) and Next.js will guide you through the installation of the required packages to finish the setup:

errors/invalid-project-dir-casing.md

@@ -0,0 +1,16 @@
+# Invalid Project Directory Casing
+
+#### Why This Error Occurred
+
+When starting Next.js, the current directory is a different casing than the actual directory on your filesystem. This can cause files to resolve inconsistently.
+
+This can occur when using a case-insensitive filesystem. For example, opening PowerShell on Windows navigating to `cd path/to/myproject` instead of `cd path/to/MyProject`.
+
+#### Possible Ways to Fix It
+
+Ensure the casing for the current working directory matches the actual case of the real directory. Use a terminal that enforces case-sensitivity.
+
+### Useful Links
+
+- [Next.js CLI documentation](https://nextjs.org/docs/api-reference/cli)
+- [Case sensitivity in filesystems](https://en.wikipedia.org/wiki/Case_sensitivity#In_filesystems)

errors/manifest.json

@@ -470,6 +470,10 @@
         {
           "title": "invalid-api-status-body",
           "path": "/errors/invalid-api-status-body.md"
+        },
+        {
+          "title": "invalid-project-dir-casing",
+          "path": "/errors/invalid-project-dir-casing.md"
         }
       ]
     }

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

@@ -20,9 +20,13 @@ export default function CoverImage({ title, url, slug }) {
   )
   return (
     <div className="sm:mx-0">
-      <Link href={`/posts/${slug}`}>
-        {slug ? <a aria-label={title}>{image}</a> : image}
-      </Link>
+      {slug ? (
+        <Link href={`/posts/${slug}`}>
+          <a aria-label={title}>{image}</a>
+        </Link>
+      ) : (
+        image
+      )}
     </div>
   )
 }

examples/with-segment-analytics/pages/_app.js

@@ -1,8 +1,30 @@
 import Page from '../components/Page'
+import Script from 'next/script'
+import * as snippet from '@segment/snippet'
+
+// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
+const DEFAULT_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa'
+
+function renderSnippet() {
+  const opts = {
+    apiKey: process.env.NEXT_PUBLIC_ANALYTICS_WRITE_KEY || DEFAULT_WRITE_KEY,
+    // note: the page option only covers SSR tracking.
+    // Page.js is used to track other events using `window.analytics.page()`
+    page: true,
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    return snippet.max(opts)
+  }
+
+  return snippet.min(opts)
+}
 
 function MyApp({ Component, pageProps }) {
   return (
     <Page>
+      {/* Inject the Segment snippet into the <head> of the document  */}
+      <Script dangerouslySetInnerHTML={{ __html: renderSnippet() }} />
       <Component {...pageProps} />
     </Page>
   )

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "11.1.3-canary.30",
+  "version": "11.1.3-canary.31",
   "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": "11.1.3-canary.30",
+    "@next/eslint-plugin-next": "11.1.3-canary.31",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "11.1.3-canary.30",
+  "version": "11.1.3-canary.31",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "11.1.3-canary.30",
+  "version": "11.1.3-canary.31",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "11.1.3-canary.30",
+  "version": "11.1.3-canary.31",
   "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": "11.1.3-canary.30",
+  "version": "11.1.3-canary.31",
   "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": "11.1.3-canary.30",
+  "version": "11.1.3-canary.31",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/index.ts

@@ -196,7 +196,7 @@ export default async function build(
           dir,
           pagesDir,
           !ignoreTypeScriptErrors,
-          !config.images.disableStaticImages,
+          config,
           cacheDir
         )
       )

packages/next/build/webpack-config.ts

@@ -203,6 +203,8 @@ const NODE_ESM_RESOLVE_OPTIONS = {
   fullySpecified: true,
 }
 
+let TSCONFIG_WARNED = false
+
 export default async function getBaseWebpackConfig(
   dir: string,
   {
@@ -378,14 +380,22 @@ export default async function getBaseWebpackConfig(
   try {
     typeScriptPath = require.resolve('typescript', { paths: [dir] })
   } catch (_) {}
-  const tsConfigPath = path.join(dir, 'tsconfig.json')
+  const tsConfigPath = path.join(dir, config.typescript.tsconfigPath)
   const useTypeScript = Boolean(
     typeScriptPath && (await fileExists(tsConfigPath))
   )
 
   let jsConfig
   // jsconfig is a subset of tsconfig
   if (useTypeScript) {
+    if (
+      config.typescript.tsconfigPath !== 'tsconfig.json' &&
+      TSCONFIG_WARNED === false
+    ) {
+      TSCONFIG_WARNED = true
+      Log.info(`Using tsconfig file: ${config.typescript.tsconfigPath}`)
+    }
+
     const ts = (await import(typeScriptPath!)) as typeof import('typescript')
     const tsConfig = await getTypeScriptConfiguration(ts, tsConfigPath, true)
     jsConfig = { compilerOptions: tsConfig.options }

packages/next/build/webpack/loaders/next-image-loader.js

@@ -17,7 +17,7 @@ function nextImageLoader(content) {
       '/static/image/[path][name].[hash].[ext]',
       opts
     )
-    const outputPath = '/_next' + interpolatedName
+    const outputPath = assetPrefix + '/_next' + interpolatedName
 
     let extension = loaderUtils.interpolateName(this, '[ext]', opts)
     if (extension === 'jpg') {
@@ -32,7 +32,7 @@ function nextImageLoader(content) {
       if (isDev) {
         const prefix = 'http://localhost'
         const url = new URL('/_next/image', prefix)
-        url.searchParams.set('url', assetPrefix + outputPath)
+        url.searchParams.set('url', outputPath)
         url.searchParams.set('w', BLUR_IMG_SIZE)
         url.searchParams.set('q', BLUR_QUALITY)
         blurDataURL = url.href.slice(prefix.length)