Merge branch 'canary' into chore/simplify-with-supabase-example

.github/workflows/build_reusable.yml

@@ -61,7 +61,7 @@ on:
 env:
   NAPI_CLI_VERSION: 2.14.7
   TURBO_VERSION: 1.10.9
-  NODE_LTS_VERSION: 20
+  NODE_LTS_VERSION: 20.9.0
   TEST_CONCURRENCY: 8
   # disable backtrace for test snapshots
   RUST_BACKTRACE: 0
@@ -165,8 +165,6 @@ jobs:
       - run: git checkout .
         if: ${{ inputs.skipInstallBuild != 'yes' }}
 
-      - run: pnpm store path
-
       - run: pnpm install
         if: ${{ inputs.skipInstallBuild != 'yes' }}
 

docs/02-app/01-building-your-application/01-routing/07-error-handling.mdx

@@ -153,7 +153,7 @@ For example, a nested route with two segments that both include `layout.js` and
 The nested component hierarchy has implications for the behavior of `error.js` files across a nested route:
 
 - Errors bubble up to the nearest parent error boundary. This means an `error.js` file will handle errors for all its nested child segments. More or less granular error UI can be achieved by placing `error.js` files at different levels in the nested folders of a route.
-- An `error.js` boundary will **not** handle errors thrown in a `layout.js` component in the **same** segment because the error boundary is nested **inside** that layouts component.
+- An `error.js` boundary will **not** handle errors thrown in a `layout.js` component in the **same** segment because the error boundary is nested **inside** that layout's component.
 
 ### Handling Errors in Layouts
 

docs/02-app/01-building-your-application/06-optimizing/10-third-party-libraries.mdx

@@ -30,7 +30,7 @@ All supported third-party libraries from Google can be imported from `@next/thir
 ### Google Tag Manager
 
 The `GoogleTagManager` component can be used to instantiate a [Google Tag
-Manager](https://developers.google.com/maps/documentation/embed/embedding-map) container to your
+Manager](https://developers.google.com/tag-platform/tag-manager) container to your
 page. By default, it fetches the original inline script after hydration occurs on the page.
 
 <AppOnly>
@@ -88,7 +88,7 @@ export default function MyApp({ Component, pageProps }) {
 
 </PagesOnly>
 
-To load Google Tag Manager for a single route, include the comopnent in your page file:
+To load Google Tag Manager for a single route, include the component in your page file:
 
 <AppOnly>
 
@@ -238,9 +238,9 @@ docs](https://developers.google.com/maps/documentation/embed/embedding-map).
 | `width`           | Optional | Width of the embed. Defaults to `auto`.                                                             |
 | `style`           | Optional | Pass styles to the iframe.                                                                          |
 | `allowfullscreen` | Optional | Property to allow certain map parts to go full screen.                                              |
-| `loading`         | Optional | Defaults to lazy. Consider changing if you know your embed will be above-the-fold.                  |
+| `loading`         | Optional | Defaults to lazy. Consider changing if you know your embed will be above the fold.                  |
 | `q`               | Optional | Defines map marker location. _This may be required depending on the map mode_.                      |
-| `center`          | Optional | Defines center of the map view.                                                                     |
+| `center`          | Optional | Defines the center of the map view.                                                                 |
 | `zoom`            | Optional | Sets initial zoom level of the map.                                                                 |
 | `maptype`         | Optional | Defines type of map tiles to load.                                                                  |
 | `language`        | Optional | Defines the language to use for UI elements and for the display of labels on map tiles.             |

docs/02-app/01-building-your-application/09-upgrading/01-codemods.mdx

@@ -28,7 +28,7 @@ Replacing `<transform>` and `<path>` with appropriate values.
 
 #### Migrate `ImageResponse` imports
 
-#### `next-og-import`
+##### `next-og-import`
 
 ```bash filename="Terminal"
 npx @next/codemod@latest next-og-import .
@@ -50,7 +50,7 @@ import { ImageResponse } from 'next/og'
 
 #### Use `viewport` export
 
-#### `metadata-to-viewport-export`
+##### `metadata-to-viewport-export`
 
 ```bash filename="Terminal"
 npx @next/codemod@latest metadata-to-viewport-export .

docs/03-pages/01-building-your-application/08-upgrading/03-version-14.mdx

@@ -5,7 +5,7 @@ description: Upgrade your Next.js Application from Version 13 to 14.
 
 ## Upgrading from 13 to 14
 
-To update to Next.js version 13, run the following command using your preferred package manager:
+To update to Next.js version 14, run the following command using your preferred package manager:
 
 ```bash filename="Terminal"
 npm i next@latest react@latest react-dom@latest eslint-config-next@latest

examples/inngest/.env.development

@@ -0,0 +1,2 @@
+INNGEST_EVENT_KEY=your-event-key
+INNGEST_SIGNING_KEY=your-signing-key

examples/inngest/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/inngest/README.md

