Merge branch 'canary' into patch/7980

docs/api-reference/next.config.js/runtime-configuration.md

@@ -28,7 +28,7 @@ Place any server-only runtime config under `serverRuntimeConfig`.
 
 Anything accessible to both client and server-side code should be under `publicRuntimeConfig`.
 
-> A page that relies on `publicRuntimeConfig` **must** use `getInitialProps` to opt-out of [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
+> A page that relies on `publicRuntimeConfig` **must** use `getInitialProps` to opt-out of [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md). Runtime configuration won't be available to any page (or component in a page) without `getInitialProps`.
 
 To get access to the runtime configs in your app use `next/config`, like so:
 

docs/api-reference/next/link.md

@@ -49,6 +49,8 @@ export default Home
 - [`replace`](#replace-the-url-instead-of-push) - Replace the current `history` state instead of adding a new url into the stack. Defaults to `false`
 - [`scroll`](#disable-scrolling-to-the-top-of-the-page) - Scroll to the top of the page after a navigation. Defaults to `true`
 
+External URLs, and any links that don't require a route navigation using `/pages`, don't need to be handled with `Link`; use the anchor tag for such cases instead.
+
 ## Dynamic routes
 
 A `Link` to a dynamic route is a combination of the `href` and `as` props. A link to the page `pages/post/[pid].js` will look like this:

docs/api-routes/introduction.md

@@ -46,6 +46,8 @@ export default (req, res) => {
 }
 ```
 
+To fetch API endpoints, take a look into any of the examples at the start of this section.
+
 > API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with [micro-cors](/docs/api-routes/api-middlewares.md#micro-support).
 
 > API Routes do not increase your client-side bundle size. They are server-side only bundles.

docs/basic-features/built-in-css-support.md

@@ -157,10 +157,22 @@ export default HelloWorld
 
 Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples.
 
-## Sass, Less, and Stylus Support
+## Sass Support
 
-To support importing `.scss`, `.less` or `.styl` files you can use the following plugins:
+Next.js allows you to import Sass using both the `.scss` and `.sass` extensions.
+You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
+
+Before you can use Next.js' built-in Sass support, be sure to install [`sass`](https://github.com/sass/sass):
+
+```bash
+npm install sass
+```
+
+Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
+
+## Less and Stylus Support
+
+To support importing `.less` or `.styl` files you can use the following plugins:
 
-- [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
 - [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
 - [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)

examples/with-graphql-faunadb/README.md

@@ -16,7 +16,21 @@ By importing a `.gql` or `.graphql` schema into FaunaDB ([see our sample schema
 
 You can start with this template [using `create-next-app`](#using-create-next-app) or by [downloading the repository manually](#download-manually).
 
-To use a live FaunaDB database, create one and import this example's `schema.gql` file using the FaunaDB console. Create a client secret, then paste it into `next.config.js`.
+To use a live FaunaDB database, create a database at [dashboard.fauna.com](https://dashboard.fauna.com/) and generate a server token by going to the **Security** tab on the left and then click **New Key**. Give the new key a name and select the 'Server' Role. Copy the token since the setup script will ask for it. Do not use it in the frontend, it has superpowers which you don't want to give to your users.
+
+The database can then be set up with the delivered setup by running:
+
+```
+yarn setup
+```
+
+This script will ask for the server token. Once you provide it with a valid token, this is what the script automatically does for you:
+
+- **Import the GraphQL schema**, by importing a GraphQL schema in FaunaDB, FaunaDB automatically sets up collections and indexes to support your queries. This is now done for you with this script but can also be done from the [dashboard.fauna.com](https://dashboard.fauna.com/) UI by going to the GraphQL tab
+- **Create a role suitable for the Client**, FaunaDB has a security system that allows you to define which resources can be accessed for a specific token. That's how we limit our clients powers, feel free to look at the scripts/setup.js script to see how we make roles and tokens.
+- **Create a token for that role** which is printed, this is the token to be used in the frontend.
+
+At the end, the newly generated client token will be printed and should be used to replace the '< GRAPHQL_SECRET >' placeholder in the next.config.js config.
 
 ### Using `create-next-app`
 

examples/with-graphql-faunadb/next.config.js

@@ -8,7 +8,7 @@ module.exports = {
     | https://docs.fauna.com/fauna/current/security/
     |--------------------------------------------------
     */
-    faunaDbSecret: 'fnADcnWRUcACE_6uDSw05MspruDdWKk88ZSmsm2a',
+    faunaDbSecret: '< GRAPHQL_SECRET >',
     faunaDbGraphQlEndpoint: 'https://graphql.fauna.com/graphql',
   },
 }

examples/with-graphql-faunadb/package.json

@@ -5,11 +5,17 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "setup": "node ./scripts/setup.js"
   },
   "dependencies": {
     "next": "latest",
     "react": "^16.10.2",
     "react-dom": "^16.10.2"
+  },
+  "devDependencies": {
+    "faunadb": "2.11.1",
+    "request": "2.88.0",
+    "stream-to-promise": "2.2.0"
   }
 }

examples/with-graphql-faunadb/scripts/setup.js

@@ -0,0 +1,103 @@
+// This script sets up the database to be used for this example application.
+// Look at the code to see what is behind the magic
+const faunadb = require('faunadb')
+const q = faunadb.query
+const request = require('request')
+const fs = require('fs')
+const streamToPromise = require('stream-to-promise')
+
+const readline = require('readline').createInterface({
+  input: process.stdin,
+  output: process.stdout,
+})
+
+// In order to set up a database, we need a server key, so let's ask the user for a key.
+readline.question(`Please provide the FaunaDB server key\n`, serverKey => {
+  // A graphql schema can be imported in override or merge mode: 'https://docs.fauna.com/fauna/current/api/graphql/endpoints#import'
+  const options = {
+    model: 'merge',
+    uri: 'https://graphql.fauna.com/import',
+    headers: { Authorization: `Bearer ${serverKey}` },
+  }
+  const stream = fs.createReadStream('./schema.gql').pipe(request.post(options))
+
+  streamToPromise(stream)
+    .then(res => {
+      const readableResult = res.toString()
+      if (readableResult.startsWith('Invalid authorization header')) {
+        console.error('You need to provide a secret, closing. Try again')
+        return readline.close()
+      } else if (readableResult.startsWith('Invalid database secret')) {
+        console.error(
+          'The secret you have provided is not valid, closing. Try again'
+        )
+        return readline.close()
+      } else if (readableResult.includes('success')) {
+        console.log('1. Successfully imported schema')
+        return readline.close()
+      }
+    })
+    .catch(err => {
+      console.error(err)
+      console.error(`Could not import schema, closing`)
+    })
+    .then(res => {
+      // The GraphQL schema is important, this means that we now have a GuestbookEntry Colleciton and an entries index.
+      // Then we create a token that can only read and write to that index and collection
+      var client = new faunadb.Client({ secret: serverKey })
+      return client
+        .query(
+          q.CreateRole({
+            name: 'GuestbookRole',
+            privileges: [
+              {
+                resource: q.Collection('GuestbookEntry'),
+                actions: { read: true, write: true },
+              },
+              {
+                resource: q.Index('entries'),
+                actions: { read: true },
+              },
+            ],
+          })
+        )
+        .then(res => {
+          console.log(
+            '2. Successfully created role to read and write guestbook entries'
+          )
+        })
+        .catch(err => {
+          if (err.toString().includes('instance already exists')) {
+            console.log('2. Role already exists.')
+          } else {
+            throw err
+          }
+        })
+    })
+    .catch(err => {
+      console.error(err)
+      console.error(`Failed to create role, closing`)
+    })
+    .then(res => {
+      // The GraphQL schema is important, this means that we now have a GuestbookEntry Colleciton and an entries index.
+      // Then we create a token that can only read and write to that index and collection
+      var client = new faunadb.Client({ secret: serverKey })
+      return client
+        .query(
+          q.CreateKey({
+            role: q.Role('GuestbookRole'),
+          })
+        )
+        .then(res => {
+          console.log('3. Created key to use in client')
+          console.log(
+            'Replace the < GRAPHQL_SECRET > placehold in next.config.js with:'
+          )
+          console.log(res.secret)
+        })
+    })
+    .catch(err => {
+      console.error(err)
+      console.error(`Failed to create key, closing`)
+    })
+})

lerna.json

@@ -12,5 +12,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.2.1-canary.8"
+  "version": "9.2.1-canary.9"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.2.1-canary.8",
+  "version": "9.2.1-canary.9",
   "keywords": [
     "react",
     "next",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.2.1-canary.8",
+  "version": "9.2.1-canary.9",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.2.1-canary.8",
+  "version": "9.2.1-canary.9",
   "main": "index.js",
   "license": "MIT",
   "repository": {

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

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.2.1-canary.8",
+  "version": "9.2.1-canary.9",
   "nextjs": {
     "name": "Google Analytics",
     "required-env": [

packages/next-plugin-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-material-ui",
-  "version": "9.2.1-canary.8",
+  "version": "9.2.1-canary.9",
   "nextjs": {
     "name": "Material UI",
     "required-env": []

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.2.1-canary.8",
+  "version": "9.2.1-canary.9",
   "nextjs": {
     "name": "Sentry",
     "required-env": [

packages/next/build/webpack-config.ts

@@ -834,6 +834,7 @@ export default async function getBaseWebpackConfig(
     isDevelopment: dev,
     isServer,
     hasSupportCss: !!config.experimental.css,
+    hasSupportScss: !!config.experimental.scss,
     assetPrefix: config.assetPrefix || '',
   })