Merge branch 'canary' into wbinnssmith/font-multiple-fix

vercel · Sep 25, 2023 · c2ce4d8 · c2ce4d8
2 parents dd6d53a + 1d86a09
commit c2ce4d8
Show file tree

Hide file tree

Showing 186 changed files with 12,672 additions and 12,548 deletions.
diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -64,7 +64,7 @@ export default function PostList({ posts }) {
 
 You can use [`usePathname()`](/docs/app/api-reference/functions/use-pathname) to determine if a link is active. For example, to add a class to the active link, you can check if the current `pathname` matches the `href` of the link:
 
-```tsx filename="app/components/links.tsx"
+```tsx filename="app/components/links.tsx" switcher
 'use client'
 
 import { usePathname } from 'next/navigation'
@@ -84,7 +84,7 @@ export function Links() {
         <li>
           <Link
             className={`link ${pathname === '/about' ? 'active' : ''}`}
-            href="/"
+            href="/about"
           >
             About
           </Link>
@@ -95,7 +95,7 @@ export function Links() {
 }
 ```
 
-```jsx filename="app/components/links.jsx"
+```jsx filename="app/components/links.js" switcher
 'use client'
 
 import { usePathname } from 'next/navigation'
@@ -115,7 +115,7 @@ export function Links() {
         <li>
           <Link
             className={`link ${pathname === '/about' ? 'active' : ''}`}
-            href="/"
+            href="/about"
           >
             About
           </Link>

diff --git a/docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx b/docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx
@@ -386,6 +386,28 @@ export async function GET(request, { params }) {
 | `app/items/[slug]/route.js` | `/items/b`  | `{ slug: 'b' }` |
 | `app/items/[slug]/route.js` | `/items/c`  | `{ slug: 'c' }` |
 
+### URL Query Parameters
+
+The request object passed to the Route Handler is a `NextRequest` instance, which has [some additional convenience methods](/docs/app/api-reference/functions/next-request#nexturl), including for more easily handling query parameters.
+
+```ts filename="app/api/search/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query is "hello" for /api/search?query=hello
+}
+```
+
+```js filename="app/api/search/route.js" switcher
+export function GET(request) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query is "hello" for /api/search?query=hello
+}
+```
+
 ### Streaming
 
 Streaming is commonly used in combination with Large Language Models (LLMs), such as OpenAI, for AI-generated content. Learn more about the [AI SDK](https://sdk.vercel.ai/docs).

diff --git a/...02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx b/...02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
@@ -43,6 +43,7 @@ module.exports = {
 > - Forms calling Server Actions from Server Components can function without JavaScript.
 > - Forms calling Server Actions from Client Components will queue submissions if JavaScript isn't loaded yet, prioritizing client hydration.
 > - Server Actions inherit the [runtime](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes) from the page or layout they are used on.
+> - Server Actions work with fully static routes (including revalidating data with ISR).
 
 ## Revalidating Cached Data
 

diff --git a/docs/02-app/01-building-your-application/04-caching/index.mdx b/docs/02-app/01-building-your-application/04-caching/index.mdx
@@ -400,24 +400,24 @@ When configuring the different caching mechanisms, it's important to understand
 
 The following table provides an overview of how different Next.js APIs affect caching:
 
-| API                                                                     | Router Cache | Full Route Cache      | Data Cache            | React Cache |
-| ----------------------------------------------------------------------- | ------------ | --------------------- | --------------------- | ----------- |
-| [`<Link prefetch>`](#link)                                              | Cache        |                       |                       |             |
-| [`router.prefetch`](#routerprefetch)                                    | Cache        |                       |                       |             |
-| [`router.refresh`](#routerrefresh)                                      | Revalidate   |                       |                       |             |
-| [`fetch`](#fetch)                                                       |              |                       | Cache                 | Cache       |
-| [`fetch` `options.cache`](#fetch-optionscache)                          |              |                       | Cache or Opt out      |             |
-| [`fetch` `options.next.revalidate`](#fetch-optionsnextrevalidate)       |              | Revalidate            | Revalidate            |             |
-| [`fetch` `options.next.tags`](#fetch-optionsnexttags-and-revalidatetag) |              | Cache                 | Cache                 |             |
-| [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)             |              | Revalidate            | Revalidate            |             |
-| [`revalidatePath`](#revalidatepath)                                     |              | Revalidate            | Revalidate            |             |
-| [`const revalidate`](#segment-config-options)                           |              | Revalidate or Opt out | Revalidate or Opt out |             |
-| [`const dynamic`](#segment-config-options)                              |              | Cache or Opt out      | Cache or Opt out      |             |
-| [`cookies`](#cookies)                                                   | Revalidate   | Opt out               |                       |             |
-| [`headers`, `useSearchParams`, `searchParams`](#dynamic-functions)      |              | Opt out               |                       |             |
-| [`generateStaticParams`](#generatestaticparams)                         |              | Cache                 |                       |             |
-| [`React.cache`](#react-cache-function)                                  |              |                       |                       | Cache       |
-| [`unstable_cache`](#unstable_cache) (Coming Soon)                       |              |                       |                       |             |
+| API                                                                     | Router Cache               | Full Route Cache      | Data Cache            | React Cache |
+| ----------------------------------------------------------------------- | -------------------------- | --------------------- | --------------------- | ----------- |
+| [`<Link prefetch>`](#link)                                              | Cache                      |                       |                       |             |
+| [`router.prefetch`](#routerprefetch)                                    | Cache                      |                       |                       |             |
+| [`router.refresh`](#routerrefresh)                                      | Revalidate                 |                       |                       |             |
+| [`fetch`](#fetch)                                                       |                            |                       | Cache                 | Cache       |
+| [`fetch` `options.cache`](#fetch-optionscache)                          |                            |                       | Cache or Opt out      |             |
+| [`fetch` `options.next.revalidate`](#fetch-optionsnextrevalidate)       |                            | Revalidate            | Revalidate            |             |
+| [`fetch` `options.next.tags`](#fetch-optionsnexttags-and-revalidatetag) |                            | Cache                 | Cache                 |             |
+| [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)             | Revalidate (Server Action) | Revalidate            | Revalidate            |             |
+| [`revalidatePath`](#revalidatepath)                                     | Revalidate (Server Action) | Revalidate            | Revalidate            |             |
+| [`const revalidate`](#segment-config-options)                           |                            | Revalidate or Opt out | Revalidate or Opt out |             |
+| [`const dynamic`](#segment-config-options)                              |                            | Cache or Opt out      | Cache or Opt out      |             |
+| [`cookies`](#cookies)                                                   | Revalidate (Server Action) | Opt out               |                       |             |
+| [`headers`, `useSearchParams`, `searchParams`](#dynamic-functions)      |                            | Opt out               |                       |             |
+| [`generateStaticParams`](#generatestaticparams)                         |                            | Cache                 |                       |             |
+| [`React.cache`](#react-cache-function)                                  |                            |                       |                       | Cache       |
+| [`unstable_cache`](#unstable_cache) (Coming Soon)                       |                            |                       |                       |             |
 
 ### `<Link>`
 

diff --git a/docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx b/docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx
@@ -251,8 +251,8 @@ import createMDX from '@next/mdx'
 const nextConfig = {}
 
 const withMDX = createMDX({
+  extension: /\.mdx?$/,
   options: {
-    extension: /\.mdx?$/,
     remarkPlugins: [remarkGfm],
     rehypePlugins: [],
     // If you use `MDXProvider`, uncomment the following line.

diff --git a/docs/02-app/02-api-reference/01-components/image.mdx b/docs/02-app/02-api-reference/01-components/image.mdx
@@ -40,24 +40,24 @@ export default function Page() {
 Here's a summary of the props available for the Image Component:
 
 <div style={{ overflowX: 'auto', width: '100%' }}>
-  | Prop | Example | Type | Required | |
-  ----------------------------------------- |
-  ------------------------------------ | --------------- | -------- | |
-  [`src`](#src) | `src="/profile.png"` | String | Yes | | [`width`](#width) |
-  `width={500}` | Integer (px) | Yes | | [`height`](#height) | `height={500}` |
-  Integer (px) | Yes | | [`alt`](#alt) | `alt="Picture of the author"` | String
-  | Yes | | [`loader`](#loader) | `loader={imageLoader}` | Function | - | |
-  [`fill`](#fill) | `fill={true}` | Boolean | - | | [`sizes`](#sizes) |
-  `sizes="(max-width: 768px) 100vw"` | String | - | | [`quality`](#quality) |
-  `quality={80}` | Integer (1-100) | - | | [`priority`](#priority) | `priority=
-  {true}` | Boolean | - | | [`placeholder`](#placeholder) | `placeholder="blur"`
-  | String | - | | [`style`](#style) | `style={{ objectFit: 'contain' }}` | Object
-  | - | | [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete=
-  {(img) => done()}` | Function | - | | [`onLoad`](#onload) | `onLoad=
-  {(event) => done()}` | Function | - | | [`onError`](#onerror) | `onError(event
-  => fail()}` | Function | - | | [`loading`](#loading) | `loading="lazy"` | String
-  | - | | [`blurDataURL`](#blurdataurl) | `blurDataURL="data:image/jpeg..."` | String
-  | - |
+| Prop                                      | Example                              | Type            | Required |
+| ----------------------------------------- | ------------------------------------ | --------------- | -------- |
+| [`src`](#src)                             | `src="/profile.png"`                 | String          | Yes      |
+| [`width`](#width)                         | `width={500}`                        | Integer (px)    | Yes      |
+| [`height`](#height)                       | `height={500}`                       | Integer (px)    | Yes      |
+| [`alt`](#alt)                             | `alt="Picture of the author"`        | String          | Yes      |
+| [`loader`](#loader)                       | `loader={imageLoader}`               | Function        | -        |
+| [`fill`](#fill)                           | `fill={true}`                        | Boolean         | -        |
+| [`sizes`](#sizes)                         | `sizes="(max-width: 768px) 100vw"`   | String          | -        |
+| [`quality`](#quality)                     | `quality={80}`                       | Integer (1-100) | -        |
+| [`priority`](#priority)                   | `priority={true}`                    | Boolean         | -        |
+| [`placeholder`](#placeholder)             | `placeholder="blur"`                 | String          | -        |
+| [`style`](#style)                         | `style={{objectFit: "contain"}}`     | Object          | -        |
+| [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete={img => done())}` | Function        | -        |
+| [`onLoad`](#onload)                       | `onLoad={event => done())}`          | Function        | -        |
+| [`onError`](#onerror)                     | `onError(event => fail()}`           | Function        | -        |
+| [`loading`](#loading)                     | `loading="lazy"`                     | String          | -        |
+| [`blurDataURL`](#blurdataurl)             | `blurDataURL="data:image/jpeg..."`   | String          | -        |
 </div>
 
 ## Required Props

diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
@@ -162,7 +162,7 @@ export const size = {
 export const contentType = 'image/png'
 
 // Image generation
-export default function Image() {
+export default async function Image() {
   // Font
   const interSemiBold = fetch(
     new URL('./Inter-SemiBold.ttf', import.meta.url)

diff --git a/docs/02-app/02-api-reference/02-file-conventions/error.mdx b/docs/02-app/02-api-reference/02-file-conventions/error.mdx
@@ -147,6 +147,10 @@ export default function GlobalError({ error, reset }) {
 > - `global-error.js` replaces the root `layout.js` when active and so **must** define its own `<html>` and `<body>` tags.
 > - While designing error UI, you may find it helpful to use the [React Developer Tools](https://react.dev/learn/react-developer-tools) to manually toggle Error boundaries.
 
+## not-found.js
+
+The [`not-found`](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) file is used to render UI when the `notFound()` function is thrown within a route segment.
+
 ## Version History
 
 | Version   | Changes                    |

diff --git a/docs/03-pages/01-building-your-application/05-optimizing/10-testing.mdx b/docs/03-pages/01-building-your-application/05-optimizing/10-testing.mdx
@@ -43,7 +43,7 @@ Add Cypress to the `package.json` scripts field:
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "cypress": "cypress open"
+    "cypress:open": "cypress open"
   }
 }
 ```
@@ -446,7 +446,9 @@ If your project is using [Module Path Aliases](/docs/pages/building-your-applica
 ```json filename="tsconfig.json or jsconfig.json"
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
     "paths": {
       "@/components/*": ["components/*"]
     }

diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md
@@ -321,7 +321,7 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto
 
 ### Step 18. Try preview mode
 
-Now that you've deployed your app to Vercel, take note of the URL of your deployed site. This will be registered in Agility CMS so that when editors click the `Preview` button within Agility CMS, your app is loaded in **Preview Mode**. Learn more about [NextJS Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)).
+Now that you've deployed your app to Vercel, take note of the URL of your deployed site. This will be registered in Agility CMS so that when editors click the `Preview` button within Agility CMS, your app is loaded in **Preview Mode**. Learn more about [Next.js Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)).
 
 To enable the Preview Mode, you'll need to add your site to **Domain Configuration** in Agility CMS:
 

diff --git a/examples/cms-buttercms/app.json b/examples/cms-buttercms/app.json
@@ -1,5 +1,5 @@
 {
-  "name": "ButterCMS NextJS Starter Project ",
+  "name": "ButterCMS Next.js Starter Project ",
   "description": "Drop-in proof-of-concept NextJs app, fully integrated with your ButterCMS account.",
   "repository": "https://github.com/ButterCMS/nextjs-starter-buttercms",
   "logo": "https://cdn.buttercms.com/R3fbtvoRT2CqEQSmk8hb",

diff --git a/examples/cms-payload/README.md b/examples/cms-payload/README.md
@@ -1,6 +1,6 @@
 # Next + Payload Serverless Demo
 
-This is a demo showing how to utilize `@payloadcms/next-payload` to deploy Payload serverlessly, in the same repo alongside of a NextJS app.
+This is a demo showing how to utilize `@payloadcms/next-payload` to deploy Payload serverlessly, in the same repo alongside of a Next.js app.
 
 ## Deploy your own
 

diff --git a/examples/with-aws-amplify/README.md b/examples/with-aws-amplify/README.md
@@ -2,7 +2,7 @@
 
 [![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify)
 
-This example shows how to build a server rendered web application with NextJS and AWS Amplify. We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app. The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
+This example shows how to build a server rendered web application with Next.js and AWS Amplify. We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app. The Next.js app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
 
 Two routes are implemented :
 

diff --git a/examples/with-clerk/app/page.tsx b/examples/with-clerk/app/page.tsx
@@ -96,7 +96,7 @@ const Main = () => (
         rel="noreferrer"
         className={styles.link}
       >
-        <span className={styles.linkText}>Read NextJS documentation</span>
+        <span className={styles.linkText}>Read Next.js documentation</span>
       </Link>
     </div>
   </main>

diff --git a/examples/with-geist-ui/pages/index.tsx b/examples/with-geist-ui/pages/index.tsx
@@ -19,7 +19,7 @@ export default function Home() {
   return (
     <div>
       <Head>
-        <title>Geist UI with NextJS</title>
+        <title>Geist UI with Next.js</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Page dotBackdrop width="800px" padding={0}>

diff --git a/examples/with-grafbase/package.json b/examples/with-grafbase/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.8",
+    "@types/react-dom": "18.2.7",
     "graphql": "16.8.1",
     "graphql-request": "5.0.0",
     "next": "latest",

diff --git a/examples/with-knex/package.json b/examples/with-knex/package.json
@@ -13,7 +13,7 @@
     "seed:run": "knex seed:run"
   },
   "dependencies": {
-    "knex": "0.21.6",
+    "knex": "0.95.15",
     "next": "latest",
     "pg": "8.4.1",
     "react": "^18.2.0",

diff --git a/examples/with-magic/package.json b/examples/with-magic/package.json
@@ -8,7 +8,7 @@
   "dependencies": {
     "@hapi/iron": "6.0.0",
     "@magic-sdk/admin": "1.0.0",
-    "cookie": "0.4.0",
+    "cookie": "0.5.0",
     "magic-sdk": "1.0.1",
     "next": "latest",
     "react": "^18.2.0",

diff --git a/examples/with-mdbreact/pages/index.js b/examples/with-mdbreact/pages/index.js
@@ -15,7 +15,7 @@ export default function Home() {
   return (
     <>
       <Head>
-        <title>NextJS with Material Design Bootstrap for React</title>
+        <title>Next.js with Material Design Bootstrap for React</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <MDBContainer className="text-center mt-5">

diff --git a/examples/with-passport/package.json b/examples/with-passport/package.json
@@ -7,14 +7,14 @@
   },
   "dependencies": {
     "@hapi/iron": "6.0.0",
-    "cookie": "0.4.1",
+    "cookie": "0.5.0",
     "next": "latest",
     "next-connect": "0.8.1",
-    "passport": "^0.4.1",
+    "passport": "^0.6.0",
     "passport-local": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "swr": "^2.0.0",
-    "uuid": "8.3.1"
+    "uuid": "8.3.2"
   }
 }
diff --git a/examples/with-paste-typescript/pages/index.tsx b/examples/with-paste-typescript/pages/index.tsx
@@ -11,7 +11,7 @@ export default function Home() {
   return (
     <Box as="main" padding="space70">
       <Head>
-        <title>Paste NextJS App</title>
+        <title>Paste Next.js App</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -50,7 +50,7 @@ export default function Home() {
           <Heading as="h3" variant="heading30">
             <Anchor href="https://nextjs.org/docs">
               <Box as="span" display="flex" alignItems="center">
-                NextJS Documentation{' '}
+                Next.js Documentation{' '}
                 <ArrowForwardIcon decorative size="sizeIcon60" />
               </Box>
             </Anchor>

diff --git a/examples/with-react-foundation/package.json b/examples/with-react-foundation/package.json
@@ -6,7 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "foundation-sites": "6.7.4",
+    "foundation-sites": "6.8.1",
     "next": "latest",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/examples/with-realm-web/package.json b/examples/with-realm-web/package.json
@@ -9,7 +9,7 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "realm-web": "0.4.0",
+    "realm-web": "0.9.0",
     "swr": "^2.0.0"
   }
 }
diff --git a/examples/with-redux-observable/package.json b/examples/with-redux-observable/package.json
@@ -9,7 +9,7 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "7.2.0",
+    "react-redux": "7.2.9",
     "redux": "4.0.5",
     "redux-logger": "3.0.6",
     "redux-observable": "1.2.0",

diff --git a/examples/with-redux-persist/package.json b/examples/with-redux-persist/package.json
@@ -10,7 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "7.2.0",
-    "redux": "4.0.5",
+    "redux": "4.2.1",
     "redux-devtools-extension": "^2.13.2",
     "redux-persist": "6.0.0"
   }