Merge branch 'vercel:canary' into fix/app-dir-non-iso-url

docs/advanced-features/middleware.md

@@ -9,14 +9,14 @@ description: Learn how to use Middleware to run code before a request is complet
 
 | Version   | Changes                                                                                    |
 | --------- | ------------------------------------------------------------------------------------------ |
-| `v13.0.0` | Support overriding request headers.                                                        |
+| `v13.0.0` | Middleware can modify request headers, response headers, and send responses                |
 | `v12.2.0` | Middleware is stable                                                                       |
 | `v12.0.9` | Enforce absolute URLs in Edge Runtime ([PR](https://github.com/vercel/next.js/pull/33410)) |
 | `v12.0.0` | Middleware (Beta) added                                                                    |
 
 </details>
 
-Middleware allows you to run code before a request is completed, then based on the incoming request, you can modify the response by rewriting, redirecting, adding headers, or setting cookies.
+Middleware allows you to run code before a request is completed, then based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
 
 Middleware runs _before_ cached content, so you can personalize static files and pages. Common examples of Middleware would be authentication, A/B testing, localized pages, bot protection, and more. Regarding localized pages, you can start with [i18n routing](/docs/advanced-features/i18n-routing) and implement Middleware for more advanced use cases.
 
@@ -218,6 +218,45 @@ export function middleware(request: NextRequest) {
 
 > **Note:** Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.
 
+## Producing a Response
+
+You can respond to middleware directly by returning a `NextResponse` (responding from middleware is available since Next.js v13.0.0).
+
+To enable middleware responses, update `next.config.js`:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    allowMiddlewareResponseBody: true,
+  },
+}
+```
+
+Once enabled, you can provide a response from middleware using the `Response` or `NextResponse` API:
+
+```ts
+// middleware.ts
+import { NextRequest, NextResponse } from 'next/server'
+import { isAuthenticated } from '@lib/auth'
+
+// Limit the middleware to paths starting with `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request: NextRequest) {
+  // Call our authentication function to check the request
+  if (!isAuthenticated(request)) {
+    // Respond with JSON indicating an error message
+    return new NextResponse(
+      JSON.stringify({ success: false, message: 'authentication failed' }),
+      { status: 401, headers: { 'content-type': 'application/json' } }
+    )
+  }
+}
+```
+
 ## Related
 
 <div class="card">

docs/advanced-features/module-path-aliases.md

@@ -7,7 +7,7 @@ description: Configure module path aliases that allow you to remap certain impor
 <details>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports">Absolute Imports</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports">Absolute Imports and Aliases</a></li>
   </ul>
 </details>
 

docs/api-reference/next/link.md

@@ -218,3 +218,43 @@ The default behavior of `Link` is to scroll to the top of the page. When there i
   Disables scrolling to the top
 </Link>
 ```
