Merge branch 'canary' into add-route-events-types

.eslintignore

@@ -13,3 +13,4 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
+packages/next-env/**/*.d.ts

.prettierignore

@@ -13,3 +13,4 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
+packages/next-env/**/*.d.ts

docs/advanced-features/amp-support/amp-in-static-html-export.md

@@ -27,7 +27,7 @@ And the AMP version of your page will include a link to the HTML page:
 <link rel="canonical" href="/about" />
 ```
 
-When [`exportTrailingSlash`](/docs/api-reference/next.config.js/exportPathMap.md#0cf7d6666b394c5d8d08a16a933e86ea) is enabled the exported pages for `pages/about.js` would be:
+When [`trailingSlash`](/docs/api-reference/next.config.js/trailing-slash.md) is enabled the exported pages for `pages/about.js` would be:
 
 - `out/about/index.html` - HTML page
 - `out/about.amp/index.html` - AMP page

docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md

@@ -4,10 +4,10 @@ description: A custom asset prefix allows you serve static assets from a CDN. Le
 
 # CDN Support with Asset Prefix
 
-> **Attention**: [Deploying to Vercel](docs/deployment.md) automatically configures a global CDN for your Next.js project.
+> **Attention**: [Deploying to Vercel](/docs/deployment.md) automatically configures a global CDN for your Next.js project.
 > You do not need to manually setup an Asset Prefix.
 
-> **Note**: Next.js 9.5+ added support for a customizable [Base Path](docs/api-reference/next.config.js/basepath.md), which is better
+> **Note**: Next.js 9.5+ added support for a customizable [Base Path](/docs/api-reference/next.config.js/basepath.md), which is better
 > suited for hosting your application on a sub-path like `/docs`.
 > We do not suggest you use a custom Asset Prefix for this use case.
 

docs/api-reference/next.config.js/environment-variables.md

@@ -10,7 +10,6 @@ description: Learn to add and access environment variables in your Next.js appli
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-env-from-next-config-js">With env</a></li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-now-env">With Now env</a></li>
   </ul>
 </details>
 

docs/api-reference/next.config.js/exportPathMap.md

@@ -59,7 +59,7 @@ The returned object is a map of pages where the `key` is the `pathname` and the
 
 It is possible to configure Next.js to export pages as `index.html` files and require trailing slashes, `/about` becomes `/about/index.html` and is routable via `/about/`. This was the default behavior prior to Next.js 9.
 
-To switch back and add a trailing slash, open `next.config.js` and enable the `exportTrailingSlash` config:
+To switch back and add a trailing slash, open `next.config.js` and enable the `trailingSlash` config:
 
 ```js
 module.exports = {

docs/api-routes/api-middlewares.md

@@ -124,23 +124,18 @@ For better type-safety, it is not recommended to extend the `req` and `res` obje
 ```ts
 // utils/cookies.ts
 
-import { serialize } from 'cookie'
+import { serialize, CookieSerializeOptions } from 'cookie'
 import { NextApiResponse } from 'next'
 
 /**
  * This sets `cookie` using the `res` object
  */
 
-type Options = {
-  expires?: Date
-  maxAge?: number
-}
-
 export const setCookie = (
   res: NextApiResponse,
   name: string,
   value: unknown,
-  options: Options = {}
+  options: CookieSerializeOptions = {}
 ) => {
   const stringValue =
     typeof value === 'object' ? 'j:' + JSON.stringify(value) : String(value)

docs/upgrading.md

@@ -146,7 +146,7 @@ You can revert to the previous behavior by creating a `next.config.js` with the
 ```js
 // next.config.js
 module.exports = {
-  exportTrailingSlash: true,
+  trailingSlash: true,
 }
 ```
 

errors/no-document-viewport-meta.md

@@ -9,9 +9,8 @@ The viewport tag should be handled by `next/head` in `pages/_app.js`.
 
 Set your viewport `meta` tag in `pages/_app.js` instead:
 
-```jsx
+```tsx
 // pages/_app.js
-import React from 'react'
 import Head from 'next/head'
 
 function MyApp({ Component, pageProps }) {

examples/with-algolia-react-instantsearch/README.md

@@ -1,6 +1,6 @@
 # With Algolia React InstantSearch example
 
-The goal of this example is to illustrate how you can use [Algolia React InstantSearch](https://community.algolia.com/react-instantsearch/) to perform your search with a Server-rendered application developed with Next.js. It also illustrates how you can keep in sync the Url with the search.
+The goal of this example is to illustrate how you can use [Algolia React InstantSearch](https://community.algolia.com/react-instantsearch/) to perform your search in an application developed with Next.js. It also illustrates how you can keep in sync the Url with the search.
 
 ## How to use
 

examples/with-chakra-ui-typescript/.gitignore

@@ -0,0 +1,34 @@
+# 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

examples/with-chakra-ui-typescript/README.md

@@ -0,0 +1,27 @@
+# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and Typescript
+
+This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with typescript.
+
+Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.
+
+We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
+
+## 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-chakra-ui-typescript)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app
+# or
+yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-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)).

examples/with-chakra-ui-typescript/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/with-chakra-ui-typescript/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "with-chakra-ui-typescript",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/core": "^1.0.0-rc.3",
+    "@chakra-ui/icons": "^1.0.0-rc.3",
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.6.0",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "typescript": "4.0.2"
+  },
+  "license": "MIT"
+}

examples/with-chakra-ui-typescript/src/components/CTA.tsx

@@ -0,0 +1,31 @@
+import { Link as ChakraLink, Button } from '@chakra-ui/core'
+
+import { Container } from './Container'
+
+export const CTA = () => (
+  <Container
+    flexDirection="row"
+    position="fixed"
+    bottom="0"
+    width="100%"
+    maxWidth="48rem"
+    py={2}
+  >
+    <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
+      <Button width="100%" variant="outline" colorScheme="green">
+        chakra-ui
+      </Button>
+    </ChakraLink>
+
+    <ChakraLink
+      isExternal
+      href="https://github.com/vercel/next.js/blob/canary/examples/with-chakra-ui-typescript"
+      flexGrow={3}
+      mx={2}
+    >
+      <Button width="100%" variant="solid" colorScheme="green">
+        View Repo
+      </Button>
+    </ChakraLink>
+  </Container>
+)

examples/with-chakra-ui-typescript/src/components/Container.tsx

@@ -0,0 +1,19 @@
+import { Flex, useColorMode, FlexProps } from '@chakra-ui/core'
+
+export const Container = (props: FlexProps) => {
+  const { colorMode } = useColorMode()
+
+  const bgColor = { light: 'gray.50', dark: 'gray.900' }
+
+  const color = { light: 'black', dark: 'white' }
+  return (
+    <Flex
+      direction="column"
+      alignItems="center"
+      justifyContent="flex-start"
+      bg={bgColor[colorMode]}
+      color={color[colorMode]}
+      {...props}
+    />
+  )
+}

examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx

@@ -0,0 +1,16 @@
+import { useColorMode, Switch } from '@chakra-ui/core'
+
+export const DarkModeSwitch = () => {
+  const { colorMode, toggleColorMode } = useColorMode()
+  const isDark = colorMode === 'dark'
+  return (
+    <Switch
+      position="fixed"
+      top="1rem"
+      right="1rem"
+      color="green"
+      isChecked={isDark}
+      onChange={toggleColorMode}
+    />
+  )
+}

examples/with-chakra-ui-typescript/src/components/Footer.tsx

@@ -0,0 +1,5 @@
+import { Flex, FlexProps } from '@chakra-ui/core'
+
+export const Footer = (props: FlexProps) => (
+  <Flex as="footer" py="8rem" {...props} />
+)

examples/with-chakra-ui-typescript/src/components/Hero.tsx

@@ -0,0 +1,11 @@
+import { Flex, Heading } from '@chakra-ui/core'
+
+export const Hero = ({ title }: { title: string }) => (
+  <Flex justifyContent="center" alignItems="center" height="100vh">
+    <Heading fontSize="6vw">{title}</Heading>
+  </Flex>
+)
+
+Hero.defaultProps = {
+  title: 'with-chakra-ui-typescript',
+}

examples/with-chakra-ui-typescript/src/components/Main.tsx

@@ -0,0 +1,13 @@
+import { Stack, StackProps } from '@chakra-ui/core'
+
+export const Main = (props: StackProps) => (
+  <Stack
+    spacing="1.5rem"
+    width="100%"
+    maxWidth="48rem"
+    mt="-45vh"
+    pt="8rem"
+    px="1rem"
+    {...props}
+  />
+)

examples/with-chakra-ui-typescript/src/pages/_app.tsx

@@ -0,0 +1,14 @@
+import { ChakraProvider } from '@chakra-ui/core'
+
+import theme from '../theme'
+import { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ChakraProvider resetCSS theme={theme}>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
+}
+
+export default MyApp

examples/with-chakra-ui-typescript/src/pages/index.tsx

@@ -0,0 +1,56 @@
+import {
+  Link as ChakraLink,
+  Text,
+  Code,
+  List,
+  ListIcon,
+  ListItem,
+} from '@chakra-ui/core'
+import { CheckCircleIcon, LinkIcon } from '@chakra-ui/icons'
+
+import { Hero } from '../components/Hero'
+import { Container } from '../components/Container'
+import { Main } from '../components/Main'
+import { DarkModeSwitch } from '../components/DarkModeSwitch'
+import { CTA } from '../components/CTA'
+import { Footer } from '../components/Footer'
+
+const Index = () => (
+  <Container height="100vh">
+    <Hero />
+    <Main>
+      <Text>
+        Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code> +{' '}
+        <Code>typescript</Code>.
+      </Text>
+
+      <List spacing={3} my={0}>
+        <ListItem>
+          <ListIcon as={CheckCircleIcon} color="green.500" />
+          <ChakraLink
+            isExternal
+            href="https://chakra-ui.com"
+            flexGrow={1}
+            mr={2}
+          >
+            Chakra UI <LinkIcon />
+          </ChakraLink>
+        </ListItem>
+        <ListItem>
+          <ListIcon as={CheckCircleIcon} color="green.500" />
+          <ChakraLink isExternal href="https://nextjs.org" flexGrow={1} mr={2}>
+            Next.js <LinkIcon />
+          </ChakraLink>
+        </ListItem>
+      </List>
+    </Main>
+
+    <DarkModeSwitch />
+    <Footer>
+      <Text>Next ❤️ Chakra</Text>
+    </Footer>
+    <CTA />
+  </Container>
+)
+
+export default Index

examples/with-chakra-ui-typescript/src/theme.tsx

@@ -0,0 +1,17 @@
+import { theme as chakraTheme } from '@chakra-ui/core'
+
+const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }
+
+const breakpoints = ['40em', '52em', '64em']
+
+const theme = {
+  ...chakraTheme,
+  colors: {
+    ...chakraTheme.colors,
+    black: '#16161D',
+  },
+  fonts,
+  breakpoints,
+}
+
+export default theme