Merge branch 'canary' into feat/no-anon-default-export

docs/api-routes/dynamic-api-routes.md

@@ -82,9 +82,6 @@ Now, a request to `/api/post/a/b/c` will respond with the text: `Post: a, b, c`.
 
 ### Optional catch all API routes
 
-> **Warning**: This feature is **experimental and may not work as expected**.
-> You must enable the `optionalCatchAll` experimental option to try it.
-
 Catch all routes can be made optional by including the parameter in double brackets (`[[...slug]]`).
 
 For example, `pages/api/post/[[...slug]].js` will match `/api/post`, `/api/post/a`, `/api/post/a/b`, and so on.

docs/routing/dynamic-routes.md

@@ -87,9 +87,6 @@ And in the case of `/post/a/b`, and any other matching path, new parameters will
 
 ### Optional catch all routes
 
-> **Warning**: This feature is **experimental and may not work as expected**.
-> You must enable the `optionalCatchAll` experimental option to try it.
-
 Catch all routes can be made optional by including the parameter in double brackets (`[[...slug]]`).
 
 For example, `pages/post/[[...slug]].js` will match `/post`, `/post/a`, `/post/a/b`, and so on.

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/with-mongodb-mongoose/pages/[id]/index.js

@@ -63,16 +63,7 @@ const PetPage = ({ pet }) => {
   )
 }
 
-export async function getStaticPaths() {
-  await dbConnect()
-
-  const result = await Pet.find({})
-  const paths = result.map((doc) => ({ params: { id: doc._id.toString() } }))
-
-  return { paths, fallback: false }
-}
-
-export async function getStaticProps({ params }) {
+export async function getServerSideProps({ params }) {
   await dbConnect()
 
   const pet = await Pet.findById(params.id).lean()

examples/with-mongodb-mongoose/pages/index.js

@@ -48,7 +48,7 @@ const Index = ({ pets }) => (
 )
 
 /* Retrieves pet(s) data from mongodb database */
-export async function getStaticProps() {
+export async function getServerSideProps() {
   await dbConnect()
 
   /* find all the data in our database */

examples/with-next-seo/pages/index.js

@@ -5,31 +5,29 @@ export default function Home() {
   return (
     <div>
       <NextSeo
-        config={{
-          title: 'Page Meta Title',
-          description: 'This will be the page meta description',
-          canonical: 'https://www.canonicalurl.ie/',
-          openGraph: {
-            url: 'https://www.canonicalurl.ie/',
-            title: 'Open Graph Title',
-            description: 'Open Graph Description',
-            images: [
-              {
-                url: 'https://www.example.ie/og-image-01.jpg',
-                width: 800,
-                height: 600,
-                alt: 'Og Image Alt',
-              },
-              {
-                url: 'https://www.example.ie/og-image-02.jpg',
-                width: 900,
-                height: 800,
-                alt: 'Og Image Alt Second',
-              },
-              { url: 'https://www.example.ie/og-image-03.jpg' },
-              { url: 'https://www.example.ie/og-image-04.jpg' },
-            ],
-          },
+        title="Page Meta Title"
+        description="This will be the page meta description"
+        canonical="https://www.canonicalurl.ie/"
+        openGraph={{
+          url: 'https://www.canonicalurl.ie/',
+          title: 'Open Graph Title',
+          description: 'Open Graph Description',
+          images: [
+            {
+              url: 'https://www.example.ie/og-image-01.jpg',
+              width: 800,
+              height: 600,
+              alt: 'Og Image Alt',
+            },
+            {
+              url: 'https://www.example.ie/og-image-02.jpg',
+              width: 900,
+              height: 800,
+              alt: 'Og Image Alt Second',
+            },
+            { url: 'https://www.example.ie/og-image-03.jpg' },
+            { url: 'https://www.example.ie/og-image-04.jpg' },
+          ],
         }}
       />
       <h1>SEO Added to Page</h1>

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

examples/with-three-js/components/Bird.js

@@ -0,0 +1,40 @@
+import { useRef, useState, useEffect } from 'react'
+import * as THREE from 'three'
+import { useFrame, useLoader } from 'react-three-fiber'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+
+const Bird = ({ speed, factor, url, ...props }) => {
+  const gltf = useLoader(GLTFLoader, url)
+  const group = useRef()
+  const [mixer] = useState(() => new THREE.AnimationMixer())
+  useEffect(
+    () => void mixer.clipAction(gltf.animations[0], group.current).play(),
+    [gltf.animations, mixer]
+  )
+  useFrame((state, delta) => {
+    group.current.rotation.y +=
+      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
+    mixer.update(delta * speed)
+  })
+  return (
+    <group ref={group}>
+      <scene name="Scene" {...props}>
+        <mesh
+          name="Object_0"
+          morphTargetDictionary={gltf.__$[1].morphTargetDictionary}
+          morphTargetInfluences={gltf.__$[1].morphTargetInfluences}
+          rotation={[1.5707964611537577, 0, 0]}
+        >
+          <bufferGeometry attach="geometry" {...gltf.__$[1].geometry} />
+          <meshStandardMaterial
+            attach="material"
+            {...gltf.__$[1].material}
+            name="Material_0_COLOR_0"
+          />
+        </mesh>
+      </scene>
+    </group>
+  )
+}
+
+export default Bird