Merge branch 'canary' into canary

vercel · Dec 16, 2020 · 9425690 · 9425690
2 parents 03593ea + e819e00
commit 9425690
Show file tree

Hide file tree

Showing 79 changed files with 1,573 additions and 497 deletions.
diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md
@@ -71,6 +71,8 @@ export default Home
 
 `DynamicComponent` will be the default component returned by `../components/hello`. It works like a regular React Component, and you can pass props to it as you normally would.
 
+> **Note**: `import()` needs to be explicitly written without template strings. Furthermore the `import()` has to be inside the `dynamic()` call for Next.js to be able to match webpack bundles / module ids to the specific `dynamic()` call and preload them before rendering. `dynamic()` can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to `React.lazy`.
+
 ## With named exports
 
 If the dynamic component is not the default export, you can use a named export too. Consider the module `../components/hello.js` which has a named export `Hello`:

diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md
@@ -214,6 +214,12 @@ export default function IndexPage(props) {
 }
 ```
 
+## Leveraging the NEXT_LOCALE cookie
+
+Next.js supports overriding the accept-language header with a `NEXT_LOCALE=the-locale` cookie. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie.
+
+For example, if a user prefers the locale `fr` but a `NEXT_LOCALE=en` cookie is set the `en` locale will be used instead until the cookie is removed or expired.
+
 ## Search Engine Optimization
 
 Since Next.js knows what language the user is visiting it will automatically add the `lang` attribute to the `<html>` tag.

diff --git a/docs/api-reference/next.config.js/introduction.md b/docs/api-reference/next.config.js/introduction.md
@@ -46,6 +46,6 @@ module.exports = (phase, { defaultConfig }) => {
 
 The commented lines are the place where you can put the configs allowed by `next.config.js`, which are defined [here](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L12-L63).
 
-However, none of the configs are required, and it's not necessary to understand what each config does, instead, search for the features you need to enable or modify in this section and they will show you what to do.
+However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
 
 > Avoid using new JavaScript features not available in your target Node.js version. `next.config.js` will not be parsed by Webpack, Babel or TypeScript.
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -93,7 +93,9 @@ Try it out:
 
 ### sizes
 
-A string mapping media queries to device sizes. Defaults to [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes).
+A string mapping media queries to device sizes. Defaults to `100vw`.
+
+We recommend setting `sizes` when `layout="responsive"` and your image will not be the same width as the viewport.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
 

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -113,7 +113,8 @@ function NavLink({ href, name }) {
 export default NavLink
 ```
 
-> **Note**: If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
+- If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
+- The component should support `onClick` property to trigger navigation correctly
 
 ## If the child is a function component
 

diff --git a/docs/routing/introduction.md b/docs/routing/introduction.md
@@ -36,7 +36,7 @@ To match a dynamic segment you can use the bracket syntax. This allows you to ma
 
 ## Linking between pages
 
-The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application.
+The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.
 
 A React component called `Link` is provided to do this client-side route transition.
 

diff --git a/examples/with-apollo/lib/apolloClient.js b/examples/with-apollo/lib/apolloClient.js
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 import { concatPagination } from '@apollo/client/utilities'
 import merge from 'deepmerge'
+import isEqual from 'lodash/isEqual'
 
 export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
 
