Merge branch 'canary' into fix-type-image-response

docs/02-app/01-building-your-application/07-configuring/01-typescript.mdx

@@ -177,19 +177,21 @@ For [`getStaticProps`](/docs/pages/api-reference/functions/get-static-props), [`
 ```tsx filename="pages/blog/[slug].tsx"
 import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
 
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps = (async (context) => {
   // ...
-}
+}) satisfies GetStaticProps
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths = (async () => {
   // ...
-}
+}) satisfies GetStaticPaths
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps = (async (context) => {
   // ...
-}
+}) satisfies GetServerSideProps
 ```
 
+> **Good to know:** `satisfies` was added to TypeScript in [4.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html). We recommend upgrading to the latest version of TypeScript.
+
 ## API Routes
 
 The following is an example of how to use the built-in types for API routes:

docs/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx

@@ -16,33 +16,33 @@ There are several reasons why you might want to switch from Vite to Next.js:
    happens due to a couple of reasons:
    1. The browser needs to wait for the React code and your entire application bundle to download
       and run before your code is able to send requests to load some data.
-   1. Your application code grows with every new feature and extra dependency you add.
-1. **No automatic code splitting**: The previous issue of slow loading times can be somewhat managed with code splitting.
+   2. Your application code grows with every new feature and extra dependency you add.
+2. **No automatic code splitting**: The previous issue of slow loading times can be somewhat managed with code splitting.
    However, if you try to do code splitting manually, you'll often make performance worse. It's easy
    to inadvertently introduce network waterfalls when code-splitting manually. Next.js provides
    automatic code splitting built into its router.
-1. **Network waterfalls**: A common cause of poor performance occurs when applications make
+3. **Network waterfalls**: A common cause of poor performance occurs when applications make
    sequential client-server requests to fetch data. One common pattern for data fetching in an SPA
    is to initially render a placeholder, and then fetch data after the component has mounted.
    Unfortunately, this means that a child component that fetches data can't start fetching until
    the parent component has finished loading its own data. On Next.js,
    [this issue is resolved](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#no-client-server-waterfalls)
    by fetching data in Server Components.
-1. **Fast and intentional loading states**: Thanks to built-in support for
+4. **Fast and intentional loading states**: Thanks to built-in support for
    [Streaming with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense),
    with Next.js, you can be more intentional about which parts of your UI you want to load first and
    in what order without introducing network waterfalls. This enables you to build pages that are
    faster to load and also eliminate [layout shifts](https://web.dev/cls/).
-1. **Choose the data fetching strategy**: Depending on your needs, Next.js allows you to choose your
+5. **Choose the data fetching strategy**: Depending on your needs, Next.js allows you to choose your
    data fetching strategy on a page and component basis. You can decide to fetch at build time, at
    request time on the server, or on the client. For example, you can fetch data from your CMS and
    render your blog posts at build time, which can then be efficiently cached on a CDN.
-1. **Middleware**: [Next.js Middleware](/docs/app/building-your-application/routing/middleware)
+6. **Middleware**: [Next.js Middleware](/docs/app/building-your-application/routing/middleware)
    allows you to run code on the server before a request is completed. This is especially useful to
    avoid having a flash of unauthenticated content when the user visits an authenticated-only page
    by redirecting the user to a login page. The middleware is also useful for experimentation and
    internationalization.
-1. **Built-in Optimizations**: Images, fonts, and third-party scripts often have significant impact
+7. **Built-in Optimizations**: Images, fonts, and third-party scripts often have significant impact
    on an application's performance. Next.js comes with built-in components that automatically
    optimize those for you.
 

docs/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx

@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getStaticProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }

docs/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx

@@ -19,7 +19,7 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths = (async () => {
   return {
     paths: [
       {
@@ -30,15 +30,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
     ],
     fallback: true, // false or "blocking"
   }
-}
+}) satisfies GetStaticPaths
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -48,7 +48,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/repo/[name].js" switcher
-export const getStaticPaths = async () => {
+export async function getStaticPaths() {
   return {
     paths: [
       {
@@ -61,7 +61,7 @@ export const getStaticPaths = async () => {
   }
 }
 
-export const getStaticProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }

docs/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx

@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getServerSideProps: GetServerSideProps<{
-  repo: Repo
-}> = async () => {
+export const getServerSideProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetServerSideProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getServerSideProps = async () => {
+export async function getServerSideProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
@@ -99,10 +99,6 @@ This approach works well for user dashboard pages, for example. Because a dashbo
 The following example shows how to fetch data at request time and pre-render the result.
 
 ```jsx
-function Page({ data }) {
-  // Render data...
-}
-
 // This gets called on every request
 export async function getServerSideProps() {
   // Fetch data from external API
@@ -113,7 +109,9 @@ export async function getServerSideProps() {
   return { props: { data } }
 }
 
-export default Page
+export default function Page({ data }) {
+  // Render data...
+}
 ```
 
 ## Caching with Server-Side Rendering (SSR)

docs/03-pages/02-api-reference/02-functions/get-server-side-props.mdx

@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getServerSideProps: GetServerSideProps<{
-  repo: Repo
-}> = async () => {
+export const getServerSideProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetServerSideProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getServerSideProps = async () => {
+export async function getServerSideProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }

docs/03-pages/02-api-reference/02-functions/get-static-paths.mdx

@@ -17,7 +17,7 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths = (async () => {
   return {
     paths: [
       {
@@ -28,15 +28,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
     ],
     fallback: true, // false or "blocking"
   }
-}
+}) satisfies GetStaticPaths
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -46,7 +46,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/repo/[name].js" switcher
-export const getStaticPaths = async () => {
+export async function getStaticPaths() {
   return {
     paths: [
       {
@@ -59,7 +59,7 @@ export const getStaticPaths = async () => {
   }
 }
 
-export const getStaticProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }

docs/03-pages/02-api-reference/02-functions/get-static-props.mdx

@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getStaticProps = async () => {
+export async function getStaticPaths() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }

examples/cms-builder-io/package.json

@@ -6,7 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@builder.io/react": "^1.1.47",
+    "@builder.io/react": "^2.0.0",
     "@builder.io/widgets": "^1.2.21",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",

examples/cms-keystonejs-embedded/package.json

@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@keystone-next/fields": "^9.0.0",
-    "@keystone-next/keystone": "^18.0.0",
+    "@keystone-next/fields": "^15.0.0",
+    "@keystone-next/keystone": "^25.0.0",
     "next": "10.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/cms-makeswift/package.json

@@ -6,7 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@makeswift/runtime": "0.2.2",
+    "@makeswift/runtime": "0.10.13",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/with-recoil/package.json

@@ -9,6 +9,6 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "recoil": "0.7.6"
+    "recoil": "0.7.7"
   }
 }

packages/next/src/build/webpack-config.ts

@@ -371,6 +371,7 @@ export function getDefineEnv({
           'global.GENTLY': JSON.stringify(false),
         }
       : undefined),
+    'process.env.TURBOPACK': JSON.stringify(false),
   }
 }
 

packages/next/webpack.config.js

@@ -131,6 +131,7 @@ module.exports = ({ dev, turbo }) => {
           dev ? 'development' : 'production'
         ),
         'process.env.NEXT_RUNTIME': JSON.stringify('nodejs'),
+        ...(!dev ? { 'process.env.TURBOPACK': JSON.stringify(turbo) } : {}),
       }),
       !!process.env.ANALYZE &&
         new BundleAnalyzerPlugin({