diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index b601a1f32f53d36..eacdc887f86c582 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -4,6 +4,7 @@
* @timneutkens @ijjk @shuding @huozhi
/.github/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @balazsorban44
/docs/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @balazsorban44
+/errors/ @balazsorban44
/examples/ @timneutkens @ijjk @shuding @leerob @steven-tey @balazsorban44
# SWC Build & Telemetry (@padmaia)
diff --git a/.github/workflows/validate_issue.yml b/.github/workflows/validate_issue.yml
index 3c6e3a4a2e43a32..abd6c0784d5f156 100644
--- a/.github/workflows/validate_issue.yml
+++ b/.github/workflows/validate_issue.yml
@@ -15,4 +15,3 @@ jobs:
run: node ./.github/actions/issue-validator/index.mjs
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- DEBUG: 1
diff --git a/contributing.md b/contributing.md
index b3ec843cf2e71a2..e5403bdef11bae9 100644
--- a/contributing.md
+++ b/contributing.md
@@ -147,7 +147,7 @@ There are two options to develop with your local version of the codebase:
with:
```json
- "next": "file:/path/to/next.js/packages/next",
+ "next": "link:/path/to/next.js/packages/next",
```
2. In your app's root directory, make sure to remove `next` from `node_modules` with:
diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md
index 3f2bb69033ef778..6708b07d693d26a 100644
--- a/docs/advanced-features/compiler.md
+++ b/docs/advanced-features/compiler.md
@@ -9,6 +9,7 @@ description: Learn about the Next.js Compiler, written in Rust, which transforms
| Version | Changes |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `v12.3.0` | SWC Minifier [stable](https://nextjs.org/blog/next-12-3#swc-minifier-stable). |
| `v12.2.0` | [SWC Plugins](#swc-plugins-Experimental) experimental support added. |
| `v12.1.0` | Added support for Styled Components, Jest, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. |
| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). |
@@ -238,8 +239,6 @@ module.exports = {
Only `importMap` in `@emotion/babel-plugin` is not supported for now.
-## Experimental Features
-
### Minification
You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.
@@ -254,6 +253,8 @@ module.exports = {
If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).
+## Experimental Features
+
### Minifier debug options
While the minifier is experimental, we are making the following options available for debugging purposes. They will not be available once the minifier is made stable.
diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md
index f80aa5b831e783f..118165d399cc5f4 100644
--- a/docs/advanced-features/dynamic-import.md
+++ b/docs/advanced-features/dynamic-import.md
@@ -42,7 +42,7 @@ If you are not using React 18, you can use the `loading` attribute in place of t
```jsx
const DynamicHeader = dynamic(() => import('../components/header'), {
- loading: () => ,
+ loading: () =>
Loading...
,
})
```
diff --git a/docs/advanced-features/middleware.md b/docs/advanced-features/middleware.md
index 22dd0988b8163c5..7812da86b3aaf13 100644
--- a/docs/advanced-features/middleware.md
+++ b/docs/advanced-features/middleware.md
@@ -31,7 +31,7 @@ To begin using Middleware, follow the steps below:
npm install next@latest
```
-2. Create a `middleware.ts` (or `.js`) file at the same level as your `pages` directory
+2. Create a `middleware.ts` (or `.js`) file at the root or in the `src` directory (same level as your `pages`)
3. Export a middleware function from the `middleware.ts` file:
```typescript
@@ -88,6 +88,22 @@ export const config = {
}
```
+The `matcher` config allows full regex so matching like negative lookaheads or character matching is supported. An example of a negative lookahead to match all except specific paths can be seen here:
+
+```js
+export const config = {
+ matcher: [
+ /*
+ * Match all request paths except for the ones starting with:
+ * - api (API routes)
+ * - static (static files)
+ * - favicon.ico (favicon file)
+ */
+ '/((?!api|static|favicon.ico).*)',
+ ],
+}
+```
+
> **Note:** The `matcher` values need to be constants so they can be statically analyzed at build-time. Dynamic values such as variables will be ignored.
Configured matchers:
@@ -101,8 +117,6 @@ Read more details on [path-to-regexp](https://github.com/pillarjs/path-to-regexp
> **Note:** For backward compatibility, Next.js always considers `/public` as `/public/index`. Therefore, a matcher of `/public/:path` will match.
-> **Note:** It is not possible to exclude middleware from matching static path starting with `_next/`. This allow enforcing security with middleware.
-
### Conditional Statements
```typescript
diff --git a/docs/advanced-features/react-18/server-components.md b/docs/advanced-features/react-18/server-components.md
index 906dab699bff2da..027a7d6690b1d75 100644
--- a/docs/advanced-features/react-18/server-components.md
+++ b/docs/advanced-features/react-18/server-components.md
@@ -1,116 +1,27 @@
# React Server Components (RFC)
-Server Components allow us to render React components on the server. This is fundamentally different from server-side rendering (SSR) where you're pre-generating HTML on the server. With Server Components, there's **zero client-side JavaScript needed,** making page rendering faster. This improves the user experience of your application, pairing the best parts of server-rendering with client-side interactivity.
+React Server Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
-### Next Router and Layouts RFC
+In an upcoming Next.js release, React and Next.js developers will be able to use Server Components inside the `app` directory as part of the changes outlined by the [Layouts RFC](https://nextjs.org/blog/layouts-rfc).
-We are currently implementing the [Next.js Router and Layouts RFC](https://nextjs.org/blog/layouts-rfc).
+## What are React Server Components?
-The new Next.js router will be built on top of React 18 features, including React Server Components.
+React Server Components improve the user experience of your application by pairing the best parts of server-rendering with client-side interactivity.
-One of the biggest proposed changes is that, by default, files inside a new `app` directory will be rendered on the server as React Server Components.
+With traditional React applications that are client-side only, developers often had to make tradeoffs between SEO and performance. Server Components enable developers to better leverage their server infrastructure and achieve great performance by default.
-This will allow you to automatically adopt React Server Components when migrating from `pages` to `app`.
+For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead stay entirely on the server. By sending less JavaScript to the browser, the time to interactive for the page is decreased, leading to improved [Core Web Vitals](https://vercel.com/blog/core-web-vitals).
-You can find more information on the [RFC](https://nextjs.org/blog/layouts-rfc) and we welcome your feedback on [Github Discussions](https://github.com/vercel/next.js/discussions/37136).
+## React Server Components vs Server-Side Rendering
-### Server Components Conventions
+[Server-side Rendering](/docs/basic-features/pages.md#server-side-rendering) (SSR) dynamically builds your application into HTML on the server. This creates faster load times for users by offloading work from the user's device to the server, especially those with slower internet connections or older devices. However, developers still pay the cost to download, parse, and hydrate those components after the initial HTML loads.
-To run a component on the server, append `.server.js` to the end of the filename. For example, `./pages/home.server.js` will be treated as a Server Component.
+React Server Components, combined with Next.js server-side rendering, help eliminate the tradeoff of all-or-nothing data fetching. You can progressively show updates as your data comes in.
-For client components, append `.client.js` to the filename. For example, `./components/avatar.client.js`.
+## Using React Server Components with Next.js
-Server components can import server components and client components.
+The Next.js team at Vercel released the [Layouts RFC](https://nextjs.org/blog/layouts-rfc) a few months ago outlining the vision for the future of routing, layouts, and data fetching in the framework. These changes **aren't available yet**, but we can start learning about how they will be used.
-Client components **cannot** import server components.
+Pages and Layouts in `app` will be rendered as React Server Components by default. This improves performance by reducing the amount of JavaScript sent to the client for components that are not interactive. Client components will be able to be defined through either a file name extension or through a string literal in the file.
-Components without a `server` or `client` extension will be treated as shared components and can be imported by server components and client components. For example:
-
-```jsx
-// pages/home.server.js
-
-import { Suspense } from 'react'
-
-import Profile from '../components/profile.server'
-import Content from '../components/content.client'
-
-export default function Home() {
- return (
-
-
Welcome to React Server Components
-
-
-
-
-
- )
-}
-```
-
-The `` and `` components will always be server-side rendered and streamed to the client, and will not be included by the client-side JavaScript. However, `` will still be hydrated on the client-side, like normal React components.
-
-> Make sure you're using default imports and exports for server components (`.server.js`). The support of named exports are a work in progress!
-
-To see a full example, check out the [vercel/next-react-server-components demo](https://github.com/vercel/next-react-server-components).
-
-## Supported Next.js APIs
-
-### `next/link` and `next/image`
-
-You can use `next/link` and `next/image` like before and they will be treated as client components to keep the interaction on client side.
-
-### `next/document`
-
-If you have a custom `_document`, you have to change your `_document` to a functional component like below to use server components. If you don't have one, Next.js will use the default `_document` component for you.
-
-```jsx
-// pages/_document.js
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
- return (
-
-
-
-
-
-
-
- )
-}
-```
-
-### `next/app`
-
-The usage of `_app.js` is the same as [Custom App](/docs/advanced-features/custom-app). Using custom app as server component such as `_app.server.js` is not recommended, to keep align with non server components apps for client specific things like global CSS imports.
-
-### Routing
-
-Both basic routes with path and queries and dynamic routes are supported. If you need to access the router in server components(`.server.js`), they will receive `router` instance as a prop so that you can directly access them without using the `useRouter()` hook.
-
-```jsx
-// pages/index.server.js
-
-export default function Index({ router }) {
- // You can access routing information by `router.pathname`, etc.
- return 'hello'
-}
-```
-
-### Unsupported Next.js APIs
-
-While RSC and SSR streaming are still in the alpha stage, not all Next.js APIs are supported. The following Next.js APIs have limited functionality within Server Components. React 18 use without SSR streaming is not affected.
-
-#### React internals
-
-Most React hooks, such as `useContext`, `useState`, `useReducer`, `useEffect` and `useLayoutEffect`, are not supported as of today since server components are executed per request and aren't stateful.
-
-#### Data Fetching & Styling
-
-Like streaming SSR, styling and data fetching within `Suspense` on the server side are not well supported. We're still working on them.
-
-Page level exported methods like `getInitialProps`, `getStaticProps` and `getStaticPaths` are not supported.
-
-#### `next/head` and I18n
-
-We are still working on support for these features.
+We will be providing more updates about Server Components usage in Next.js soon.
diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md
index 6ed9b3f5756f0c0..859db74188aaf9c 100644
--- a/docs/advanced-features/using-mdx.md
+++ b/docs/advanced-features/using-mdx.md
@@ -33,7 +33,7 @@ The following steps outline how to setup `@next/mdx` in your Next.js project:
1. Install the required packages:
```bash
- npm install @next/mdx @mdx-js/loader
+ npm install @next/mdx @mdx-js/loader @mdx-js/react
```
2. Require the package and configure to support top level `.mdx` pages. The following adds the `options` object key allowing you to pass in any plugins:
diff --git a/docs/api-reference/edge-runtime.md b/docs/api-reference/edge-runtime.md
index c62a84973bf4fd3..3a6bccc0ae73520 100644
--- a/docs/api-reference/edge-runtime.md
+++ b/docs/api-reference/edge-runtime.md
@@ -136,6 +136,25 @@ The following JavaScript language features are disabled, and **will not work:**
- `eval`: Evaluates JavaScript code represented as a string
- `new Function(evalString)`: Creates a new function with the code provided as an argument
+- `WebAssembly.compile`
+- `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code)
+
+In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking.
+You can relax the check to allow specific files with your Middleware or Edge API Route exported configuration:
+
+```javascript
+export const config = {
+ runtime: 'experimental-edge', // for Edge API Routes only
+ unstable_allowDynamic: [
+ '/lib/utilities.js', // allows a single file
+ '/node_modules/function-bind/**', // use a glob to allow anything in the function-bind 3rd party module
+ ],
+}
+```
+
+`unstable_allowDynamic` is a [glob](https://github.com/micromatch/micromatch#matching-features), or an array of globs, ignoring dynamic code evaluation for specific files. The globs are relative to your application root folder.
+
+Be warned that if these statements are executed on the Edge, _they will throw and cause a runtime error_.
## Related
diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
index b0a8883262c6e43..bd97cbeced80d96 100644
--- a/docs/api-reference/next/future/image.md
+++ b/docs/api-reference/next/future/image.md
@@ -7,11 +7,11 @@ description: Try the latest Image Optimization with the new `next/future/image`
Version History
-| Version | Changes |
-| --------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. |
-| `v12.2.4` | `fill` property added. |
-| `v12.2.0` | Experimental `next/future/image` component introduced. |
+| Version | Changes |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. `onLoadingComplete` receives `` |
+| `v12.2.4` | `fill` property added. |
+| `v12.2.0` | Experimental `next/future/image` component introduced. |
@@ -33,6 +33,7 @@ Compared to `next/image`, the new `next/future/image` component has the followin
- Removes `lazyRoot` prop since there is no native equivalent
- Removes `loader` config in favor of [`loader`](#loader) prop
- Changed `alt` prop from optional to required
+- Changed `onLoadingComplete` callback to receive reference to `` element
## Known Browser Bugs
@@ -151,7 +152,7 @@ Must be one of the following:
2. A path string. This can be either an absolute external URL,
or an internal path depending on the [loader](#loader) prop.
-When using an external URL, you must add it to [domains](#domains) in `next.config.js`.
+When using an external URL, you must add it to [remotePatterns](#remote-patterns) in `next.config.js`.
### width
@@ -306,10 +307,7 @@ Also keep in mind that the required `width` and `height` props can interact with
A callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed.
-The callback function will be called with one argument, an object with the following properties:
-
-- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)
-- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)
+The callback function will be called with one argument, a reference to the underlying `` element.
### onLoad
@@ -430,6 +428,8 @@ The `**` syntax does not work in the middle of the pattern.
### Domains
+> Note: We recommend using [`remotePatterns`](#remote-patterns) instead so you can restrict protocol and pathname.
+
Similar to [`remotePatterns`](#remote-patterns), the `domains` configuration can be used to provide a list of allowed hostnames for external images.
However, the `domains` configuration does not support wildcard pattern matching and it cannot restrict protocol, port, or pathname.
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 60ffe36f20dac17..5c0bc210e088cae 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -45,7 +45,7 @@ Must be one of the following:
or an internal path depending on the [loader](#loader) prop or [loader configuration](#loader-configuration).
When using an external URL, you must add it to
-[domains](#domains) in
+[remotePatterns](#remote-patterns) in
`next.config.js`.
### width
@@ -393,6 +393,8 @@ The `**` syntax does not work in the middle of the pattern.
### Domains
+> Note: We recommend using [`remotePatterns`](#remote-patterns) instead so you can restrict protocol and pathname.
+
Similar to [`remotePatterns`](#remote-patterns), the `domains` configuration can be used to provide a list of allowed hostnames for external images.
However, the `domains` configuration does not support wildcard pattern matching and it cannot restrict protocol, port, or pathname.
diff --git a/docs/api-reference/next/server.md b/docs/api-reference/next/server.md
index e2f5c8e6fca000a..5e83b10835e2150 100644
--- a/docs/api-reference/next/server.md
+++ b/docs/api-reference/next/server.md
@@ -10,7 +10,7 @@ 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 Edge Middleware](#using-cookies-in-edge-middleware)
+- `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)
- `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`)
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
index 1b5ac21aa200c8a..e53e61f8b773250 100644
--- a/docs/basic-features/image-optimization.md
+++ b/docs/basic-features/image-optimization.md
@@ -72,7 +72,7 @@ function Home() {
### Remote Images
-To use a remote image, the `src` property should be a URL string, which can be [relative](#loaders) or [absolute](/docs/api-reference/next/image.md#domains). Because Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually:
+To use a remote image, the `src` property should be a URL string, which can be [relative](#loaders) or [absolute](/docs/api-reference/next/image.md#remote-patterns). Because Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually:
```jsx
import Image from 'next/image'
@@ -97,17 +97,17 @@ export default function Home() {
### Domains
-Sometimes you may want to access a remote image, but still use the built-in Next.js Image Optimization API. To do this, leave the `loader` at its default setting and enter an absolute URL for the Image `src`.
+Sometimes you may want to optimize a remote image, but still use the built-in Next.js Image Optimization API. To do this, leave the `loader` at its default setting and enter an absolute URL for the Image `src` prop.
-To protect your application from malicious users, you must define a list of remote hostnames you intend to allow remote access.
+To protect your application from malicious users, you must define a list of remote hostnames you intend to use with the `next/image` component.
-> Learn more about [`domains`](/docs/api-reference/next/image.md#domains) configuration.
+> Learn more about [`remotePatterns`](/docs/api-reference/next/image.md#remote-patterns) configuration.
### Loaders
Note that in the [example earlier](#remote-images), a partial URL (`"/me.png"`) is provided for a remote image. This is possible because of the `next/image` [loader](/docs/api-reference/next/image.md#loader) architecture.
-A loader is a function that generates the URLs for your image. It appends a root domain to your provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport.
+A loader is a function that generates the URLs for your image. It modifies the provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport.
The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with a few lines of JavaScript.
@@ -209,7 +209,7 @@ For examples of the Image component used with the various fill modes, see the [I
## Configuration
-The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](/docs/api-reference/next.config.js/introduction.md). These configurations allow you to [enable remote images](/docs/api-reference/next/image.md#domains), [define custom image breakpoints](/docs/api-reference/next/image.md#device-sizes), [change caching behavior](/docs/api-reference/next/image.md#caching-behavior) and more.
+The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](/docs/api-reference/next.config.js/introduction.md). These configurations allow you to [enable remote images](/docs/api-reference/next/image.md#remote-patterns), [define custom image breakpoints](/docs/api-reference/next/image.md#device-sizes), [change caching behavior](/docs/api-reference/next/image.md#caching-behavior) and more.
[**Read the full image configuration documentation for more information.**](/docs/api-reference/next/image.md#configuration-options)
diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index 33df31800f437d1..0f92fad1c3d2097 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -19,10 +19,11 @@ description: Next.js helps you optimize loading third-party scripts with the bui
Version History
-| Version | Changes |
-| --------- | ------------------------- |
-| `v12.2.4` | `onReady` prop added. |
-| `v11.0.0` | `next/script` introduced. |
+| Version | Changes |
+| --------- | ------------------------------------------------------------------------- |
+| `v12.2.4` | `onReady` prop added. |
+| `v12.2.2` | Allow `next/script` with `beforeInteractive` to be placed in `_document`. |
+| `v11.0.0` | `next/script` introduced. |
diff --git a/docs/going-to-production.md b/docs/going-to-production.md
index 78ad8d33fe8b9ab..53d3f39d4a6a1c7 100644
--- a/docs/going-to-production.md
+++ b/docs/going-to-production.md
@@ -72,7 +72,7 @@ export async function getServerSideProps({ req, res }) {
By default, `Cache-Control` headers will be set differently depending on how your page fetches data.
- If the page uses `getServerSideProps` or `getInitialProps`, it will use the default `Cache-Control` header set by `next start` in order to prevent accidental caching of responses that cannot be cached. If you want a different cache behavior while using `getServerSideProps`, use `res.setHeader('Cache-Control', 'value_you_prefer')` inside of the function as shown above.
-- If the page is using `getStaticProps`, it will have a `Cache-Control` header of `s-maxage=REVALIDATE_SECONDS, stale-while-revalidate`, or if `revalidate` is _not_ used , `s-maxage=31536000, stale-while-revalidate` to cache for the maximum age possible.
+- If the page is using `getStaticProps`, it will have a `Cache-Control` header of `s-maxage=REVALIDATE_SECONDS, stale-while-revalidate`, or if `revalidate` is _not_ used, `s-maxage=31536000, stale-while-revalidate` to cache for the maximum age possible.
> **Note:** Your deployment provider must support caching for dynamic responses. If you are self-hosting, you will need to add this logic yourself using a key/value store like Redis. If you are using Vercel, [Edge Caching works without configuration](https://vercel.com/docs/edge-network/caching?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
@@ -90,7 +90,7 @@ To reduce the amount of JavaScript sent to the browser, you can use the followin
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) – Display the size of the imported package inside VSCode.
- [Package Phobia](https://packagephobia.com/) – Find the cost of adding a new dev dependency to your project.
- [Bundle Phobia](https://bundlephobia.com/) - Analyze how much a dependency can increase bundle sizes.
-- [Webpack Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) – Visualize size of webpack output files with an interactive, zoomable treemap.
+- [Webpack Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) – Visualize the size of webpack output files with an interactive, zoomable treemap.
- [bundlejs](https://bundlejs.com/) - An online tool to quickly bundle & minify your projects, while viewing the compressed gzip/brotli bundle size, all running locally on your browser.
Each file inside your `pages/` directory will automatically be code split into its own JavaScript bundle during `next build`. You can also use [Dynamic Imports](/docs/advanced-features/dynamic-import.md) to lazy-load components and libraries. For example, you might want to defer loading your modal code until a user clicks the open button.
@@ -142,7 +142,7 @@ Once you are able to measure the loading performance, use the following strategi
- Setting up your Code Editor to view import costs and sizes
- Finding alternative smaller packages
- Dynamically loading components and dependencies
- - For more in depth information, review this [guide](https://papyrus.dev/@PapyrusBlog/how-we-reduced-next.js-page-size-by-3.5x-and-achieved-a-98-lighthouse-score) and this [performance checklist](https://dev.to/endymion1818/nextjs-performance-checklist-5gjb).
+ - For more in-depth information, review this [guide](https://papyrus.dev/@PapyrusBlog/how-we-reduced-next.js-page-size-by-3.5x-and-achieved-a-98-lighthouse-score) and this [performance checklist](https://dev.to/endymion1818/nextjs-performance-checklist-5gjb).
## Related
diff --git a/docs/migrating/incremental-adoption.md b/docs/migrating/incremental-adoption.md
index a52182e3766711f..4334ad640ec605f 100644
--- a/docs/migrating/incremental-adoption.md
+++ b/docs/migrating/incremental-adoption.md
@@ -92,4 +92,4 @@ Once your monorepo is set up, push changes to your Git repository as usual and y
## Conclusion
-To learn more, read about [subpaths](/docs/api-reference/next.config.js/basepath.md) and [rewrites](/docs/api-reference/next.config.js/rewrites.md) or [deploy a Next.jsmonorepo](https://vercel.com/templates/next.js/monorepo).
+To learn more, read about [subpaths](/docs/api-reference/next.config.js/basepath.md) and [rewrites](/docs/api-reference/next.config.js/rewrites.md) or [deploy a Next.js monorepo](https://vercel.com/templates/next.js/monorepo).
diff --git a/docs/testing.md b/docs/testing.md
index e3504d418de3ab5..c8ad384536eed82 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -145,7 +145,7 @@ Playwright is a testing framework that lets you automate Chromium, Firefox, and
### Quickstart
-The fastest way to get started, is to use `create-next-app` with the [with-playwright example](https://github.com/vercel/next.js/tree/canary/examples/with-playwright). This will create a Next.js project complete with Playwright all set up.
+The fastest way to get started is to use `create-next-app` with the [with-playwright example](https://github.com/vercel/next.js/tree/canary/examples/with-playwright). This will create a Next.js project complete with Playwright all set up.
```bash
npx create-next-app@latest --example with-playwright with-playwright-app
@@ -214,7 +214,7 @@ test('should navigate to the about page', async ({ page }) => {
await page.goto('http://localhost:3000/')
// Find an element with the text 'About Page' and click on it
await page.click('text=About')
- // The new url should be "/about" (baseURL is used there)
+ // The new URL should be "/about" (baseURL is used there)
await expect(page).toHaveURL('http://localhost:3000/about')
// The new page should contain an h1 with "About Page"
await expect(page.locator('h1')).toContainText('About Page')
@@ -307,7 +307,7 @@ Under the hood, `next/jest` is automatically configuring Jest for you, including
### Setting up Jest (with Babel)
-If you opt-out of the [Rust Compiler](https://nextjs.org/docs/advanced-features/compiler), you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
+If you opt out of the [Rust Compiler](https://nextjs.org/docs/advanced-features/compiler), you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
Here are the recommended options to configure Jest for Next.js:
@@ -440,7 +440,7 @@ Add the Jest executable in watch mode to the `package.json` scripts:
**Create your first tests**
-Your project is now ready to run tests. Follow Jests convention by adding tests to the `__tests__` folder in your project's root directory.
+Your project is now ready to run tests. Follow Jest's 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 `` component successfully renders a heading:
diff --git a/docs/upgrading.md b/docs/upgrading.md
index 2ba95e79e9c6280..e8c4f5b6cb8cc5b 100644
--- a/docs/upgrading.md
+++ b/docs/upgrading.md
@@ -44,7 +44,7 @@ yarn add next@12
### SWC replacing Babel
-Next.js now uses Rust-based compiler [SWC](https://swc.rs/) to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and up to 5x faster Fast Refresh.
+Next.js now uses a Rust-based compiler, [SWC](https://swc.rs/), to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and allows for up to 5x faster Fast Refresh.
Next.js provides full backwards compatibility with applications that have [custom Babel configuration](https://nextjs.org/docs/advanced-features/customizing-babel-config). All transformations that Next.js handles by default like styled-jsx and tree-shaking of `getStaticProps` / `getStaticPaths` / `getServerSideProps` have been ported to Rust.
@@ -72,15 +72,15 @@ Minification using SWC is an opt-in flag to ensure it can be tested against more
### Improvements to styled-jsx CSS parsing
-On top of the Rust-based compiler we've implemented a new CSS parser based on the CSS parser that was used for the styled-jsx Babel transform. This new parser has improved handling of CSS and now errors when invalid CSS is used that would previously slip through and cause unexpected behavior.
+On top of the Rust-based compiler, we've implemented a new CSS parser based on the CSS parser that was used for the styled-jsx Babel transform. This new parser has improved handling of CSS and now errors when invalid CSS is used that would previously slip through and cause unexpected behavior.
-Because of this change invalid CSS will throw an error during development and `next build`. This change only affects styled-jsx usage.
+Because of this change, invalid CSS will throw an error during development and `next build`. This change only affects styled-jsx usage.
### `next/image` changed wrapping element
`next/image` now renders the `` inside a `` instead of `
`.
-If your application has specific CSS targeting span, for example `.container span`, upgrading to Next.js 12 might incorrectly match the wrapping element inside the `` component. You can avoid this by restricting the selector to a specific class such as `.container span.item` and updating the relevant component with that className, such as ``.
+If your application has specific CSS targeting span, for example, `.container span`, upgrading to Next.js 12 might incorrectly match the wrapping element inside the `` component. You can avoid this by restricting the selector to a specific class such as `.container span.item` and updating the relevant component with that className, such as ``.
If your application has specific CSS targeting the `next/image` `
` tag, for example `.container div`, it may not match anymore. You can update the selector `.container span`, or preferably, add a new `
` wrapping the `` component and target that instead such as `.container .wrapper`.
@@ -341,7 +341,7 @@ TypeScript Definitions are published with the `next` package, so you need to uni
The following types are different:
-> This list was created by the community to help you upgrade, if you find other differences please send a pull-request to this list to help other users.
+> This list was created by the community to help you upgrade, if you find other differences please send a pull request to this list to help other users.
From:
@@ -359,7 +359,7 @@ import { AppContext, AppInitialProps } from 'next/app'
import { DocumentContext, DocumentInitialProps } from 'next/document'
```
-#### The `config` key is now an export on a page
+#### The `config` key is now a named export on a page
You may no longer export a custom variable named `config` from a page (i.e. `export { config }` / `export const config ...`).
This exported variable is now used to specify page-level Next.js configuration like Opt-in AMP and API Route features.
@@ -385,7 +385,7 @@ const DynamicComponentWithCustomLoading = dynamic(
Next.js now has the concept of page-level configuration, so the `withAmp` higher-order component has been removed for consistency.
-This change can be **automatically migrated by running the following commands in the root of your Next.js project:**
+This change can be **automatically migrated by running the following commands at the root of your Next.js project:**
```bash
curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
diff --git a/errors/edge-dynamic-code-evaluation.md b/errors/edge-dynamic-code-evaluation.md
new file mode 100644
index 000000000000000..29a5e74b6329fb5
--- /dev/null
+++ b/errors/edge-dynamic-code-evaluation.md
@@ -0,0 +1,34 @@
+# Dynamic code evaluation is not available in Middlewares or Edge API Routes
+
+#### Why This Error Occurred
+
+`eval()`, `new Function()` or compiling WASM binaries dynamically is not allowed in Middlewares or Edge API Routes.
+Specifically, the following APIs are not supported:
+
+- `eval()`
+- `new Function()`
+- `WebAssembly.compile`
+- `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code)
+
+#### Possible Ways to Fix It
+
+You can bundle your WASM binaries using `import`:
+
+```typescript
+import { NextResponse } from 'next/server'
+import squareWasm from './square.wasm?module'
+
+export default async function middleware() {
+ const m = await WebAssembly.instantiate(squareWasm)
+ const answer = m.exports.square(9)
+
+ const response = NextResponse.next()
+ response.headers.set('x-square', answer.toString())
+ return response
+}
+```
+
+In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking.
+You can relax the check to allow specific files with your Middleware or Edge API Route exported [configuration](https://nextjs.org/docs/api-reference/edge-runtime#unsupported-apis).
+
+Be warned that if these statements are executed on the Edge, _they will throw and cause a runtime error_.
diff --git a/errors/invalid-page-config.md b/errors/invalid-page-config.md
index c9feeb38dbaa4f2..a535a29056c7dd0 100644
--- a/errors/invalid-page-config.md
+++ b/errors/invalid-page-config.md
@@ -7,7 +7,7 @@ In one of your pages or API Routes you did `export const config` with an invalid
#### Possible Ways to Fix It
The page's config must be an object initialized directly when being exported and not modified dynamically.
-The config object must only contains static constant literals without expressions.
+The config object must only contain static constant literals without expressions.
diff --git a/errors/large-page-data.md b/errors/large-page-data.md
index 9969b380299e8a3..6a195072f43fbbd 100644
--- a/errors/large-page-data.md
+++ b/errors/large-page-data.md
@@ -8,6 +8,12 @@ One of your pages includes a large amount of page data (>= 128kB). This can nega
Reduce the amount of data returned from `getStaticProps`, `getServerSideProps`, or `getInitialProps` to only the essential data to render the page. The default threshold of 128kB can be configured in `largePageDataBytes` if absolutely necessary and the performance implications are understood.
+To inspect the props passed to your page, you can inspect the below element's content in your browser devtools:
+
+```sh
+document.getElementById("__NEXT_DATA__").text
+```
+
### Useful Links
- [Data Fetching Documentation](https://nextjs.org/docs/basic-features/data-fetching/overview)
diff --git a/errors/manifest.json b/errors/manifest.json
index 3f013867de559b8..41bb35c7d6004b5 100644
--- a/errors/manifest.json
+++ b/errors/manifest.json
@@ -714,6 +714,10 @@
"title": "middleware-dynamic-wasm-compilation",
"path": "/errors/middleware-dynamic-wasm-compilation.md"
},
+ {
+ "title": "edge-dynamic-code-evaluation",
+ "path": "/errors/edge-dynamic-code-evaluation.md"
+ },
{
"title": "node-module-in-edge-runtime",
"path": "/errors/node-module-in-edge-runtime.md"
@@ -729,6 +733,10 @@
{
"title": "middleware-parse-user-agent",
"path": "/errors/middleware-parse-user-agent.md"
+ },
+ {
+ "title": "nonce-contained-invalid-characters",
+ "path": "/errors/nonce-contained-invalid-characters.md"
}
]
}
diff --git a/errors/middleware-dynamic-wasm-compilation.md b/errors/middleware-dynamic-wasm-compilation.md
index 7b5272a41d505bd..ffe3b85546f4600 100644
--- a/errors/middleware-dynamic-wasm-compilation.md
+++ b/errors/middleware-dynamic-wasm-compilation.md
@@ -19,8 +19,8 @@ import squareWasm from './square.wasm?module'
export default async function middleware() {
const m = await WebAssembly.instantiate(squareWasm)
const answer = m.exports.square(9)
-
const response = NextResponse.next()
+
response.headers.set('x-square', answer.toString())
return response
}
diff --git a/errors/nonce-contained-invalid-characters.md b/errors/nonce-contained-invalid-characters.md
new file mode 100644
index 000000000000000..3befd0651f9f02a
--- /dev/null
+++ b/errors/nonce-contained-invalid-characters.md
@@ -0,0 +1,20 @@
+# nonce contained invalid characters
+
+#### Why This Error Occurred
+
+This happens when there is a request that contains a `Content-Security-Policy`
+header that contains a `script-src` directive with a nonce value that contains
+invalid characters (any one of `<>&` characters). For example:
+
+- `'nonce-'`: not allowed
+- `'nonce-/>script<>'`: not allowed
+- `'nonce-PHNjcmlwdCAvPg=='`: allowed
+- `'nonce-Lz5zY3JpcHQ8Pg=='`: allowed
+
+#### Possible Ways to Fix It
+
+Replace the nonce value with a base64 encoded value.
+
+### Useful Links
+
+- [Content Security Policy Sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)
diff --git a/examples/custom-server-typescript/.babelrc b/examples/custom-server-typescript/.babelrc
deleted file mode 100644
index 1ff94f7ed28e16b..000000000000000
--- a/examples/custom-server-typescript/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["next/babel"]
-}
diff --git a/examples/custom-server-typescript/package.json b/examples/custom-server-typescript/package.json
index dd8cf92cc482bd6..9e79d47ca0a3cf9 100644
--- a/examples/custom-server-typescript/package.json
+++ b/examples/custom-server-typescript/package.json
@@ -6,17 +6,17 @@
"start": "cross-env NODE_ENV=production node dist/index.js"
},
"dependencies": {
- "cross-env": "^7.0.2",
+ "cross-env": "^7.0.3",
"next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
- "@types/node": "^12.0.12",
- "@types/react": "^16.9.44",
- "@types/react-dom": "^16.9.8",
- "nodemon": "^2.0.4",
- "ts-node": "^8.10.2",
- "typescript": "4.0"
+ "@types/node": "^18.7.15",
+ "@types/react": "^18.0.18",
+ "@types/react-dom": "^18.0.6",
+ "nodemon": "^2.0.19",
+ "ts-node": "^10.9.1",
+ "typescript": "~4.8.2"
}
}
diff --git a/examples/custom-server-typescript/tsconfig.json b/examples/custom-server-typescript/tsconfig.json
index 919ea44a15e95dd..4097ef5f16ea81c 100644
--- a/examples/custom-server-typescript/tsconfig.json
+++ b/examples/custom-server-typescript/tsconfig.json
@@ -19,7 +19,8 @@
"preserveConstEnums": true,
"sourceMap": true,
"forceConsistentCasingInFileNames": true,
- "resolveJsonModule": true
+ "resolveJsonModule": true,
+ "incremental": true
},
"exclude": ["dist", ".next", "out", "next.config.js"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
diff --git a/examples/image-component/pages/index.tsx b/examples/image-component/pages/index.tsx
index 55e23411e7d21cd..012011cf1ec7805 100644
--- a/examples/image-component/pages/index.tsx
+++ b/examples/image-component/pages/index.tsx
@@ -5,7 +5,7 @@ import ViewSource from '../components/view-source'
import vercel from '../public/vercel.png'
import type { PropsWithChildren } from 'react'
-const Code = (props: PropsWithChildren) => (
+const Code = (props: PropsWithChildren<{}>) => (
)
diff --git a/examples/middleware-matcher/middleware.js b/examples/middleware-matcher/middleware.js
index 2d555ddfa7739fa..a14196a4ccf3d1b 100644
--- a/examples/middleware-matcher/middleware.js
+++ b/examples/middleware-matcher/middleware.js
@@ -11,5 +11,8 @@ export default function middleware(req) {
}
export const config = {
- matcher: ['/public/disclaimer', '/((?!public|static).*)'],
+ matcher: [
+ '/disclaimer', // match a single, specific page
+ '/((?!public|static).*)', // match all paths not starting with 'public' or 'static'
+ ],
}
diff --git a/examples/react-remove-properties/next.config.js b/examples/react-remove-properties/next.config.js
index 7d3aca8225d8329..37db77a9c2a5d2f 100644
--- a/examples/react-remove-properties/next.config.js
+++ b/examples/react-remove-properties/next.config.js
@@ -1,6 +1,6 @@
/** @type {import('next').NextConfig} */
module.exports = {
- experimental: {
+ compiler: {
reactRemoveProperties: true,
// Or, specify a custom list of regular expressions to match properties to remove.
// The regexes defined here are processed in Rust so the syntax is different from
diff --git a/examples/using-preact/next.config.js b/examples/using-preact/next.config.js
index cffe266590351e5..f0e665c2218ae99 100644
--- a/examples/using-preact/next.config.js
+++ b/examples/using-preact/next.config.js
@@ -1,5 +1,8 @@
const withPreact = require('next-plugin-preact')
-module.exports = withPreact({
+/** @type {import('next').NextConfig} */
+const nextConfig = {
/* regular next.js config options here */
-})
+}
+
+module.exports = withPreact(nextConfig)
diff --git a/examples/using-preact/package.json b/examples/using-preact/package.json
index 0f8d828fc183670..dc2b8b3f46da29b 100644
--- a/examples/using-preact/package.json
+++ b/examples/using-preact/package.json
@@ -5,14 +5,18 @@
"build": "next build",
"start": "next start"
},
- "devDependencies": {},
"dependencies": {
- "next": "^12.0.0",
- "next-plugin-preact": "^3.0.6",
- "preact": "^10.5.15",
- "preact-render-to-string": "^5.1.19",
- "react": "npm:@preact/compat@^17.0.2",
- "react-dom": "npm:@preact/compat@^17.0.2",
- "react-ssr-prepass": "npm:preact-ssr-prepass@^1.2.0"
+ "next": "latest",
+ "next-plugin-preact": "latest",
+ "preact": "^10.10.6",
+ "preact-render-to-string": "^5.2.3",
+ "react": "npm:@preact/compat@^17.1.1",
+ "react-dom": "npm:@preact/compat@^17.1.1",
+ "react-ssr-prepass": "npm:preact-ssr-prepass@1.2.0"
+ },
+ "devDependencies": {
+ "@types/node": "18.7.15",
+ "@types/react": "16.9.17",
+ "typescript": "4.8.2"
}
}
diff --git a/examples/using-preact/pages/about.js b/examples/using-preact/pages/about.js
deleted file mode 100644
index 46817af02a5c141..000000000000000
--- a/examples/using-preact/pages/about.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function About() {
- return
About us
-}
diff --git a/examples/using-preact/pages/about.tsx b/examples/using-preact/pages/about.tsx
new file mode 100644
index 000000000000000..71c7703a7bd2acf
--- /dev/null
+++ b/examples/using-preact/pages/about.tsx
@@ -0,0 +1,3 @@
+export default function AboutPage() {
+ return
About us
+}
diff --git a/examples/using-preact/pages/index.js b/examples/using-preact/pages/index.tsx
similarity index 91%
rename from examples/using-preact/pages/index.js
rename to examples/using-preact/pages/index.tsx
index 62301b996922a2f..a0051fe32b9f817 100644
--- a/examples/using-preact/pages/index.js
+++ b/examples/using-preact/pages/index.tsx
@@ -1,6 +1,6 @@
import Link from 'next/link'
-export default function Home() {
+export default function IndexPage() {
return (
+}
diff --git a/examples/using-preact/tsconfig.json b/examples/using-preact/tsconfig.json
new file mode 100644
index 000000000000000..f83cb8071c2e46e
--- /dev/null
+++ b/examples/using-preact/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "module": "esnext",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "jsxFactory": "h",
+ "jsxFragmentFactory": "Fragment"
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/with-emotion-swc/package.json b/examples/with-emotion-swc/package.json
index 89f0df6f3f3afc9..cd16c715d0b1417 100644
--- a/examples/with-emotion-swc/package.json
+++ b/examples/with-emotion-swc/package.json
@@ -6,8 +6,8 @@
"start": "next start"
},
"dependencies": {
- "@emotion/react": "11.9.3",
- "@emotion/styled": "11.9.3",
+ "@emotion/react": "11.10.4",
+ "@emotion/styled": "11.10.4",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
diff --git a/examples/with-emotion-vanilla/package.json b/examples/with-emotion-vanilla/package.json
index 3a0c6ed052b4012..904d9083f852616 100644
--- a/examples/with-emotion-vanilla/package.json
+++ b/examples/with-emotion-vanilla/package.json
@@ -6,11 +6,11 @@
"start": "next start"
},
"devDependencies": {
- "@emotion/babel-plugin": "11.0.0"
+ "@emotion/babel-plugin": "11.10.2"
},
"dependencies": {
- "@emotion/css": "11.0.0",
- "@emotion/server": "11.0.0",
+ "@emotion/css": "11.10.0",
+ "@emotion/server": "11.10.0",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2"
diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json
index 2cad72a466819f2..b9445b646b194e3 100644
--- a/examples/with-emotion/package.json
+++ b/examples/with-emotion/package.json
@@ -6,11 +6,11 @@
"start": "next start"
},
"devDependencies": {
- "@emotion/babel-plugin": "11.0.0"
+ "@emotion/babel-plugin": "11.10.2"
},
"dependencies": {
- "@emotion/react": "11.1.1",
- "@emotion/styled": "11.0.0",
+ "@emotion/react": "11.10.4",
+ "@emotion/styled": "11.10.4",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2"
diff --git a/examples/with-mobx-state-tree-typescript/.babelrc b/examples/with-mobx-state-tree-typescript/.babelrc
deleted file mode 100644
index 1bbd4ca8f2cd90e..000000000000000
--- a/examples/with-mobx-state-tree-typescript/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["next/babel"],
- "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
-}
diff --git a/examples/with-mobx-state-tree-typescript/.gitignore b/examples/with-mobx-state-tree-typescript/.gitignore
deleted file mode 100644
index c87c9b392c0200d..000000000000000
--- a/examples/with-mobx-state-tree-typescript/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# 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*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md
index 5c169956f27c4b9..ee22d04900168bb 100644
--- a/examples/with-mobx-state-tree-typescript/README.md
+++ b/examples/with-mobx-state-tree-typescript/README.md
@@ -1,35 +1,3 @@
# MobX State Tree with TypeScript example
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach.
-
-In this example we are going to display a digital clock that updates every second. The first render is happening in the server and the date will be `00:00:00`, then the browser will take over and it will start updating the date.
-
-To illustrate SSG and SSR, go to `/ssg` and `/ssr`, those pages are using Next.js data fetching methods to get the date in the server and return it as props to the page, and then the browser will hydrate the store and continue updating the date.
-
-The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js`
-
-The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript)
-
-## 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/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
-```
-
-```bash
-yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
-```
-
-```bash
-pnpm create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+**Note:** This example has been moved to [examples/with-mobx-state-tree](../with-mobx-state-tree/)
diff --git a/examples/with-mobx-state-tree-typescript/next-env.d.ts b/examples/with-mobx-state-tree-typescript/next-env.d.ts
deleted file mode 100644
index 4f11a03dc6cc37f..000000000000000
--- a/examples/with-mobx-state-tree-typescript/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-///
-///
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-mobx-state-tree-typescript/package.json b/examples/with-mobx-state-tree-typescript/package.json
deleted file mode 100644
index 7e05b342b5063a4..000000000000000
--- a/examples/with-mobx-state-tree-typescript/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "private": true,
- "scripts": {
- "dev": "next",
- "build": "next build",
- "start": "next start"
- },
- "dependencies": {
- "mobx": "^5.9.0",
- "mobx-react": "^5.4.3",
- "mobx-react-lite": "^2.0.7",
- "mobx-state-tree": "^3.11.0",
- "next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "typescript": "^3.0.1"
- },
- "devDependencies": {
- "@babel/core": "7.14.3",
- "@babel/plugin-proposal-decorators": "^7.3.0",
- "@types/node": "^14.0.23",
- "@types/react": "^16.4.12"
- }
-}
diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md
index af8e00e1306e62d..5c169956f27c4b9 100644
--- a/examples/with-mobx-state-tree/README.md
+++ b/examples/with-mobx-state-tree/README.md
@@ -1,4 +1,4 @@
-# MobX State Tree example
+# MobX State Tree with TypeScript example
Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach.
@@ -12,24 +12,24 @@ The clock, under `components/Clock.js`, has access to the state using the `injec
## Deploy your own
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree)
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript)
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree&project-name=with-mobx-state-tree&repository-name=with-mobx-state-tree)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript)
## 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/), or [pnpm](https://pnpm.io) to bootstrap the example:
```bash
-npx create-next-app --example with-mobx-state-tree with-mobx-state-tree-app
+npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
```
```bash
-yarn create next-app --example with-mobx-state-tree with-mobx-state-tree-app
+yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
```
```bash
-pnpm create next-app --example with-mobx-state-tree with-mobx-state-tree-app
+pnpm create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-mobx-state-tree/components/Clock.js b/examples/with-mobx-state-tree/components/Clock.js
deleted file mode 100644
index cfbddeae67ab19e..000000000000000
--- a/examples/with-mobx-state-tree/components/Clock.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default function Clock(props) {
- return (
-
- {format(new Date(props.lastUpdate))}
-
-
- )
-}
-
-const format = (t) =>
- `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
-
-const pad = (n) => (n < 10 ? `0${n}` : n)
diff --git a/examples/with-mobx-state-tree-typescript/components/Clock.tsx b/examples/with-mobx-state-tree/components/Clock.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/components/Clock.tsx
rename to examples/with-mobx-state-tree/components/Clock.tsx
diff --git a/examples/with-mobx-state-tree/components/SampleComponent.js b/examples/with-mobx-state-tree/components/SampleComponent.js
deleted file mode 100644
index 4b1c7979e99552c..000000000000000
--- a/examples/with-mobx-state-tree/components/SampleComponent.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { inject, observer } from 'mobx-react'
-import Clock from './Clock'
-
-class SampleComponent extends React.Component {
- componentDidMount() {
- this.props.store.start()
- }
-
- componentWillUnmount() {
- this.props.store.stop()
- }
-
- render() {
- return (
-
-
{this.props.title}
-
-
-
- )
- }
-}
-
-export default inject('store')(observer(SampleComponent))
diff --git a/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx b/examples/with-mobx-state-tree/components/SampleComponent.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx
rename to examples/with-mobx-state-tree/components/SampleComponent.tsx
diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json
index 819eed5e194c8a4..0a2de828056cb40 100644
--- a/examples/with-mobx-state-tree/package.json
+++ b/examples/with-mobx-state-tree/package.json
@@ -6,15 +6,17 @@
"start": "next start"
},
"dependencies": {
- "mobx": "3.3.1",
- "mobx-react": "^4.0.4",
- "mobx-state-tree": "1.0.1",
+ "mobx": "^6.6.1",
+ "mobx-react": "^7.5.2",
+ "mobx-react-lite": "^3.4.0",
+ "mobx-state-tree": "^5.1.6",
"next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
- "@babel/core": "7.14.5",
- "@babel/plugin-proposal-decorators": "^7.1.2"
+ "@types/node": "^18.7.15",
+ "@types/react": "^18.0.18",
+ "typescript": "^4.8.2"
}
}
diff --git a/examples/with-mobx-state-tree/pages/_app.js b/examples/with-mobx-state-tree/pages/_app.js
deleted file mode 100644
index e75b81d85556a9b..000000000000000
--- a/examples/with-mobx-state-tree/pages/_app.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Provider } from 'mobx-react'
-import { useStore } from '../store'
-
-export default function App({ Component, pageProps }) {
- const store = useStore(pageProps.initialState)
-
- return (
-
-
-
- )
-}
diff --git a/examples/with-mobx-state-tree-typescript/pages/_app.tsx b/examples/with-mobx-state-tree/pages/_app.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/pages/_app.tsx
rename to examples/with-mobx-state-tree/pages/_app.tsx
diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js
deleted file mode 100644
index 00b3a426d77dfed..000000000000000
--- a/examples/with-mobx-state-tree/pages/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import SampleComponent from '../components/SampleComponent'
-
-export default function Home() {
- return
-}
diff --git a/examples/with-mobx-state-tree-typescript/pages/index.tsx b/examples/with-mobx-state-tree/pages/index.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/pages/index.tsx
rename to examples/with-mobx-state-tree/pages/index.tsx
diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js
deleted file mode 100644
index 64baaaeeddfba91..000000000000000
--- a/examples/with-mobx-state-tree/pages/other.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import SampleComponent from '../components/SampleComponent'
-
-export default function Other() {
- return
-}
diff --git a/examples/with-mobx-state-tree-typescript/pages/other.tsx b/examples/with-mobx-state-tree/pages/other.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/pages/other.tsx
rename to examples/with-mobx-state-tree/pages/other.tsx
diff --git a/examples/with-mobx-state-tree/pages/ssg.js b/examples/with-mobx-state-tree/pages/ssg.js
deleted file mode 100644
index 4191006042e6016..000000000000000
--- a/examples/with-mobx-state-tree/pages/ssg.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { getSnapshot } from 'mobx-state-tree'
-import SampleComponent from '../components/SampleComponent'
-import { initializeStore } from '../store'
-
-export default function Ssg() {
- return
-}
-
-// If you build and start the app, the date returned here will have the same
-// value for all requests, as this method gets executed at build time.
-export function getStaticProps() {
- const store = initializeStore()
-
- store.update()
-
- return { props: { initialState: getSnapshot(store) } }
-}
diff --git a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx b/examples/with-mobx-state-tree/pages/ssg.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/pages/ssg.tsx
rename to examples/with-mobx-state-tree/pages/ssg.tsx
diff --git a/examples/with-mobx-state-tree/pages/ssr.js b/examples/with-mobx-state-tree/pages/ssr.js
deleted file mode 100644
index 8bdb3f3e50ad106..000000000000000
--- a/examples/with-mobx-state-tree/pages/ssr.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getSnapshot } from 'mobx-state-tree'
-import SampleComponent from '../components/SampleComponent'
-import { initializeStore } from '../store'
-
-export default function Ssr() {
- return
-}
-
-// The date returned here will be different for every request that hits the page,
-// that is because the page becomes a serverless function instead of being statically
-// exported when you use `getServerSideProps` or `getInitialProps`
-export function getServerSideProps() {
- const store = initializeStore()
-
- store.update()
-
- return { props: { initialState: getSnapshot(store) } }
-}
diff --git a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx b/examples/with-mobx-state-tree/pages/ssr.tsx
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/pages/ssr.tsx
rename to examples/with-mobx-state-tree/pages/ssr.tsx
diff --git a/examples/with-mobx-state-tree/store.js b/examples/with-mobx-state-tree/store.js
deleted file mode 100644
index 879feca16f04ecc..000000000000000
--- a/examples/with-mobx-state-tree/store.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useMemo } from 'react'
-import { types, applySnapshot } from 'mobx-state-tree'
-
-let store
-
-const Store = types
- .model({
- lastUpdate: types.Date,
- light: false,
- })
- .actions((self) => {
- let timer
- function start() {
- timer = setInterval(() => {
- // mobx-state-tree doesn't allow anonymous callbacks changing data
- // pass off to another action instead
- self.update()
- }, 1000)
- }
-
- function update() {
- self.lastUpdate = Date.now()
- self.light = true
- }
-
- function stop() {
- clearInterval(timer)
- }
-
- return { start, stop, update }
- })
-
-export function initializeStore(snapshot = null) {
- const _store = store ?? Store.create({ lastUpdate: 0 })
-
- // If your page has Next.js data fetching methods that use a Mobx store, it will
- // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
- if (snapshot) {
- applySnapshot(_store, snapshot)
- }
- // For SSG and SSR always create a new store
- if (typeof window === 'undefined') return _store
- // Create the store once in the client
- if (!store) store = _store
-
- return store
-}
-
-export function useStore(initialState) {
- const store = useMemo(() => initializeStore(initialState), [initialState])
- return store
-}
diff --git a/examples/with-mobx-state-tree-typescript/store.ts b/examples/with-mobx-state-tree/store.ts
similarity index 100%
rename from examples/with-mobx-state-tree-typescript/store.ts
rename to examples/with-mobx-state-tree/store.ts
diff --git a/examples/with-mobx-state-tree-typescript/tsconfig.json b/examples/with-mobx-state-tree/tsconfig.json
similarity index 93%
rename from examples/with-mobx-state-tree-typescript/tsconfig.json
rename to examples/with-mobx-state-tree/tsconfig.json
index b5d1e2f17bbe868..e1e1e26feec7c08 100644
--- a/examples/with-mobx-state-tree-typescript/tsconfig.json
+++ b/examples/with-mobx-state-tree/tsconfig.json
@@ -13,7 +13,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
- "experimentalDecorators": true
+ "incremental": true
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
diff --git a/examples/with-mongodb/lib/mongodb.ts b/examples/with-mongodb/lib/mongodb.ts
index 7aaf63e04cec23c..9397929118bbb17 100644
--- a/examples/with-mongodb/lib/mongodb.ts
+++ b/examples/with-mongodb/lib/mongodb.ts
@@ -8,7 +8,7 @@ const uri = process.env.MONGODB_URI
const options = {}
let client
-let clientPromise
+let clientPromise: Promise
if (!process.env.MONGODB_URI) {
throw new Error('Please add your Mongo URI to .env.local')
diff --git a/examples/with-react-jss/.babelrc b/examples/with-react-jss/.babelrc
deleted file mode 100644
index 1ff94f7ed28e16b..000000000000000
--- a/examples/with-react-jss/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["next/babel"]
-}
diff --git a/examples/with-react-jss/package.json b/examples/with-react-jss/package.json
index 17ac6c57e84059a..2ee0fa0809258a1 100644
--- a/examples/with-react-jss/package.json
+++ b/examples/with-react-jss/package.json
@@ -7,8 +7,13 @@
},
"dependencies": {
"next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-jss": "^10.3.0"
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-jss": "^10.9.2"
+ },
+ "devDependencies": {
+ "@types/node": "18.7.15",
+ "@types/react": "18.0.18",
+ "typescript": "4.8.2"
}
}
diff --git a/examples/with-react-jss/pages/_app.js b/examples/with-react-jss/pages/_app.tsx
similarity index 60%
rename from examples/with-react-jss/pages/_app.js
rename to examples/with-react-jss/pages/_app.tsx
index ad98bbd6bf421fb..74b569b67fac6db 100644
--- a/examples/with-react-jss/pages/_app.js
+++ b/examples/with-react-jss/pages/_app.tsx
@@ -1,9 +1,10 @@
+import type { AppProps } from 'next/app'
import { useEffect } from 'react'
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
useEffect(() => {
const style = document.getElementById('server-side-styles')
- if (style) {
+ if (style && style.parentNode) {
style.parentNode.removeChild(style)
}
}, [])
diff --git a/examples/with-react-jss/pages/_document.js b/examples/with-react-jss/pages/_document.tsx
similarity index 87%
rename from examples/with-react-jss/pages/_document.js
rename to examples/with-react-jss/pages/_document.tsx
index 53ad6b117efe498..a20015c58ad7ba8 100644
--- a/examples/with-react-jss/pages/_document.js
+++ b/examples/with-react-jss/pages/_document.tsx
@@ -1,8 +1,8 @@
-import Document from 'next/document'
+import Document, { DocumentContext } from 'next/document'
import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss'
export default class JssDocument extends Document {
- static async getInitialProps(ctx) {
+ static async getInitialProps(ctx: DocumentContext) {
const registry = new SheetsRegistry()
const generateId = createGenerateId()
const originalRenderPage = ctx.renderPage
diff --git a/examples/with-react-jss/pages/index.js b/examples/with-react-jss/pages/index.tsx
similarity index 90%
rename from examples/with-react-jss/pages/index.js
rename to examples/with-react-jss/pages/index.tsx
index f8bafce6daad2d2..1726845c1f76837 100644
--- a/examples/with-react-jss/pages/index.js
+++ b/examples/with-react-jss/pages/index.tsx
@@ -12,7 +12,7 @@ const useStyles = createUseStyles({
},
})
-function Index() {
+export default function IndexPage() {
const classes = useStyles()
return (
@@ -23,5 +23,3 @@ function Index() {