+
+## With Next.js 13 Middleware
+
+It's common to use [Middleware](/docs/advanced-features/middleware) for authentication or other purposes that involve rewriting the user to a different page. In order for the `<Link />` component to properly prefetch links with rewrites via Middleware, you need to tell Next.js both the URL to display and the URL to prefetch. This is required to avoid un-necessary fetches to middleware to know the correct route to prefetch.
+
+For example, if you have want to serve a `/dashboard` route that has authenticated and visitor views, you may add something similar to the following in your Middleware to redirect the user to the correct page:
+
+```js
+// middleware.js
+export function middleware(req) {
+  const nextUrl = req.nextUrl
+  if (nextUrl.pathname === '/dashboard') {
+    if (req.cookies.authToken) {
+      return NextResponse.rewrite('/auth/dashboard')
+    } else {
+      return NextResponse.rewrite('/public/dashboard')
+    }
+  }
+}
+```
+
+In this case, you would want to use the following code in your `<Link />` component (inside `pages/`):
+
+```js
+// pages/index.js
+import Link from 'next/link'
+import useIsAuthed from './hooks/useIsAuthed'
+
+export default function Page() {
+  const isAuthed = useIsAuthed()
+  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
+  return (
+    <Link as="/dashboard" href={path}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+> **Note:** If you're using [Dynamic Routes](/docs/routing/dynamic-routes), you'll need to adapt your `as` and `href` props. For example, if you have a Dynamic Route like `/dashboard/[user]` that you want to present differently via middleware, you would write: `<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>`.

errors/manifest.json

@@ -757,6 +757,10 @@
         {
           "title": "invalid-segment-export",
           "path": "/errors/invalid-segment-export.md"
+        },
+        {
+          "title": "next-router-not-mounted",
+          "path": "/errors/next-router-not-mounted.md"
         }
       ]
     }

errors/next-router-not-mounted.md

@@ -0,0 +1,13 @@
+# NextRouter was not mounted
+
+#### Why This Error Occurred
+
+A component used `useRouter` outside a Next.js application, or was rendered outside a Next.js application. This can happen when doing unit testing on components that use the `useRouter` hook as they are not configured with Next.js' contexts.
+
+#### Possible Ways to Fix It
+
+If used in a test, mock out the router by mocking the `next/router`'s `useRouter()` hook.
+
+### Useful Links
+
+- [next-router-mock](https://www.npmjs.com/package/next-router-mock)

examples/with-absolute-imports/README.md

@@ -1,6 +1,24 @@
-# Example app with absolute imports
+# Absolute Imports and Aliases
 
-This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
+This example shows how to configure [Absolute imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases) in `tsconfig.json` (or `jsconfig.json` for JavaScript projects). These options will allow absolute imports from `.` (the root directory), and allow you to create custom import aliases.
+
+If you’re working on a large project, your relative import statements might suffer from `../../../` spaghetti:
+
+```tsx
+import Button from '../../../components/button'
+```
+
+In such cases, we might want to setup absolute imports using the `baseUrl` option, for clearer and shorter imports:
+
+```tsx
+import Button from 'components/button'
+```
+
+Furthermore, TypeScript also supports the `paths` option, which allows you to configure custom module aliases. You can then use your alias like so:
+
+```tsx
+import Button from '@/components/button'
+```
 
 ## Deploy your own
 

examples/with-absolute-imports/components/button.tsx

@@ -0,0 +1,3 @@
+export default function Button() {
+  return <button>👋 Hello</button>
+}

examples/with-absolute-imports/package.json

@@ -9,5 +9,11 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "typescript": "^4.8.4"
   }
 }

examples/with-absolute-imports/pages/index.tsx

@@ -0,0 +1,11 @@
+import Header from 'components/header'
+import Button from '@/components/button'
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <Button />
+    </>
+  )
+}

examples/with-absolute-imports/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    // Using "baseUrl" allows you to use absolute paths
+    "baseUrl": ".",
+    // Using "paths" allows you to configure module path aliases
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

lerna.json

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

packages/create-next-app/index.ts

@@ -157,14 +157,13 @@ async function run(): Promise<void> {
    * to use TS or JS.
    */
   if (!example) {
-    if (ciInfo.isCI) {
-      // default to JavaScript in CI as we can't prompt to
-      // prevent breaking setup flows
-      program.javascript = true
-      program.typescript = false
-      program.eslint = true
-    } else {
-      if (!program.typescript && !program.javascript) {
+    if (!program.typescript && !program.javascript) {
+      if (ciInfo.isCI) {
+        // default to JavaScript in CI as we can't prompt to
+        // prevent breaking setup flows
+        program.typescript = false
+        program.javascript = true
+      } else {
         const styledTypeScript = chalk.hex('#007acc')('TypeScript')
         const { typescript } = await prompts(
           {
@@ -186,18 +185,21 @@ async function run(): Promise<void> {
             },
           }
         )
-
         /**
          * Depending on the prompt response, set the appropriate program flags.
          */
         program.typescript = Boolean(typescript)
         program.javascript = !Boolean(typescript)
       }
+    }
 
-      if (
-        !process.argv.includes('--eslint') &&
-        !process.argv.includes('--no-eslint')
-      ) {
+    if (
+      !process.argv.includes('--eslint') &&
+      !process.argv.includes('--no-eslint')
+    ) {
+      if (ciInfo.isCI) {
+        program.eslint = true
+      } else {
         const styledEslint = chalk.hex('#007acc')('ESLint')
         const { eslint } = await prompts({
           type: 'toggle',

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "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.3-canary.0",
+    "@next/eslint-plugin-next": "13.0.3-canary.1",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.42.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "13.0.3-canary.0",
+  "version": "13.0.3-canary.1",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi --features plugin --js false native",