Merge branch 'canary' into better-error-layout-prop

docs/advanced-features/middleware.md

@@ -148,31 +148,39 @@ To produce a response from Middleware, you should `rewrite` to a route ([Page](/
 
 ## Using Cookies
 
-The `cookies` API extends [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and allows you to `get`, `set`, and `delete` cookies. It also includes methods like [entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries) and [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries).
+Cookies are regular headers. On a `Request`, they are stored in the `Cookie` header. On a `Response` they are in the `Set-Cookie` header. Next.js provides a convenient way to access and manipulate these cookies through the `cookies` extension on `NextRequest` and `NextResponse`.
+
+1. For incoming requests, `cookies` comes with the following methods: `get`, `getAll`, `set`, and `delete` cookies. You can check for the existence of a cookie with `has` or remove all cookies with `clear`.
+2. For outgoing responses, `cookies` have the following methods `get`, `getAll`, `set`, and `delete`.
 
 ```typescript
 // middleware.ts
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
 export function middleware(request: NextRequest) {
-  // Setting cookies on the response
+  // Assume a "Cookie:vercel=fast" header to be present on the incoming request
+  // Getting cookies from the request using the `RequestCookies` API
+  const cookie = request.cookies.get('nextjs')?.value
+  console.log(cookie) // => 'fast'
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'vercel', value: 'fast' }]
+
+  response.cookies.has('nextjs') // => true
+  response.cookies.delete('nextjs')
+  response.cookies.has('nextjs') // => false
+
+  // Setting cookies on the response using the `ResponseCookies` API
   const response = NextResponse.next()
   response.cookies.set('vercel', 'fast')
-  response.cookies.set('vercel', 'fast', { path: '/test' })
-
-  // Getting cookies from the request
-  const cookie = request.cookies.get('vercel')
-  console.log(cookie) // => 'fast'
-  const allCookies = request.cookies.entries()
-  console.log(allCookies) // => [{ key: 'vercel', value: 'fast' }]
-  const { value, options } = response.cookies.getWithOptions('vercel')
-  console.log(value) // => 'fast'
-  console.log(options) // => { Path: '/test' }
-
-  // Deleting cookies
-  response.cookies.delete('vercel')
-  response.cookies.clear()
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/test',
+  })
+  const cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/test' }
+  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header.
 
   return response
 }

docs/advanced-features/react-18/switchable-runtime.md

@@ -12,12 +12,13 @@ By default, Next.js uses the Node.js runtime. [Middleware](https://nextjs.org/do
 
 To configure the runtime for your whole application, you can set the experimental option `runtime` in your `next.config.js` file:
 
-```js:next.config.js
+```js
+// next.config.js
 module.exports = {
   experimental: {
     runtime: 'experimental-edge', // 'node.js' (default) | experimental-edge
   },
-};
+}
 ```
 
 You can detect which runtime you're using by looking at the `process.env.NEXT_RUNTIME` Environment Variable during runtime, and examining the `options.nextRuntime` variable during compilation.

docs/api-reference/next/font.md

@@ -194,26 +194,29 @@ If you would like to set your styles in an external style sheet and specify addi
 
 In addition to importing the font, also import the CSS file where the CSS variable is defined and set the variable option of the font loader object as follows:
 
-```tsx:app/page.tsx
-import { Inter } from '@next/font/google';
-import styles from '../styles/component.module.css';
+```tsx
+// app/page.tsx
+import { Inter } from '@next/font/google'
+import styles from '../styles/component.module.css'
 
 const inter = Inter({
   variable: '--inter-font',
-});
+})
 ```
 
 To use the font, set the `className` of the parent container of the text you would like to style to the font loader's `variable` value and the `className` of the text to the `styles` property from the external CSS file.
 
-```tsx:app/page.tsx
+```tsx
+// app/page.tsx
 <main className={inter.variable}>
   <p className={styles.text}>Hello World</p>
 </main>
 ```
 
 Define the `text` selector class in the `component.module.css` CSS file as follows:
 
-```css:styles/component.module.css
+```css
+/* styles/component.module.css */
 .text {
   font-family: var(--inter-font);
   font-weight: 200;
@@ -231,7 +234,8 @@ For example, create a `fonts.ts` file in a `styles` folder at the root of your a
 
 Then, specify your font definitions as follows:
 
-```ts:styles/fonts.ts
+```ts
+// styles/fonts.ts
 import { Inter, Lora, Source_Sans_Pro } from '@next/font/google';
 import localFont from '@next/font/local';
 
@@ -249,7 +253,8 @@ export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes };
 
 You can now use these definitions in your code as follows:
 
-```tsx:app/page.tsx
+```tsx
+// app/page.tsx
 import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts';
 
 export default function Page() {
@@ -268,7 +273,8 @@ export default function Page() {
 
 To make it easier to access the font definitions in your code, you can define a path alias in your `tsconfig.json` or `jsconfig.json` files as follows:
 
-```json:tsconfig.json
+```json
+// tsconfig.json
 {
   "compilerOptions": {
     "paths": {
@@ -280,7 +286,8 @@ To make it easier to access the font definitions in your code, you can define a
 
 You can now import any font definition as follows:
 
-```tsx:app/about/page.tsx
+```tsx
+// app/about/page.tsx
 import { greatVibes, sourceCodePro400 } from '@/fonts';
 ``` -->
 

docs/api-reference/next/server.md

@@ -10,7 +10,15 @@ description: Learn about the server-only helpers for Middleware and Edge API Rou
 
 The `NextRequest` object is an extension of the native [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) interface, with the following added methods and properties:
 
-- `cookies` - A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) with cookies from the `Request`. See [Using cookies in Middleware](/docs/advanced-features/middleware#using-cookies)
+- `cookies` - A [RequestCookies](https://edge-runtime.vercel.app/packages/cookies#for-request) instance with cookies from the `Request`. It reads/mutates the `Cookie` header of the request. See also [Using cookies in Middleware](/docs/advanced-features/middleware#using-cookies).
+
+  - `get` - A method that takes a cookie `name` and returns an object with `name` and `value`. If a cookie with `name` isn't found, it returns `undefined`. If multiple cookies match, it will only return the first match.
+  - `getAll` - A method that is similar to `get`, but returns a list of all the cookies with a matching `name`. If `name` is unspecified, it returns all the available cookies.
+  - `set` - A method that takes an object with properties of `CookieListItem` as defined in the [W3C CookieStore API](https://wicg.github.io/cookie-store/#dictdef-cookielistitem) spec.
+  - `delete` - A method that takes either a cookie `name` or a list of names. and removes the cookies matching the name(s). Returns `true` for deleted and `false` for undeleted cookies.
+  - `has` - A method that takes a cookie `name` and returns a `boolean` based on if the cookie exists (`true`) or not (`false`).
+  - `clear` - A method that takes no argument and will effectively remove the `Cookie` header.
+
 - `nextUrl`: Includes an extended, parsed, URL object that gives you access to Next.js specific properties such as `pathname`, `basePath`, `trailingSlash` and `i18n`. Includes the following properties:
   - `basePath` (`string`)
   - `buildId` (`string || undefined`)
@@ -74,7 +82,12 @@ The `NextResponse` class extends the native [`Response`](https://developer.mozil
 
 Public methods are available on an instance of the `NextResponse` class. Depending on your use case, you can create an instance and assign to a variable, then access the following public methods:
 
-- `cookies` - A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) with the cookies in the `Response`
+- `cookies` - A [ResponseCookies](https://edge-runtime.vercel.app/packages/cookies#for-response) instance with the cookies from the `Response`. It a
+  A [ResponseCooies](https://edge-runtime.vercel.app/packages/cookies#for-response) instance with cookies from the `Response`. It reads/mutates the `Set-Cookie` header of the response. See also [Using cookies in Middleware](/docs/advanced-features/middleware#using-cookies).
+  - `get` - A method that takes a cookie `name` and returns an object with `name` and `value`. If a cookie with `name` isn't found, it returns `undefined`. If multiple cookies match, it will only return the first match.
+  - `getAll` - A method that is similar to `get`, but returns a list of all the cookies with a matching `name`. If `name` is unspecified, it returns all the available cookies.
+  - `set` - A method that takes an object with properties of `CookieListItem` as defined in the [W3C CookieStore API](https://wicg.github.io/cookie-store/#dictdef-cookielistitem) spec.
+  - `delete` - A method that takes either a cookie `name` or a list of names. and removes the cookies matching the name(s). Returns `true` for deleted and `false` for undeleted cookies.
 
 ### Static Methods
 

docs/basic-features/font-optimization.md

@@ -26,40 +26,46 @@ Automatically self-host any Google Font. Fonts are included in the deployment an
 
 Import the font you would like to use from `@next/font/google` as a function. We recommend using [**variable fonts**](https://fonts.google.com/variablefonts) for the best performance and flexibility.
 
-```jsx:app/layout.tsx
-import { Inter } from '@next/font/google';
+```jsx
+// app/layout.tsx
+import { Inter } from '@next/font/google'
 
 // If loading a variable font, you don't need to specify the font weight
-const inter = Inter();
+const inter = Inter()
 
-export default function RootLayout({ children }: {
-  children: React.ReactNode;
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode,
 }) {
   return (
     <html lang="en" className={inter.className}>
       <body>{children}</body>
     </html>
-  );
+  )
 }
 ```
 
 If you can't use a variable font, you will **need to specify a weight**:
 
-```jsx:app/layout.tsx
-import { Roboto } from '@next/font/google';
+```jsx
+// app/layout.tsx
+import { Roboto } from '@next/font/google'
 
 const roboto = Roboto({
   weight: '400',
-});
+})
 
-export default function RootLayout({ children }: {
-  children: React.ReactNode;
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode,
 }) {
   return (
     <html lang="en" className={roboto.className}>
       <body>{children}</body>
     </html>
-  );
+  )
 }
 ```
 
@@ -71,20 +77,22 @@ This can be done in 2 ways:
 
 - On a font per font basis by adding it to the function call
 
-  ```tsx:app/layout.tsx
-  const inter = Inter({ subsets: ["latin"] });
+  ```tsx
+  // app/layout.tsx
+  const inter = Inter({ subsets: ['latin'] })
   ```
 
 - Globally for all your fonts in your `next.config.js`
 
-  ```js:next.config.js
+  ```js
+  // next.config.js
   module.exports = {
     experimental: {
       fontLoaders: [
         { loader: '@next/font/google', options: { subsets: ['latin'] } },
       ],
     },
-  };
+  }
   ```
 
   - If both are configured, the subset in the function call is used.
@@ -95,20 +103,23 @@ View the [Font API Reference](/docs/api-reference/next/font.md#nextfontgoogle) f
 
 Import `@next/font/local` and specify the `src` of your local font file. We recommend using [**variable fonts**](https://fonts.google.com/variablefonts) for the best performance and flexibility.
 
-```jsx:app/layout.tsx
-import localFont from '@next/font/local';
+```jsx
+/// app/layout.tsx
+import localFont from '@next/font/local'
 
 // Font files can be colocated inside of `app`
-const myFont = localFont({ src: './my-font.woff2' });
+const myFont = localFont({ src: './my-font.woff2' })
 
-export default function RootLayout({ children }: {
-  children: React.ReactNode;
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode,
 }) {
   return (
     <html lang="en" className={localFont.className}>
       <body>{children}</body>
     </html>
-  );
+  )
 }
 ```
 

errors/google-fonts-missing-subsets.md

@@ -0,0 +1,34 @@
+# Missing specified subset for a `@next/font/google` font
+
+#### Why This Error Occurred
+
+Preload is enabled for a font that is missing a specified subset.
+
+#### Possible Ways to Fix It
+
+Specify which subsets to preload for that font.
+
+- On a font per font basis by adding it to the function call
+
+```js
+const inter = Inter({ subsets: ['latin'] })
+```
+
+- Globally for all your fonts
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    fontLoaders: [
+      { loader: '@next/font/google', options: { subsets: ['latin'] } },
+    ],
+  },
+}
+```
+
+If both are configured, the subset in the function call is used.
+
+### Useful Links
+
+[Specifying a subset](https://beta.nextjs.org/docs/optimizing/fonts#specifying-a-subset)

errors/manifest.json

@@ -749,6 +749,10 @@
         {
           "title": "babel-font-loader-conflict",
           "path": "/errors/babel-font-loader-conflict.md"
+        },
+        {
+          "title": "google-fonts-missing-subsets",
+          "path": "/errors/google-fonts-missing-subsets.md"
         }
       ]
     }

errors/middleware-upgrade-guide.md

@@ -241,16 +241,13 @@ export function middleware() {
   response.cookies.set('nextjs', 'awesome', { path: '/test' })
 
   // get all the details of a cookie
-  const { value, options } = response.cookies.getWithOptions('vercel')
+  const { value, ...options } = response.cookies.getWithOptions('vercel')
   console.log(value) // => 'fast'
-  console.log(options) // => { Path: '/test' }
+  console.log(options) // => { name: 'vercel', Path: '/test' }
 
   // deleting a cookie will mark it as expired
   response.cookies.delete('vercel')
 
-  // clear all cookies means mark all of them as expired
-  response.cookies.clear()
-
   return response
 }
 ```

examples/with-turbopack/package.json

@@ -2,6 +2,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
+    "dev:tailwind": "concurrently 'next dev --turbo' 'npm run tailwind --watch'",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.0.0",
+  "version": "13.0.1-canary.0",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "13.0.0",
+    "@next/eslint-plugin-next": "13.0.1-canary.0",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",