Merge branch 'canary' into styled-jsx-lib

.eslintrc.json

@@ -145,6 +145,30 @@
           }
         ]
       }
+    },
+    {
+      "files": [
+        "packages/eslint-plugin-next/**/*.js",
+        "test/unit/eslint-plugin-next/**/*.test.ts"
+      ],
+      "extends": ["plugin:eslint-plugin/recommended"],
+      "parserOptions": {
+        "sourceType": "script"
+      },
+      "rules": {
+        "eslint-plugin/prefer-replace-text": "error",
+        "eslint-plugin/report-message-format": [
+          "error",
+          ".+\\. See: https://nextjs.org/docs/messages/[a-z\\-]+$"
+        ],
+        "eslint-plugin/require-meta-docs-description": [
+          "error",
+          {
+            "pattern": ".+"
+          }
+        ],
+        "eslint-plugin/require-meta-docs-url": "error"
+      }
     }
   ],
   "rules": {

docs/advanced-features/preview-mode.md

@@ -194,10 +194,12 @@ Then, send a request to `/api/clear-preview-mode-cookies` to invoke the API Rout
 `setPreviewData` takes an optional second parameter which should be an options object. It accepts the following keys:
 
 - `maxAge`: Specifies the number (in seconds) for the preview session to last for.
+- `path`: Specifies the path the cookie should be applied under. Defaults to `/` enabling preview mode for all paths.
 
 ```js
 setPreviewData(data, {
   maxAge: 60 * 60, // The preview mode cookies expire in 1 hour
+  path: '/about', // The preview mode cookies apply to paths with /about
 })
 ```
 

docs/basic-features/data-fetching/get-static-props.md

@@ -30,6 +30,8 @@ You should use `getStaticProps` if:
 `getStaticProps` always runs on the server and never on the client. You can validate code written inside `getStaticProps` is removed from the client-side bundle [with this tool](https://next-code-elimination.vercel.app/).
 
 - `getStaticProps` always runs during `next build`
+- `getStaticProps` runs in the background when using [`fallback: true`](/docs/api-reference/data-fetching/get-static-paths#fallback-true)
+- `getStaticProps` is called before initial render when using [`fallback: blocking`](/docs/api-reference/data-fetching/get-static-paths#fallback-blocking)
 - `getStaticProps` runs in the background when using `revalidate`
 - `getStaticProps` runs on-demand in the background when using [`revalidate()`](/docs/basic-features/data-fetching/incremental-static-regeneration.md#on-demand-revalidation)
 

docs/basic-features/script.md

@@ -240,6 +240,7 @@ Or by using the `dangerouslySetInnerHTML` property:
 ```jsx
 <Script
   id="show-banner"
+  strategy="lazyOnload"
   dangerouslySetInnerHTML={{
     __html: `document.getElementById('banner').classList.remove('hidden')`,
   }}
@@ -280,16 +281,19 @@ export default function Home() {
 Some third-party scripts require users to run JavaScript code after the script has finished loading and every time the component is mounted (after a route navigation for example). You can execute code after the script's `load` event when it first loads and then after every subsequent component re-mount using the `onReady` property:
 
 ```jsx
+import { useRef } from 'react'
 import Script from 'next/script'
 
 export default function Home() {
+  const mapRef = useRef()
   return (
     <>
+      <div ref={mapRef}></div>
       <Script
         id="google-maps"
         src="https://maps.googleapis.com/maps/api/js"
         onReady={() => {
-          new google.maps.Map(ref.current, {
+          new google.maps.Map(mapRef.current, {
             center: { lat: -34.397, lng: 150.644 },
             zoom: 8,
           })

errors/failed-to-fetch-devpagesmanifest.md

@@ -0,0 +1,18 @@
+# Failed to fetch devPagesManifest
+
+#### Why This Error Occurred
+
+The network request to load `_devPagesManifest.json` did not succeed.
+
+The dev pages manifest file is used by `next/link` to retrieve the list of pages to be (pre-)loaded by Next.js.
+If it fails, Next.js cannot properly navigate and link between pages.
+
+#### Possible Ways to Fix It
+
+- Make sure your browser developer tools, extensions, and any other network tools aren't blocking that request.
+- If you're running your Next.js application through a proxy, nginx, or other network layer, make sure links like `/_next/*` are configured to be allowed.
+
+### Useful Links
+
+- [Original GitHub Issue Thread](https://github.com/vercel/next.js/issues/16874)
+- [GitHub Issue Thread With Reproduction](https://github.com/vercel/next.js/issues/38047)

errors/manifest.json

@@ -715,6 +715,14 @@
         {
           "title": "invalid-next-config",
           "path": "/errors/invalid-next-config.md"
+        },
+        {
+          "title": "failed-to-fetch-devpagesmanifest",
+          "path": "/errors/failed-to-fetch-devpagesmanifest.md"
+        },
+        {
+          "title": "middleware-parse-user-agent",
+          "path": "/errors/middleware-parse-user-agent.md"
         }
       ]
     }

errors/middleware-parse-user-agent.md

@@ -0,0 +1,34 @@
+# Removed parsed User Agent from Middleware API
+
+#### Why This Error Occurred
+
+Your application is interacting with `req.ua` which has been deprecated.
+
+```ts
+// middleware.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const viewport = request.ua.device.type === 'mobile' ? 'mobile' : 'desktop'
+
+  request.nextUrl.searchParams.set('viewport', viewport)
+  return NextResponse.rewrites(request.nextUrl)
+}
+```
+
+#### Possible Ways to Fix It
+
+The internal logic has been moved into a separate `userAgent` function that you can import from `next/server` and wrap your request instead.
+
+```ts
+// middleware.ts
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const { device } = userAgent(request)
+  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
+
+  request.nextUrl.searchParams.set('viewport', viewport)
+  return NextResponse.rewrites(request.nextUrl)
+}
+```

errors/middleware-request-page.md

@@ -2,7 +2,7 @@
 
 #### Why This Error Occurred
 
-Your application is interacting with `request.page`, and it's being deprecated.
+Your application is interacting with `request.page` which has been deprecated.
 
 ```typescript
 // middleware.ts

examples/cms-wordpress/README.md

@@ -1,6 +1,6 @@
-# A statically generated blog example using Next.js and WordPress
+# An Incremental Static Regeneration Blog Example Using Next.js and WordPress
 
-This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [WordPress](https://wordpress.org) as the data source.
+This example showcases Next.js's [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) feature using [WordPress](https://wordpress.org) as the data source.
 
 ## Demo
 

examples/cms-wordpress/components/cover-image.tsx

@@ -2,7 +2,17 @@ import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 
-export default function CoverImage({ title, coverImage, slug }) {
+interface Props {
+  title: string
+  coverImage: {
+    node: {
+      sourceUrl: string
+    }
+  }
+  slug?: string
+}
+
+export default function CoverImage({ title, coverImage, slug }: Props) {
   const image = (
     <Image
       width={2000}

examples/cms-wordpress/lib/api.ts

@@ -1,6 +1,6 @@
 const API_URL = process.env.WORDPRESS_API_URL
 
-async function fetchAPI(query = '', { variables } = {}) {
+async function fetchAPI(query = '', { variables }: Record<string, any> = {}) {
   const headers = { 'Content-Type': 'application/json' }
 
   if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {

examples/cms-wordpress/next.config.js

@@ -9,6 +9,7 @@ module.exports = {
   images: {
     domains: [
       process.env.WORDPRESS_API_URL.match(/(?!(w+)\.)\w*(?:\w+\.)+\w+/)[0], // Valid WP Image domain.
+      '0.gravatar.com',
       '1.gravatar.com',
       '2.gravatar.com',
       'secure.gravatar.com',

examples/custom-server-fastify/package.json

@@ -6,10 +6,10 @@
     "start": "cross-env NODE_ENV=production node ./server.js"
   },
   "dependencies": {
-    "cross-env": "^7.0.2",
-    "fastify": "^3.19.1",
+    "cross-env": "^7.0.3",
+    "fastify": "^4.2.0",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

examples/custom-server-fastify/server.js

@@ -1,3 +1,4 @@
+/**  @type {import('fastify').FastifyInstance} */
 const fastify = require('fastify')({
   logger: { level: 'error' },
   pluginTimeout: 0,
@@ -16,32 +17,32 @@ fastify.register((fastify, opts, next) => {
       if (dev) {
         fastify.get('/_next/*', (req, reply) => {
           return handle(req.raw, reply.raw).then(() => {
-            reply.sent = true
+            reply.hijack()
           })
         })
       }
 
       fastify.get('/a', (req, reply) => {
         return app.render(req.raw, reply.raw, '/a', req.query).then(() => {
-          reply.sent = true
+          reply.hijack()
         })
       })
 
       fastify.get('/b', (req, reply) => {
         return app.render(req.raw, reply.raw, '/b', req.query).then(() => {
-          reply.sent = true
+          reply.hijack()
         })
       })
 
       fastify.all('/*', (req, reply) => {
         return handle(req.raw, reply.raw).then(() => {
-          reply.sent = true
+          reply.hijack()
         })
       })
 
       fastify.setNotFoundHandler((request, reply) => {
         return app.render404(request.raw, reply.raw).then(() => {
-          reply.sent = true
+          reply.hijack()
         })
       })
 
@@ -50,7 +51,7 @@ fastify.register((fastify, opts, next) => {
     .catch((err) => next(err))
 })
 
-fastify.listen(port, (err) => {
+fastify.listen({ port }, (err) => {
   if (err) throw err
   console.log(`> Ready on http://localhost:${port}`)
 })

examples/progressive-web-app/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "next": "latest",
-    "next-pwa": "^5.4.1",
+    "next-pwa": "5.5.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

examples/with-apivideo-upload/README.md

@@ -18,10 +18,14 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 
 ```bash
 npx create-next-app --example with-apivideo-upload with-apivideo-upload-app
-# or
+```
+
+```bash
 yarn create next-app --example with-apivideo-upload with-apivideo-upload-app
-# or
-pnpm create next-app -- --example with-apivideo-upload with-apivideo-upload-app
+```
+
+```bash
+pnpm create next-app --example with-apivideo-upload with-apivideo-upload-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
@@ -36,8 +40,9 @@ You can choose to stay in sandbox and have watermark over your videos, or enter
 ### 2. Get you API key
 
 Once in the dashboard, find your API keys directly in the `/overview` or navigate to `/apikeys` with the "API Keys" button in the side navigation.
-Copy your API key and paste it in `.env.development` as value for `API_KEY`.
-You can now try the application locally by running `npm run dev` from the root directory.
+Copy your API key, and paste it in `.env.local.example` as value for `API_KEY`.
+Rename `.env.local.example` to `.env.local`.
+You can now try the application locally by running `npm run dev`, `yarn dev` or `pnpm dev` from the root directory.
 
 ### 3. Deployment
 

examples/with-emotion-swc/shared/styles.tsx

@@ -62,7 +62,9 @@ export const Pink = styled(Basic)({
   color: 'hotpink',
 })
 
-export const BasicExtended = styled(Basic)``
+export const BasicExtended = styled(Basic, {
+  shouldForwardProp: (propertyName: string) => !propertyName.startsWith('$'),
+})``
 
 export const ComponentSelectorsExtended = styled.div`
   ${BasicExtended} {

examples/with-static-export/components/post.js → examples/with-static-export/components/post.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
+import { PostData } from '../types/postdata'
 
-export default function Post({ title, body, id }) {
+export default function Post({ title, body, id }: PostData) {
   return (
     <article>
       <h2>{title}</h2>

examples/with-static-export/lib/postdata_api.ts

@@ -0,0 +1,17 @@
+import { PostData } from '../types/postdata'
+
+export async function GetPost(id: string): Promise<PostData> {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`
+  )
+  const postData: PostData = (await response.json()) as PostData
+  return postData
+}
+
+export async function GetPosts(): Promise<PostData[]> {
+  const response = await fetch(
+    'https://jsonplaceholder.typicode.com/posts?_page=1'
+  )
+  const postList: PostData[] = (await response.json()) as PostData[]
+  return postList
+}

examples/with-static-export/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/with-static-export/package.json

@@ -1,17 +1,26 @@
 {
   "private": true,
-  "dependencies": {
-    "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "serve": "11.2.0"
-  },
   "scripts": {
     "dev": "next",
     "build": "next build",
     "preexport": "npm run build",
     "export": "next export",
     "prestart": "npm run export",
-    "start": "serve out"
+    "start": "serve out",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "serve": "^14.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "eslint": "8.19.0",
+    "eslint-config-next": "12.2.0",
+    "typescript": "^4.7.4"
   }
 }