Merge branch 'canary' into cms-builder-io-example

Author: teleaziz

.github/workflows/build_test_deploy.yml

@@ -432,6 +432,7 @@ jobs:
       BROWSERSTACK: true
       BROWSER_NAME: 'safari'
       NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_MODE: 'start'
       SKIP_LOCAL_SELENIUM_SERVER: true
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
@@ -464,7 +465,7 @@ jobs:
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || npm i -g [email protected]'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-      - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js -c 1 test/integration/production/test/index.test.js'
+      - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js -c 1 test/integration/production/test/index.test.js test/e2e/basepath.test.ts'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafariOld:

docs/advanced-features/output-file-tracing.md

@@ -34,7 +34,7 @@ module.exports = {
 
 This will create a folder at `.next/standalone` which can then be deployed on it's own without installing `node_modules`.
 
-Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not handle serving the `static` directory as this should be handled by a CDN instead.
+Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not copy the `.next/static` directory by default as this should ideally be handled by a CDN instead, although it can be copied to the `standalone` folder manually and the `server.js` file will serve it automatically.
 
 ## Caveats
 

docs/api-reference/edge-runtime.md

@@ -82,10 +82,6 @@ The following JavaScript language features are disabled, and **will not work:**
 - [`eval`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval): Evaluates JavaScript code represented as a string
 - [`new Function(evalString)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function): Creates a new function with the code provided as an argument
 
-The following Web APIs are currently not supported, but will be in the future:
-
-- [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController): Abort one or more Web requests when desired
-
 ## Related
 
 <div class="card">

docs/api-reference/next/server.md

@@ -70,13 +70,68 @@ import type { NextFetchEvent } from 'next/server'
 
 ## NextResponse
 
-The `NextResponse` object is an extension of the native [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) interface, with the following added methods and properties:
+The `NextResponse` class extends the native [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) interface, with the following:
+
+### Public methods
+
+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` - An object with the cookies in the `Response`
-- `cookie` - Set a cookie in the `Response`
+- `cookie()` - Set a cookie in the `Response`
+- `clearCookie()` - Accepts a `cookie` and clears it
+
+```ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // create an instance of the class to access the public methods. This uses `next()`,
+  // you could use `redirect()` or `rewrite()` as well
+  let response = NextResponse.next()
+  // get the cookies from the request
+  let cookieFromRequest = request.cookies['my-cookie']
+  // set the `cookie`
+  response.cookie('hello', 'world')
+  // set the `cookie` with options
+  const cookieWithOptions = response.cookie('hello', 'world', {
+    path: '/',
+    maxAge: 1000 * 60 * 60 * 24 * 7,
+    httpOnly: true,
+    sameSite: 'strict',
+    domain: 'example.com',
+  })
+  // clear the `cookie`
+  response.clearCookie('hello')
+
+  return response
+}
+```
+
+### Static methods
+
+The following static methods are available on the `NextResponse` class directly:
+
 - `redirect()` - Returns a `NextResponse` with a redirect set
 - `rewrite()` - Returns a `NextResponse` with a rewrite set
 - `next()` - Returns a `NextResponse` that will continue the middleware chain
+- `json()` - A convenience method to create a response that encodes the provided JSON data
+
+```ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest) {
+  // if the request is coming from New York, redirect to the home page
+  if (req.geo.city === 'New York') {
+    return NextResponse.redirect('/home')
+    // if the request is coming from London, rewrite to a special page
+  } else if (req.geo.city === 'London') {
+    return NextResponse.rewrite('/not-home')
+  }
+
+  return NextResponse.json({ message: 'Hello World!' })
+}
+```
 
 All methods above return a `NextResponse` object that only takes effect if it's returned in the middleware function.
 
@@ -86,6 +141,23 @@ All methods above return a `NextResponse` object that only takes effect if it's
 import { NextResponse } from 'next/server'
 ```
 
+### Setting the cookie before a redirect
+
+In order to set the `cookie` _before_ a redirect, you can create an instance of `NextResponse`, then access the `cookie` method on the instance, before returning the response.
+
+Note that there is a [Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=696204) which means the entire redirect chain **must** be from the same origin, if they are from different origins, then the `cookie` might be missing until a refresh.
+
+```ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest) {
+  const res = NextResponse.redirect('/') // creates an actual instance
+  res.cookie('hello', 'world') // can be called on an instance
+  return res
+}
+```
+
 ### Why does redirect use 307 and 308?
 
 When using `redirect()` you may notice that the status codes used are `307` for a temporary redirect, and `308` for a permanent redirect. While traditionally a `302` was used for a temporary redirect, and a `301` for a permanent redirect, many browsers changed the request method of the redirect, from a `POST` to `GET` request when using a `302`, regardless of the origins request method.

docs/testing.md

@@ -262,10 +262,10 @@ npx create-next-app@latest --example with-jest with-jest-app
 
 Since the release of [Next.js 12](https://nextjs.org/blog/next-12), Next.js now has built-in configuration for Jest.
 
-To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`:
+To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom`:
 
 ```bash
-npm install --save-dev jest @testing-library/react @testing-library/jest-dom react-test-renderer
+npm install --save-dev jest @testing-library/react @testing-library/jest-dom
 ```
 
 Create a `jest.config.js` file in your project's root directory and add the following:
@@ -284,6 +284,7 @@ const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
@@ -340,6 +341,7 @@ module.exports = {
     '/node_modules/',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
+  testEnvironment: 'jest-environment-jsdom',
 }
 ```
 
@@ -430,16 +432,11 @@ Add the Jest executable in watch mode to the `package.json` scripts:
 
 Your project is now ready to run tests. Follow Jests convention by adding tests to the `__tests__` folder in your project's root directory.
 
-For example, we can add a test to check if the `<Index />` component successfully renders a heading:
+For example, we can add a test to check if the `<Home />` component successfully renders a heading:
 
 ```jsx
 // __tests__/index.test.jsx
 
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react'
 import { render, screen } from '@testing-library/react'
 import Home from '../pages/index'
 
@@ -456,19 +453,17 @@ describe('Home', () => {
 })
 ```
 
-> **Note**: The `@jest-environment jsdom` comment above configures the testing environment as `jsdom` inside the test file because React Testing Library uses DOM elements like `document.body` which will not work in Jest's default `node` testing environment. Alternatively, you can also set the `jsdom` environment globally by adding the Jest configuration option: `"testEnvironment": "jsdom"` in `jest.config.js`.
-
-Optionally, add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `<Index />` component:
+Optionally, add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `<Home />` component:
 
 ```jsx
 // __tests__/snapshot.js
-import React from 'react'
-import renderer from 'react-test-renderer'
-import Index from '../pages/index'
+
+import { render } from '@testing-library/react'
+import Home from '../pages/index'
 
 it('renders homepage unchanged', () => {
-  const tree = renderer.create(<Index />).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<Home />)
+  expect(container).toMatchSnapshot()
 })
 ```
 

errors/no-page-custom-font.md

@@ -3,7 +3,7 @@
 ### Why This Error Occurred
 
 - The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.
-- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimiztion.
+- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimization.
 
 ### Possible Ways to Fix It
 

errors/react-hydration-error.md

@@ -14,10 +14,10 @@ An example:
 
 ```jsx
 function MyComponent() {
-    // This condition depends on `window`. During the first render of the browser the `color` variable will be different
-    const color = typeof window !== 'undefined' ? 'red' : 'blue
-    // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
-    return <h1 className={`title ${color}`}>Hello World!</h1>
+  // This condition depends on `window`. During the first render of the browser the `color` variable will be different
+  const color = typeof window !== 'undefined' ? 'red' : 'blue'
+  // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
+  return <h1 className={`title ${color}`}>Hello World!</h1>
 }
 ```
 

examples/auth-with-stytch/.env.template

@@ -0,0 +1,8 @@
+# The two iron-session values may be left as-is while testing out this example app.
+IRON_SESSION_COOKIE_NAME="stytch_next_example_cookie"
+IRON_SESSION_PASSWORD="complex_password_at_least_32_characters_long"
+# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys
+STYTCH_PROJECT_ENV=test
+STYTCH_PROJECT_ID="YOUR_STYTCH_PROJECT_ID"
+STYTCH_SECRET="YOUR_STYTCH_SECRET"
+NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"

examples/with-webpack-bundle-analyzer/.gitignore renamed to examples/auth-with-stytch/.gitignore

@@ -0,0 +1,68 @@
+# Stytch + Next.js example app on Vercel
+
+This is a [Stytch](https://stytch.com) + [Next.js](https://nextjs.org/) project that showcases how to enable elegant authentication in your applicaiton.
+
+<p align="center"><img src="./public/example-app-image.png" alt="stytch" width="50%"/></p>
+
+In this repo, we have two sample auth flows:
+
+- SDK integration: This flow uses Stytch's React component to create a login and sign-up flow using [Email Magic Links](https://stytch.com/docs/api/send-by-email).
+- API integration: This flow uses a custom UI with Stytch's backend API for [Onetime Passcodes(OTP) via SMS](https://stytch.com/docs/api/sms-otp-overview) authentication.
+
+Both flows use Stytch's [Node client library](https://github.com/stytchauth/stytch-node) and [`iron-session`](https://github.com/vvo/next-iron-session) for session management.
+
+**Note:** By default this example app enables three of our OAuth providers, Google, Microsoft, and Apple. If you haven't set up these OAuth providers in your [Dashboard](https://stytch.com/dashboard/oauth), you'll receive a redirect error when you attempt to login via those providers. You may remove all OAuth methods by removing `SDKProductTypes.oauth` from the `products` array in [pages/index.tsx](pages/index.tsx) or adjust which ones are displayed by via `oauthOptions.providers` in the same file. More detail on working with OAuth providers in our SDK may be found in our [Docs](https://stytch.com/docs/javascript-sdk#javascript-sdk/oauth).
+
+# Deploy on Vercel
+
+## Setting up Stytch
+
+The first step is to configure the appropriate redirect URLs for your project. You'll set these magic link redirect URLs in the [Redirect URLs](https://stytch.com/dashboard/redirect-urls) section of your Dashboard. Add `https://*.vercel.app:3000` as both a login and sign-up redirect URL.
+
+## Running the example app
+
+Now just click the deploy button below! Once you're signed in to your Vercel account, you'll be guided through how to get up and running quickly. Check out [.env.template](/.env.template) for pointers on filling in the appropriate environment variables for this step.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Fblob%2Fcanary%2Fexamples%2Fauth-with-stytch%2F&env=STYTCH_PROJECT_ENV,STYTCH_PROJECT_ID,STYTCH_SECRET,NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,IRON_SESSION_PASSWORD,IRON_SESSION_COOKIE_NAME&envDescription=All%20variables%20here%20need%20values%2C%20see%20the%20following%20link%20for%20pointers%20on%20how%20to%20feel%20these%20out.&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Fblob%2Fcanary%2Fexamples%2Fauth-with-stytch%2F.env.template&project-name=stytch-nextjs-vercel&repo-name=stytch-nextjs-vercel&demo-title=Stytch%20on%20Next.js%20with%20Vercel&demo-description=Next.js%20example%20app%20using%20Stytch%20authentication&demo-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Fblob%2Fcanary%2Fexamples%2Fauth-with-stytch&demo-image=https%3A%2F%2Fstytch.com%2Flogo-preview.png)
+
+# Running locally via `vercel dev`
+
+## Setting up Stytch
+
+After signing up for Stytch, you'll need your Project's `project_id`, `secret`, and `public_token`. You can find these in the [API keys tab](https://stytch.com/dashboard/api-keys).
+
+Once you've gathered these values, add them to a new .env.local file.
+Example:
+
+```bash
+cp .env.template .env.local
+# Replace your keys in new .env.local file
+```
+
+Next we'll configure the appropriate redirect URLs for your project, you'll set these magic link URLs for your project in the [Redirect URLs](https://stytch.com/dashboard/redirect-urls) section of your Dashboard. Add `http://localhost:3000/api/authenticate_magic_link` as both a login and sign-up redirect URL.
+
+## Running the example app
+
+Install dependencies by running
+
+```bash
+npm install
+# or
+yarn install
+```
+
+You can then run a development server using:
+
+```bash
+vercel dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Documentation
+
+Learn more about some of Stytch's products used in this example app:
+
+- [Stytch React](https://www.npmjs.com/package/@stytch/stytch-react)
+- [Stytch's node client library](https://www.npmjs.com/package/stytch)
+- [iron-session](https://github.com/vvo/next-iron-session)