Merge branch 'canary' into test/add-is-ready-ts-test

docs/api-reference/next/image.md

@@ -16,6 +16,7 @@ description: Enable Image Optimization with the built-in Image component.
 
 | Version   | Changes                  |
 | --------- | ------------------------ |
+| `v10.0.5` | `loader` prop added.     |
 | `v10.0.1` | `layout` prop added.     |
 | `v10.0.0` | `next/image` introduced. |
 
@@ -111,6 +112,36 @@ Try it out:
 - [Demo the `fill` layout](https://image-component.nextjs.gallery/layout-fill)
 - [Demo background image](https://image-component.nextjs.gallery/background)
 
+### loader
+
+A custom function used to resolve URLs. Defaults to [`images` object in `next.config.js`](/docs/basic-features/image-optimization.md#loader).
+
+`loader` is a function returning a string, given the following parameters:
+
+- [`src`](#src)
+- [`width`](#width)
+- [`quality`](#quality)
+
+```js
+import Image from 'next/image'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+const MyImage = (props) => {
+  return (
+    <Image
+      loader={myLoader}
+      src="/me.png"
+      alt="Picture of the author"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
 ### sizes
 
 A string mapping media queries to device sizes. Defaults to `100vw`.

docs/basic-features/image-optimization.md

@@ -82,14 +82,16 @@ module.exports = {
 }
 ```
 
-The following Image Optimization cloud providers are supported:
+The following Image Optimization cloud providers are included:
 
 - [Vercel](https://vercel.com): Works automatically when you deploy on Vercel, no configuration necessary. [Learn more](https://vercel.com/docs/next.js/image-optimization)
 - [Imgix](https://www.imgix.com): `loader: 'imgix'`
 - [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
 - [Akamai](https://www.akamai.com): `loader: 'akamai'`
 - Default: Works automatically with `next dev`, `next start`, or a custom server
 
+If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.
+
 ## Caching
 
 The following describes the caching algorithm for the default [loader](#loader). For all other loaders, please refer to your cloud provider's documentation.

docs/basic-features/static-file-serving.md

@@ -18,6 +18,8 @@ function Avatar() {
 export default Avatar
 ```
 
+> Note: `next/image` requires Next.js 10 or later.
+
 This folder is also useful for `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files (including `.html`)!
 
 > **Note**: Don't name the `public` directory anything else. The name cannot be changed and is the only directory used to serve static assets.

examples/api-routes-rest/pages/user/[id].js

@@ -5,7 +5,10 @@ const fetcher = (url) => fetch(url).then((res) => res.json())
 
 export default function User() {
   const router = useRouter()
-  const { data, error } = useSwr(`/api/user/${router.query.id}`, fetcher)
+  const { data, error } = useSwr(
+    router.query.id ? `/api/user/${router.query.id}` : null,
+    fetcher
+  )
 
   if (error) return <div>Failed to load user</div>
   if (!data) return <div>Loading...</div>

examples/with-cookie-auth-fauna/pages/api/signup.js

@@ -1,7 +1,7 @@
 import { query as q } from 'faunadb'
 import { serverClient, serializeFaunaCookie } from '../../utils/fauna-auth'
 
-export default async function signuo(req, res) {
+export default async function signup(req, res) {
   const { email, password } = await req.body
 
   try {

examples/with-firebase/firebase/clientApp.js

@@ -15,13 +15,15 @@ const clientCredentials = {
   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
 }
 
-// Check that `window` is in scope for the analytics module!
-if (typeof window !== 'undefined' && !firebase.apps.length) {
+if (!firebase.apps.length) {
   firebase.initializeApp(clientCredentials)
-  // To enable analytics. https://firebase.google.com/docs/analytics/get-started
-  if ('measurementId' in clientCredentials) {
-    firebase.analytics()
-    firebase.performance()
+  // Check that `window` is in scope for the analytics module!
+  if (typeof window !== 'undefined') {
+    // Enable analytics. https://firebase.google.com/docs/analytics/get-started
+    if ('measurementId' in clientCredentials) {
+      firebase.analytics()
+      firebase.performance()
+    }
   }
 }
 

examples/with-graphql-faunadb/README.md

@@ -6,7 +6,7 @@ This simple Guestbook SPA example shows you how to use [FaunaDB's GraphQL endpoi
 
 Deploy the example using [Vercel](https://vercel.com):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&env=NEXT_PUBLIC_FAUNADB_SECRET,NEXT_PUBLIC_FAUNADB_GRAPHQL_ENDPOINT&envDescription=Client%20secret%20and%20GraphQL%20endpoint%20needed%20for%20communicating%20with%20the%20live%20Fauna%20database&project-name=my-nextjs-guestbook&repository-name=my-nextjs-guestbook&demo-title=Next.js%20Fauna%20Guestbook%20App&demo-description=A%20simple%20guestbook%20application%20built%20with%20Next.js%20and%20Fauna&demo-url=https%3A%2F%2Fnextjs-guestbook.vercel.app%2F)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-graphql-faunadb&env=NEXT_PUBLIC_FAUNADB_SECRET,NEXT_PUBLIC_FAUNADB_GRAPHQL_ENDPOINT&envDescription=Client%20secret%20and%20GraphQL%20endpoint%20needed%20for%20communicating%20with%20the%20live%20Fauna%20database&project-name=my-nextjs-guestbook&repository-name=my-nextjs-guestbook&demo-title=Next.js%20Fauna%20Guestbook%20App&demo-description=A%20simple%20guestbook%20application%20built%20with%20Next.js%20and%20Fauna&demo-url=https%3A%2F%2Fnextjs-guestbook.vercel.app%2F)
 
 ## Why FaunaDB
 
@@ -58,4 +58,4 @@ Your app should be up and running on [http://localhost:3000](http://localhost:30
 
 ### Deploy
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&env=NEXT_PUBLIC_FAUNADB_SECRET,NEXT_PUBLIC_FAUNADB_GRAPHQL_ENDPOINT&envDescription=Client%20secret%20and%20GraphQL%20endpoint%20needed%20for%20communicating%20with%20the%20live%20Fauna%20database&project-name=my-nextjs-guestbook&repository-name=my-nextjs-guestbook&demo-title=Next.js%20Fauna%20Guestbook%20App&demo-description=A%20simple%20guestbook%20application%20built%20with%20Next.js%20and%20Fauna&demo-url=https%3A%2F%2Fnextjs-guestbook.vercel.app%2F)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-graphql-faunadb&env=NEXT_PUBLIC_FAUNADB_SECRET,NEXT_PUBLIC_FAUNADB_GRAPHQL_ENDPOINT&envDescription=Client%20secret%20and%20GraphQL%20endpoint%20needed%20for%20communicating%20with%20the%20live%20Fauna%20database&project-name=my-nextjs-guestbook&repository-name=my-nextjs-guestbook&demo-title=Next.js%20Fauna%20Guestbook%20App&demo-description=A%20simple%20guestbook%20application%20built%20with%20Next.js%20and%20Fauna&demo-url=https%3A%2F%2Fnextjs-guestbook.vercel.app%2F)

examples/with-mqtt-js/.env.local.example

@@ -0,0 +1,4 @@
+NEXT_MQTT_URI="wss://test.mosquitto.org:8081/mqtt"
+NEXT_MQTT_CLIENTID="a_client_id"
+NEXT_MQTT_USERNAME="username"
+CONTENTFUL_PREVIEW_SECRET="a_secure_password"

examples/with-mqtt-js/README.md

@@ -0,0 +1,34 @@
+# MQTT Client example
+
+This example shows how to use [MQTT.js](https://github.com/mqttjs/MQTT.js) with Next.js.
+
+## 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-mqtt-js)
+
+## 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 with-mqtt-js with-mqtt-js-app
+# or
+yarn create-next-app --example with-mqtt-js with-mqtt-js-app
+```
+
+To set up a connection URI with a mqtt client, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Then set each variable on `.env.local`:
+
+- `NEXT_MQTT_URI`: The URI of the broker. For example `wss://test.mosquitto.org:8081/mqtt`
+- `NEXT_MQTT_CLIENTID`: An arbritrary string of max. 23 characters.
+- `NEXT_MQTT_USERNAME`: The username for the connection to the broker.
+- `NEXT_MQTT_PASSWORD`: The password for the connection to the broker.
+
+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-mqtt-js/lib/useMqtt.js

@@ -0,0 +1,55 @@
+import MQTT from 'mqtt'
+import { useEffect, useRef } from 'react'
+
+function useMqtt({
+  uri,
+  options = {},
+  topicHandlers = [{ topic: '', handler: ({ topic, payload, packet }) => {} }],
+  onConnectedHandler = (client) => {},
+}) {
+  const clientRef = useRef(null)
+
+  useEffect(() => {
+    if (clientRef.current) return
+    if (!topicHandlers || topicHandlers.length === 0) return () => {}
+
+    try {
+      clientRef.current = options
+        ? MQTT.connect(uri, options)
+        : MQTT.connect(uri)
+    } catch (error) {
+      console.error('error', error)
+    }
+
+    const client = clientRef.current
+    topicHandlers.forEach((th) => {
+      client.subscribe(th.topic)
+    })
+    client.on('message', (topic, rawPayload, packet) => {
+      const th = topicHandlers.find((t) => t.topic === topic)
+      let payload
+      try {
+        payload = JSON.parse(rawPayload)
+      } catch {
+        payload = rawPayload
+      }
+      if (th) th.handler({ topic, payload, packet })
+    })
+
+    client.on('connect', () => {
+      if (onConnectedHandler) onConnectedHandler(client)
+    })
+
+    return () => {
+      if (client) {
+        topicHandlers.forEach((th) => {
+          client.unsubscribe(th.topic)
+        })
+        client.end()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}
+
+export default useMqtt

examples/with-mqtt-js/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-mqtt-js",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "mqtt": "4.2.6",
+    "next": "latest",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "license": "MIT"
+}

examples/with-mqtt-js/pages/index.js

@@ -0,0 +1,62 @@
+import { useState, useRef } from 'react'
+import useMqtt from '../lib/useMqtt'
+
+export default function Home() {
+  const [incommingMessages, setIncommingMessages] = useState([])
+  const addMessage = (message) => {
+    setIncommingMessages((incommingMessages) => [...incommingMessages, message])
+  }
+  const clearMessages = () => {
+    setIncommingMessages(() => [])
+  }
+
+  const incommingMessageHandlers = useRef([
+    {
+      topic: 'topic1',
+      handler: (msg) => {
+        addMessage(msg)
+      },
+    },
+  ])
+
+  const mqttClientRef = useRef(null)
+  const setMqttClient = (client) => {
+    mqttClientRef.current = client
+  }
+  useMqtt({
+    uri: process.env.NEXT_PUBLIC_MQTT_URI,
+    options: {
+      username: process.env.NEXT_PUBLIC_MQTT_USERNAME,
+      password: process.env.NEXT_PUBLIC_MQTT_PASSWORD,
+      clientId: process.env.NEXT_PUBLIC_MQTT_CLIENTID,
+    },
+    topicHandlers: incommingMessageHandlers.current,
+    onConnectedHandler: (client) => setMqttClient(client),
+  })
+
+  const publishMessages = (client) => {
+    if (!client) {
+      console.log('(publishMessages) Cannot publish, mqttClient: ', client)
+      return
+    }
+
+    client.publish('topic1', '1st message from component')
+  }
+
+  return (
+    <div>
+      <h2>Subscribed Topics</h2>
+      {incommingMessageHandlers.current.map((i) => (
+        <p key={Math.random()}>{i.topic}</p>
+      ))}
+      <h2>Incomming Messages:</h2>
+      {incommingMessages.map((m) => (
+        <p key={Math.random()}>{m.payload.toString()}</p>
+      ))}
+      <button onClick={() => publishMessages(mqttClientRef.current)}>
+        Publish Test Messages
+      </button>
+      <button onClick={() => clearMessages()}>Clear Test Messages</button>
+    </div>
+  )
+}

examples/with-mysql/pages/api/get-entry.ts

@@ -7,7 +7,7 @@ const handler: NextApiHandler = async (req, res) => {
     if (!id) {
       return res.status(400).json({ message: '`id` required' })
     }
-    if (typeof parseInt(id) !== 'number') {
+    if (typeof parseInt(id.toString()) !== 'number') {
       return res.status(400).json({ message: '`id` must be a number' })
     }
     const results = await query(

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.5-canary.9"
+  "version": "10.0.5-canary.11"
 }

packages/create-next-app/package.json

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

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.0.5-canary.9",
+  "version": "10.0.5-canary.11",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.0.5-canary.9",
+  "version": "10.0.5-canary.11",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.0.5-canary.9",
+  "version": "10.0.5-canary.11",
   "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.5-canary.9",
+  "version": "10.0.5-canary.11",
   "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.5-canary.9",
+  "version": "10.0.5-canary.11",
   "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.5-canary.9",
+  "version": "10.0.5-canary.11",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"