Merge branch 'canary' into fix-param-encoding

errors/css-global.md

@@ -10,6 +10,8 @@ Global CSS cannot be used in files other than your [Custom `<App>`](https://next
 
 Relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).
 
+Or, [update your component to use local CSS (Component-Level CSS) via CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css). This is the preferred approach.
+
 #### Example
 
 ```jsx

examples/cms-sanity/README.md

@@ -23,7 +23,7 @@ Once you have access to [the environment variables you'll need](#step-4-set-up-e
 - [Agility CMS](/examples/cms-agilitycms)
 - [Cosmic](/examples/cms-cosmic)
 - [ButterCMS](/examples/cms-buttercms)
-- [Storyblok](/examples/cms-storyblok)f
+- [Storyblok](/examples/cms-storyblok)
 - [GraphCMS](/examples/cms-graphcms)
 - [Blog Starter](/examples/blog-starter)
 

examples/environment-variables/pages/index.js

@@ -1,10 +1,5 @@
 import styles from '../styles.module.css'
 
-// The value here will be defined in the terminal, because of server side rendering,
-// but not in the browser console
-console.log('[Server only] ENV_VARIABLE:', process.env.ENV_VARIABLE)
-console.log('[Server only] ENV_LOCAL_VARIABLE:', process.env.ENV_LOCAL_VARIABLE)
-
 const Code = (p) => <code className={styles.inlineCode} {...p} />
 
 const IndexPage = () => (
@@ -90,4 +85,18 @@ const IndexPage = () => (
   </div>
 )
 
+// `getStaticProps`, and similar Next.js methods like `getStaticPaths` and `getServerSideProps`
+// only run in Node.js. Check the terminal to see the environment variables
+export async function getStaticProps() {
+  // Using the variables below in the browser will return `undefined`. Next.js doesn't
+  // expose environment variables unless they start with `NEXT_PUBLIC_`
+  console.log('[Node.js only] ENV_VARIABLE:', process.env.ENV_VARIABLE)
+  console.log(
+    '[Server only] ENV_LOCAL_VARIABLE:',
+    process.env.ENV_LOCAL_VARIABLE
+  )
+
+  return { props: {} }
+}
+
 export default IndexPage

examples/with-firebase-authentication/pages/index.js

@@ -35,7 +35,7 @@ const Index = () => {
         <p>You're signed in. Email: {user.email}</p>
         <p
           style={{
-            display: 'inlinelock',
+            display: 'inline-block',
             color: 'blue',
             textDecoration: 'underline',
             cursor: 'pointer',

examples/with-next-auth/README.md

@@ -21,9 +21,9 @@ It is vital that you know the deployment URL and define it in the environment fi
 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 next-auth with-next-auth-app
+npx create-next-app --example with-next-auth with-next-auth-app
 # or
-yarn create next-app --example next-auth with-next-auth-app
+yarn create next-app --example with-next-auth with-next-auth-app
 ```
 
 ### Download manually

examples/with-realm-web/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_REALM_APP_ID=realm-example-bspbt

examples/with-realm-web/README.md

@@ -0,0 +1,56 @@
+# Realm-Web SDK Example
+
+This example uses [Realm-Web SDK](https://docs.mongodb.com/realm/web/) to query a realm graphql endpoint using [swr](https://swr.now.sh/).
+
+This example relies on [MongoDB Realm](https://www.mongodb.com/realm) for its GraphQL backend.
+
+## 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-realm-web)
+
+## 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-realm-web with-realm-web-app
+# or
+yarn create next-app --example with-realm-web with-realm-web-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-realm-web
+cd with-realm-web
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+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)).
+
+## Configuration
+
+To set up your app:
+
+1. Link a cluster that includes the [Atlas sample data sets](https://docs.atlas.mongodb.com/sample-data/)
+2. Configure permissions for the `sample_mflix.movies` collection. For this
+   demo, you can assign ready only permissions for all authenticated users.
+3. Generate a collection schema for the `sample_mflix.movies` collection.
+   Add a root-level "title" field to the schema with the value set to "movie".
+4. Enable anonymous authentication
+5. Once your app is set up, replace the value of NEXT_PUBLIC_REALM_APP_ID in `.env` file with your App ID

examples/with-realm-web/lib/RealmClient.js

@@ -0,0 +1,23 @@
+import { Credentials, App } from 'realm-web'
+
+const APP_ID = process.env.NEXT_PUBLIC_REALM_APP_ID
+export const REALM_GRAPHQL_ENDPOINT = `https://realm.mongodb.com/api/client/v2.0/app/${APP_ID}/graphql`
+
+const app = new App({
+  id: APP_ID,
+  baseUrl: 'https://realm.mongodb.com',
+})
+
+export const generateAuthHeader = async () => {
+  if (!app.currentUser) {
+    // If no user is logged in, log in an anonymous user
+    await app.logIn(Credentials.anonymous())
+  }
+  // Get a valid access token for the current user
+  const { accessToken } = app.currentUser
+
+  // Set the Authorization header, preserving any other headers
+  return {
+    Authorization: `Bearer ${accessToken}`,
+  }
+}

examples/with-realm-web/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-realm-web",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "realm-web": "0.4.0",
+    "swr": "0.2.3"
+  },
+  "license": "ISC"
+}

examples/with-realm-web/pages/index.js

@@ -0,0 +1,94 @@
+import useSWR from 'swr'
+import { generateAuthHeader, REALM_GRAPHQL_ENDPOINT } from '../lib/RealmClient'
+
+const FIND_MOVIES = `
+  query FindMovies{
+    movies(query: { year: 2014, rated: "PG" } ) {
+      title
+      year
+      runtime
+    }
+  }
+`
+
+const fetcher = async (query) =>
+  fetch(REALM_GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: await generateAuthHeader(),
+    body: JSON.stringify({ query }),
+  }).then((res) => res.json())
+
+const IndexPage = () => {
+  const { data } = useSWR(FIND_MOVIES, fetcher)
+
+  if (data && data.error) {
+    console.error(data.error)
+    return <p>An error occurred: ${data.error}</p>
+  }
+  const movies = data ? data.data.movies : null
+
+  return (
+    <>
+      <div className="App">
+        <h1>"PG" Rated Movies - 2014</h1>
+
+        {data ? (
+          !movies && <div className="status">No movies Found</div>
+        ) : (
+          <div className="status"> Fetching data...</div>
+        )}
+
+        {movies && (
+          <table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Title</th>
+                <th>Runtime</th>
+              </tr>
+            </thead>
+            <tbody>
+              {movies.map((movie, index) => {
+                return (
+                  <tr key={index}>
+                    <td>{index + 1}</td>
+                    <td>{movie.title}</td>
+                    <td>{movie.runtime}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <style jsx>{`
+        th,
+        td {
+          padding: 15px;
+          text-align: left;
+        }
+        tr:nth-child(even) {
+          background-color: #f2f2f2;
+        }
+        th {
+          background-color: #69bef0;
+          color: white;
+        }
+        table {
+          width: 100%;
+        }
+        h1 {
+          text-align: center;
+          font-family: sans-serif;
+        }
+        .status {
+          text-colour: red;
+          text-align: center;
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default IndexPage

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-plugin-next/package.json

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

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.4.5-canary.24",
+  "version": "9.4.5-canary.27",
   "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.24",
+  "version": "9.4.5-canary.27",
   "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.24",
+  "version": "9.4.5-canary.27",
   "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.24",
+  "version": "9.4.5-canary.27",
   "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.24",
+  "version": "9.4.5-canary.27",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",