Merge remote-tracking branch 'upstream/canary' into fix/i18n-index-pr…

…efetch

# Conflicts:
#	packages/next/build/index.ts

docs/basic-features/data-fetching.md

@@ -87,7 +87,7 @@ The `context` parameter is an object containing the following keys:
     }
 
     return {
-      props: {}, // will be passed to the page component as props
+      props: { data }, // will be passed to the page component as props
     }
   }
   ```
@@ -111,7 +111,7 @@ The `context` parameter is an object containing the following keys:
     }
 
     return {
-      props: {}, // will be passed to the page component as props
+      props: { data }, // will be passed to the page component as props
     }
   }
   ```
@@ -156,7 +156,7 @@ export async function getStaticProps() {
   const res = await fetch('https://.../posts')
   const posts = await res.json()
 
-  // By returning { props: posts }, the Blog component
+  // By returning { props: { posts } }, the Blog component
   // will receive `posts` as a prop at build time
   return {
     props: {
@@ -325,7 +325,7 @@ export async function getStaticProps() {
       content: fileContents,
     }
   })
-  // By returning { props: posts }, the Blog component
+  // By returning { props: { posts } }, the Blog component
   // will receive `posts` as a prop at build time
   return {
     props: {

docs/basic-features/environment-variables.md

@@ -135,3 +135,15 @@ This one is useful when running tests with tools like `jest` or `cypress` where
 There is a small difference between `test` environment, and both `development` and `production` that you need to bear in mind: `.env.local` won't be loaded, as you expect tests to produce the same results for everyone. This way every test execution will use same env defaults across different executions by ignoring your `.env.local` (which is intended to override the default set).
 
 > **Note**: similar to Default Environment Variables, `.env.test` file should be included in your repository, but `.env.test.local` shouldn't, as `.env*.local` are intended to be ignored through `.gitignore`.
+
+While running unit tests you can make sure to load your environment variables the same way Next.js does by leveraging the `loadEnvConfig` function from the `@next/env` package.
+
+```js
+// The below can be used in a Jest global setup file or similar for your testing set-up
+import { loadEnvConfig } from '@next/env'
+
+export default async () => {
+  const projectDir = process.cwd()
+  loadEnvConfig(projectDir)
+}
+```

examples/styled-jsx-with-csp/.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/styled-jsx-with-csp/README.md

@@ -0,0 +1,27 @@
+# Styled-JSX with Content Security Policy
+
+This example showcases how you can use `nonce` for `style-src` directive in `Content Security Policy` with `styled-jsx`.
+
+Checkout the [demo](https://styled-jsx-with-csp.vercel.app/) and notice the following,
+
+- `style-src` directive in `Content-Security-Policy` response header.
+- `meta` tag to pass on the `nonce` to styled-jsx for client-side rendering.
+- `style` tags with `nonce` attributes.
+
+## Deploy your own
+
+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/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/styled-jsx-with-csp&project-name=styled-jsx-with-csp&repository-name=styled-jsx-with-csp)
+
+## How to use
+
+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 styled-jsx-with-csp styled-jsx-with-csp-app
+# or
+yarn create next-app --example styled-jsx-with-csp styled-jsx-with-csp-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/styled-jsx-with-csp/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "styled-jsx-with-csp",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "nanoid": "3.1.21",
+    "next": "10.0.8",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  }
+}

examples/styled-jsx-with-csp/pages/_app.jsx

@@ -0,0 +1,6 @@
+const CustomApp = ({ Component, pageProps }) => <Component {...pageProps} />
+
+//  Disable static optimization to always server render, making nonce unique on every request
+CustomApp.getInitialProps = () => ({})
+
+export default CustomApp

examples/styled-jsx-with-csp/pages/_document.jsx

@@ -0,0 +1,49 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import flush from 'styled-jsx/server'
+
+import { nanoid } from 'nanoid'
+
+class CustomDocument extends Document {
+  static async getInitialProps(ctx) {
+    const nonce = nanoid()
+
+    // https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx#L89
+    const { html, head } = await ctx.renderPage()
+
+    // Adds `nonce` to style tags on Server Side Rendering
+    const styles = [...flush({ nonce })]
+
+    let contentSecurityPolicy = ''
+    if (process.env.NODE_ENV === 'production') {
+      contentSecurityPolicy = `default-src 'self'; style-src 'nonce-${nonce}';`
+    } else {
+      // react-refresh needs 'unsafe-eval'
+      // Next.js needs 'unsafe-inline' during development https://github.com/vercel/next.js/blob/canary/packages/next/client/dev/fouc.js
+      // Specifying 'nonce' makes a modern browsers ignore 'unsafe-inline'
+      contentSecurityPolicy = `default-src 'self'; style-src 'unsafe-inline'; script-src 'self' 'unsafe-eval';`
+    }
+
+    ctx.res.setHeader('Content-Security-Policy', contentSecurityPolicy)
+
+    return { styles, html, head, nonce }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Styled-JSX will add this `nonce` to style tags on Client Side Rendering */}
+          {/* https://github.com/vercel/styled-jsx/blob/master/src/lib/stylesheet.js#L31 */}
+          {/* https://github.com/vercel/styled-jsx/blob/master/src/lib/stylesheet.js#L240 */}
+          <meta property="csp-nonce" content={this.props.nonce} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default CustomDocument

examples/styled-jsx-with-csp/pages/index.jsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+
+const ClientSideComponent = () => (
+  <>
+    <style jsx>
+      {`
+        .title {
+          font-size: 24px;
+          color: green;
+        }
+      `}
+    </style>
+    <p className="title">This is rendered on client-side</p>
+  </>
+)
+
+const Home = () => {
+  const [isVisible, setVisibility] = useState(false)
+
+  const toggleVisibility = () => {
+    setVisibility((prevState) => !prevState)
+  }
+
+  return (
+    <>
+      <style jsx>
+        {`
+          .title {
+            font-size: 24px;
+          }
+        `}
+      </style>
+      <p className="title">Styled-JSX with Content Security Policy</p>
+      <button onClick={toggleVisibility}>Toggle</button>
+      {isVisible ? <ClientSideComponent /> : null}
+    </>
+  )
+}
+
+export default Home

examples/with-tailwindcss/package.json

@@ -10,7 +10,9 @@
   "dependencies": {
     "next": "latest",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
     "autoprefixer": "^10.0.4",
     "postcss": "^8.1.10",
     "tailwindcss": "^2.0.2"

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.9-canary.5"
+  "version": "10.0.9-canary.7"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.0.9-canary.5",
+  "version": "10.0.9-canary.7",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.0.9-canary.5",
+  "version": "10.0.9-canary.7",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.0.9-canary.5",
+  "version": "10.0.9-canary.7",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.0.9-canary.5",
+  "version": "10.0.9-canary.7",
   "main": "index.js",
   "license": "MIT",
   "repository": {

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

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