@@ -0,0 +1,54 @@
+# Next.js and Inngest Example
+
+This is an example of how to use [Inngest](https://inngest.com) to easily add durable work flows to your Next.js application. It keeps things simple:
+
+- Bare bones examples with a single button UI that triggers an event
+- Runs the Inngest dev server locally for immediate feedback
+
+## Deploy your own
+
+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/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/inngest&project-name=inngest&repository-name=inngest)
+
+To full deploy you'll need an [Inngest Cloud account](https://inngest.com) and the [Vercel Inngest integration](https://vercel.com/integrations/inngest) configured.
+
+## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example:
+
+```bash
+npx create-next-app --example inngest inngest-app
+```
+
+```bash
+yarn create next-app --example inngest inngest-app
+```
+
+```bash
+pnpm create next-app --example inngest inngest-app
+```
+
+```bash
+bunx create-next-app --example inngest inngest-app
+```
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Notes
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+The Inngest dev server will be running at [http://localhost:8288](http://localhost:8288). It can take a few seconds to start up.

examples/inngest/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/inngest/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "concurrently \"npm:dev:*\"",
+    "dev:next": "next dev",
+    "dev:inngest": "npx inngest-cli@latest dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "inngest": "latest",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.7.0",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.7",
+    "concurrently": "^8.2.1",
+    "encoding": "^0.1.13",
+    "typescript": "5.2.2"
+  }
+}

examples/inngest/src/app/api/inngest/route.ts

@@ -0,0 +1,5 @@
+import { serve } from 'inngest/next'
+import { inngest } from '@/inngest/inngest.client'
+import { helloWorld } from '@/inngest/functions/hello-world'
+
+export const { GET, POST, PUT } = serve(inngest, [helloWorld])

examples/inngest/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Next.js Inngest Example',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

examples/inngest/src/app/page.tsx

@@ -0,0 +1,24 @@
+import { inngest } from '@/inngest/inngest.client'
+import { redirect } from 'next/navigation'
+
+export default function Home() {
+  async function triggerInngestEvent() {
+    'use server'
+    await inngest.send({
+      name: 'test/hello.world',
+      data: {
+        message: 'Hello from Next.js!',
+      },
+    })
+    redirect('http://localhost:8288/stream')
+  }
+  return (
+    <main>
+      <div>
+        <form action={triggerInngestEvent}>
+          <button type="submit">Trigger Your Inngest Function</button>
+        </form>
+      </div>
+    </main>
+  )
+}

examples/inngest/src/inngest/functions/hello-world.ts

@@ -0,0 +1,10 @@
+import { inngest } from '../inngest.client'
+
+export const helloWorld = inngest.createFunction(
+  { id: 'hello-world', name: 'Hello World' },
+  { event: 'test/hello.world' },
+  async ({ event, step }) => {
+    await step.sleep('sleep for a second', '1s')
+    return { event, body: event.data.message }
+  }
+)

examples/inngest/src/inngest/inngest.client.ts

@@ -0,0 +1,4 @@
+import { Inngest } from 'inngest'
+
+// Create a client to send and receive events
+export const inngest = new Inngest({ id: 'Basic Inngest Application' })

examples/inngest/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.0.1-canary.0"
+  "version": "14.0.2-canary.0"
 }

package.json

@@ -100,8 +100,8 @@
     "@types/jest": "29.5.5",
     "@types/node": "20.2.5",
     "@types/node-fetch": "2.6.1",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@types/relay-runtime": "14.1.13",
     "@types/selenium-webdriver": "4.0.15",
     "@types/sharp": "0.29.3",
@@ -193,16 +193,16 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:[email protected]",
-    "react-builtin": "npm:[email protected]8c8ee9ee6-20231026",
+    "react-builtin": "npm:[email protected]0c6348758-20231030",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:[email protected]",
-    "react-dom-builtin": "npm:[email protected]8c8ee9ee6-20231026",
-    "react-dom-experimental-builtin": "npm:[email protected]8c8ee9ee6-20231026",
-    "react-experimental-builtin": "npm:[email protected]8c8ee9ee6-20231026",
-    "react-server-dom-turbopack": "18.3.0-canary-8c8ee9ee6-20231026",
-    "react-server-dom-turbopack-experimental": "npm:[email protected]8c8ee9ee6-20231026",
-    "react-server-dom-webpack": "18.3.0-canary-8c8ee9ee6-20231026",
-    "react-server-dom-webpack-experimental": "npm:[email protected]8c8ee9ee6-20231026",
+    "react-dom-builtin": "npm:[email protected]0c6348758-20231030",
+    "react-dom-experimental-builtin": "npm:[email protected]0c6348758-20231030",
+    "react-experimental-builtin": "npm:[email protected]0c6348758-20231030",
+    "react-server-dom-turbopack": "18.3.0-canary-0c6348758-20231030",
+    "react-server-dom-turbopack-experimental": "npm:[email protected]0c6348758-20231030",
+    "react-server-dom-webpack": "18.3.0-canary-0c6348758-20231030",
+    "react-server-dom-webpack-experimental": "npm:[email protected]0c6348758-20231030",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -212,8 +212,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.6",
-    "scheduler-builtin": "npm:[email protected]8c8ee9ee6-20231026",
-    "scheduler-experimental-builtin": "npm:[email protected]8c8ee9ee6-20231026",
+    "scheduler-builtin": "npm:[email protected]0c6348758-20231030",
+    "scheduler-experimental-builtin": "npm:[email protected]0c6348758-20231030",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",
@@ -245,8 +245,8 @@
     "@babel/parser": "7.22.5",
     "@babel/types": "7.22.5",
     "@babel/traverse": "7.22.5",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13"
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14"
   },
   "engines": {
     "node": ">=18.17.0",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "14.0.1-canary.0",
+  "version": "14.0.2-canary.0",
   "keywords": [
     "react",
     "next",

packages/create-next-app/templates/index.ts

@@ -209,9 +209,9 @@ export const installTemplate = async ({
   if (tailwind) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      autoprefixer: '^10',
+      autoprefixer: '^10.0.1',
       postcss: '^8',
-      tailwindcss: '^3',
+      tailwindcss: '^3.3.0',
     }
   }