@@ -36,7 +37,15 @@ export function initializeApollo(initialState = null) {
     const existingCache = _apolloClient.extract()
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
-    const data = merge(initialState, existingCache)
+    const data = merge(initialState, existingCache, {
+      // combine arrays using object equality (like in sets)
+      arrayMerge: (destinationArray, sourceArray) => [
+        ...sourceArray,
+        ...destinationArray.filter((d) =>
+          sourceArray.every((s) => !isEqual(d, s))
+        ),
+      ],
+    })
 
     // Restore the cache with the merged data
     _apolloClient.cache.restore(data)

diff --git a/examples/with-apollo/package.json b/examples/with-apollo/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@apollo/client": "3.1.1",
     "deepmerge": "^4.2.2",
+    "lodash": "4.17.20",
     "graphql": "^15.3.0",
     "next": "latest",
     "prop-types": "^15.6.2",

diff --git a/examples/with-ionic-typescript/.gitignore b/examples/with-ionic-typescript/.gitignore
@@ -0,0 +1,37 @@
+# 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
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# Ionic
+public/svg
diff --git a/examples/with-ionic-typescript/README.md b/examples/with-ionic-typescript/README.md
@@ -0,0 +1,21 @@
+# Ionic with TypeScript Example
+
+Example app using Next.js with [Ionic](https://ionicframework.com/) and [TypeScript](https://www.typescriptlang.org/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-ionic-typescript with-ionic-typescript-app
+# or
+yarn create next-app --example with-ionic-typescript with-ionic-typescript-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-ionic-typescript/ionic.d.ts b/examples/with-ionic-typescript/ionic.d.ts
@@ -0,0 +1,24 @@
+import { ReactText, HTMLAttributes } from 'react'
+import { JSX as LocalJSX } from '@ionic/core'
+import { JSX as IoniconsJSX } from 'ionicons'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import IonicIntrinsicElements = LocalJSX.IntrinsicElements
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import IoniconsIntrinsicElements = IoniconsJSX.IntrinsicElements
+
+type ToReact<T> = {
+  [P in keyof T]?: T[P] &
+    Omit<HTMLAttributes<Element>, 'className'> & {
+      class?: string
+      key?: ReactText
+    }
+}
+
+declare global {
+  export namespace JSX {
+    interface IntrinsicElements
+      extends ToReact<IonicIntrinsicElements & IoniconsIntrinsicElements> {
+      key?: string
+    }
+  }
+}
diff --git a/examples/with-ionic-typescript/next-env.d.ts b/examples/with-ionic-typescript/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/examples/with-ionic-typescript/next.config.js b/examples/with-ionic-typescript/next.config.js
@@ -0,0 +1,20 @@
+const path = require('path')
+const CopyPlugin = require('copy-webpack-plugin')
+module.exports = {
+  webpack: (config) => {
+    config.plugins.push(
+      new CopyPlugin({
+        patterns: [
+          {
+            from: path.join(
+              __dirname,
+              'node_modules/ionicons/dist/ionicons/svg'
+            ),
+            to: path.join(__dirname, 'public/svg'),
+          },
+        ],
+      })
+    )
+    return config
+  },
+}
diff --git a/examples/with-ionic-typescript/package.json b/examples/with-ionic-typescript/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "with-ionic-typescript",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "export": "next export -o build"
+  },
+  "dependencies": {
+    "@ionic/core": "^5.4.1",
+    "ionicons": "^5.2.3",
+    "next": "latest",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.6",
+    "@types/react": "^16.9.55",
+    "copy-webpack-plugin": "6.2.1",
+    "typescript": "^4.0.5"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-ionic-typescript/pages/_app.tsx b/examples/with-ionic-typescript/pages/_app.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react'
+import { defineCustomElements as ionDefineCustomElements } from '@ionic/core/loader'
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css'
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css'
+import '@ionic/core/css/structure.css'
+import '@ionic/core/css/typography.css'
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css'
+import '@ionic/core/css/float-elements.css'
+import '@ionic/core/css/text-alignment.css'
+import '@ionic/core/css/text-transformation.css'
+import '@ionic/core/css/flex-utils.css'
+import '@ionic/core/css/display.css'
+
+function MyApp({ Component, pageProps }) {
+  useEffect(() => {
+    ionDefineCustomElements(window)
+  })
+  return (
+    <ion-app>
+      <ion-header translucent>
+        <ion-toolbar>
+          <ion-title>Next.js with Ionic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content fullscreen>
+        <Component {...pageProps} />
+      </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  )
+}
+
+export default MyApp
diff --git a/examples/with-ionic-typescript/pages/index.tsx b/examples/with-ionic-typescript/pages/index.tsx
@@ -0,0 +1,32 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <ion-grid>
+      <ion-row>
+        {new Array(8).fill('').map((k, i) => (
+          <ion-col key={i} size="3">
+            <ion-card>
+              <Image
+                src="/cat.jpg"
+                alt="Picture of the author"
+                width={500}
+                height={500}
+              />
+              <ion-card-header>
+                <ion-card-subtitle>Destination</ion-card-subtitle>
+                <ion-card-title>Madison, WI</ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-icon name="pin" slot="start"></ion-icon>
+                Keep close to Nature's heart... and break clear away, once in
+                awhile, and climb a mountain or spend a week in the woods. Wash
+                your spirit clean.
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+        ))}
+      </ion-row>
+    </ion-grid>
+  )
+}
diff --git a/examples/with-ionic-typescript/public/cat.jpg b/examples/with-ionic-typescript/public/cat.jpg
diff --git a/examples/with-ionic-typescript/public/favicon.ico b/examples/with-ionic-typescript/public/favicon.ico
diff --git a/examples/with-ionic-typescript/public/vercel.svg b/examples/with-ionic-typescript/public/vercel.svg
diff --git a/examples/with-ionic-typescript/tsconfig.json b/examples/with-ionic-typescript/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "ionic.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-next-translate/.gitignore b/examples/with-next-translate/.gitignore
@@ -32,6 +32,3 @@ yarn-error.log*
 
 # vercel
 .vercel
-
-# next-translate
-pages/
diff --git a/examples/with-next-translate/i18n.json b/examples/with-next-translate/i18n.json
@@ -1,9 +1,6 @@
 {
   "locales": ["en", "ca"],
   "defaultLocale": "en",
-  "currentPagesDir": "_pages",
-  "finalPagesDir": "pages",
-  "localesPath": "locales",
   "pages": {
     "*": ["common"],
     "/": ["home"]

diff --git a/examples/with-next-translate/next.config.js b/examples/with-next-translate/next.config.js
@@ -1,8 +1,3 @@
-const { locales, defaultLocale } = require('./i18n.json')
+const nextTranslate = require('next-translate')
 
-module.exports = {
-  i18n: {
-    locales,
-    defaultLocale,
-  },
-}
+module.exports = nextTranslate({})
diff --git a/examples/with-next-translate/package.json b/examples/with-next-translate/package.json
@@ -1,13 +1,13 @@
 {
   "name": "with-next-translate",
   "scripts": {
-    "dev": "next-translate && next dev",
-    "build": "next-translate && next build",
+    "dev": "next dev",
+    "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "next": "10.0.0",
-    "next-translate": "0.19.0",
+    "next": "10.0.3",
+    "next-translate": "1.0.0",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },

diff --git a/examples/with-next-translate/_pages/index.js → examples/with-next-translate/pages/index.js b/examples/with-next-translate/_pages/index.js → examples/with-next-translate/pages/index.js
diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.4-canary.3"
+  "version": "10.0.4-canary.6"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.0.4-canary.3",
+  "version": "10.0.4-canary.6",
   "keywords": [
     "react",
     "next",