Merge remote-tracking branch 'upstream/canary' into i18n/custom-routes

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

@@ -32,6 +32,7 @@ To get access to the runtime configs in your app use `next/config`, like so:
 
 ```jsx
 import getConfig from 'next/config'
+import Image from 'next/image'
 
 // Only holds serverRuntimeConfig and publicRuntimeConfig
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
@@ -43,7 +44,11 @@ console.log(publicRuntimeConfig.staticFolder)
 function MyImage() {
   return (
     <div>
-      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} alt="logo" />
+      <Image
+        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
+        alt="logo"
+        layout="fill"
+      />
     </div>
   )
 }

docs/api-reference/next/image.md

@@ -139,7 +139,11 @@ When true, the source image will be served as-is instead of changing quality, si
 
 ## Other Props
 
-All other properties on the `Image` component will be passed to the underlying `img` element, except for `style`. Use `className` instead.
+Other properties on the `Image` component will be passed to the underlying `img` element with the exception of the following:
+
+- `style`. Use `className` instead.
+- `srcSet`. Use [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes) instead.
+- `decoding`. It is always `"async"`.
 
 ## Related
 

docs/api-reference/next/link.md

@@ -202,12 +202,21 @@ The default behavior of the `Link` component is to `push` a new URL into the `hi
 `Link` supports any component that supports the `onClick` event, in the case you don't provide an `<a>` tag, consider the following example:
 
 ```jsx
-<Link href="/about">
-  <img src="/static/image.png" alt="image" />
-</Link>
+import Link from 'next/link'
+import Image from 'next/image'
+
+function Avatar() {
+  return (
+    <Link href="/about">
+      <Image src="/me.png" alt="me" width="64" height="64" />
+    </Link>
+  )
+}
+
+export default Avatar
 ```
 
-The child of `Link` is `<img>` instead of `<a>`. `Link` will send the `onClick` property to `<img>` but won't pass the `href` property.
+The child of `Link` is [`Image`](/docs/api-reference/next/image.md) instead of `<a>`. `Link` will send the `onClick` property to `Image` but won't pass the `href` property.
 
 ## Disable scrolling to the top of the page
 

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

@@ -6,14 +6,16 @@ description: Next.js allows you to serve static files, like images, in the publi
 
 Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`).
 
-For example, if you add an image to `public/my-image.png`, the following code will access the image:
+For example, if you add an image to `public/me.png`, the following code will access the image:
 
 ```jsx
-function MyImage() {
-  return <img src="/my-image.png" alt="my image" />
+import Image from 'next/image'
+
+function Avatar() {
+  return <Image src="/me.png" alt="me" width="64" height="64" />
 }
 
-export default MyImage
+export default Avatar
 ```
 
 This folder is also useful for `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files (including `.html`)!

docs/manifest.json

@@ -25,14 +25,14 @@
               "title": "Image Optimization",
               "path": "/docs/basic-features/image-optimization.md"
             },
-            {
-              "title": "Fast Refresh",
-              "path": "/docs/basic-features/fast-refresh.md"
-            },
             {
               "title": "Static File Serving",
               "path": "/docs/basic-features/static-file-serving.md"
             },
+            {
+              "title": "Fast Refresh",
+              "path": "/docs/basic-features/fast-refresh.md"
+            },
             {
               "title": "TypeScript",
               "path": "/docs/basic-features/typescript.md"

examples/cms-cosmic/components/cover-image.js

@@ -7,7 +7,7 @@ export default function CoverImage({ title, url, slug }) {
     <Imgix
       src={url}
       alt={`Cover Image for ${title}`}
-      className={cn('lazyload shadow-small', {
+      className={cn('lazyload shadow-small w-full', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
       sizes="100vw"

examples/cms-cosmic/lib/api.js

@@ -40,6 +40,7 @@ export async function getAllPostsForHome(preview) {
   const params = {
     type: 'posts',
     props: 'title,slug,metadata,created_at',
+    sort: '-created_at',
     ...(preview && { status: 'all' }),
   }
   const data = await bucket.getObjects(params)

examples/with-deta-base/.env.local.example

@@ -0,0 +1 @@
+DETA_PROJECT_KEY=

examples/with-deta-base/README.md

@@ -0,0 +1,73 @@
+# Deta Base Example
+
+An example using [Deta Base](https://docs.deta.sh/docs/base/about) in a Next.js project.
+
+## Deploy your own
+
+Once you have access to [the environment variables you'll need](#step-2-setting-up-environment-variables), 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/with-deta-base&env=DETA_PROJECT_KEY&envDescription=The%20Deta%20Project%20Key%2C%20found%20in%20the%20Deta%20dashboard&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-deta-base%23configuration)
+
+## 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-deta-base with-deta-base-app
+# or
+yarn create next-app --example with-deta-base with-deta-base-app
+```
+
+## Configuration
+
+### Step 1. Create a Deta Account
+
+Create an account on [Deta](https://www.deta.sh/?ref=next.js). Save the default _Project Key_ which will be auto-generated on account creation.
+
+### Step 2. Setting Up Environment Variables
+
+Copy the `.env.local.example` file from 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`:
+
+- `DETA_PROJECT_KEY` should be the default _Project Key_ that you saved from step 1.
+
+The resulting `env.local` file shoule look like this:
+
+```bash
+DETA_PROEJECT_KEY=...
+```
+
+### Step 3. Run Next.js in development mode
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn install
+yarn dev
+```
+
+Your todo app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+### Step 4. Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+#### Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-deta-base&env=DETA_PROJECT_KEY&envDescription=The%20Deta%20Project%20Key%2C%20found%20in%20the%20Deta%20dashboard&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-deta-base%23configuration)

examples/with-deta-base/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-deta-base",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "deta": "^0.0.8",
+    "next": "latest",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "license": "MIT"
+}

examples/with-deta-base/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-deta-base/pages/api/todos/[tid].js

@@ -0,0 +1,27 @@
+import { Deta } from 'deta'
+
+const deta = Deta(process.env.DETA_PROJECT_KEY)
+
+const base = deta.Base('todos')
+
+const handler = async (req, res) => {
+  let {
+    body,
+    method,
+    query: { tid },
+  } = req
+  let respBody = {}
+
+  if (method === 'PUT') {
+    body = JSON.parse(body)
+    respBody = await base.put(body)
+    res.statusCode = 200
+  } else if (method === 'DELETE') {
+    respBody = await base.delete(tid)
+    res.statusCode = 200
+  }
+
+  res.json(respBody)
+}
+
+export default handler

examples/with-deta-base/pages/api/todos/index.js

@@ -0,0 +1,25 @@
+import { Deta } from 'deta'
+
+const deta = Deta(process.env.DETA_PROJECT_KEY)
+
+const base = deta.Base('todos')
+
+const handler = async (req, res) => {
+  let { body, method } = req
+  let respBody = {}
+
+  if (method === 'GET') {
+    const { value: items } = await base.fetch([]).next()
+    respBody = items
+    res.statusCode = 200
+  } else if (method === 'POST') {
+    body = JSON.parse(body)
+    body.isCompleted = false
+    respBody = await base.put(body)
+    res.statusCode = 201
+  }
+
+  res.json(respBody)
+}
+
+export default handler