diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index da99194581a41..57857e0a62e33 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -86,7 +86,7 @@ stages:
path: $(System.DefaultWorkingDirectory)
displayName: Cache Build
- script: |
- yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/
+ yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/ test/integration/rewrites-has-condition/
displayName: 'Run tests'
- job: test_unit
diff --git a/data.sqlite b/data.sqlite
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md
index 1b96f94179d20..24f4255df576c 100644
--- a/docs/api-reference/create-next-app.md
+++ b/docs/api-reference/create-next-app.md
@@ -18,7 +18,7 @@ yarn create next-app
- **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
- **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
### Why use Create Next App?
diff --git a/docs/api-reference/next.config.js/custom-webpack-config.md b/docs/api-reference/next.config.js/custom-webpack-config.md
index ed8faf1b61a02..6b4535c7e80f5 100644
--- a/docs/api-reference/next.config.js/custom-webpack-config.md
+++ b/docs/api-reference/next.config.js/custom-webpack-config.md
@@ -23,10 +23,6 @@ In order to extend our usage of `webpack`, you can define a function that extend
```js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
- // Note: we provide webpack above so you should not `require` it
- // Perform customizations to webpack config
- config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
-
// Important: return the modified config
return config
},
diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
index 1d5e0c5592fb5..927fc23778c27 100644
--- a/docs/api-reference/next.config.js/rewrites.md
+++ b/docs/api-reference/next.config.js/rewrites.md
@@ -25,8 +25,6 @@ Rewrites allow you to map an incoming request path to a different destination pa
Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site. In contrast, [redirects](/docs/api-reference/next.config.js/redirects.md) will reroute to a new page a show the URL changes.
-Rewrites are only available on the Node.js environment and do not affect client-side routing.
-
To use rewrites you can use the `rewrites` key in `next.config.js`:
```js
@@ -42,6 +40,8 @@ module.exports = {
}
```
+Rewrites are applied to client-side routing, a `` will have the rewrite applied in the above example.
+
`rewrites` is an async function that expects an array to be returned holding objects with `source` and `destination` properties:
- `source`: `String` - is the incoming request path pattern.
@@ -58,8 +58,8 @@ module.exports = {
return {
beforeFiles: [
// These rewrites are checked after headers/redirects
- // and before pages/public files which allows overriding
- // page files
+ // and before all files including _next/public files which
+ // allows overriding page files
{
source: '/some-page',
destination: '/somewhere-else',
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index e596719b242e8..7ce38c6b849e4 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -101,8 +101,7 @@ When `responsive`, the image will scale the dimensions down for smaller
viewports and scale up for larger viewports.
When `fill`, the image will stretch both width and height to the dimensions of
-the parent element, usually paired with
-[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+the parent element, usually paired with the [`objectFit`](#objectFit) property.
Try it out:
diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md
index cf0dbe880712e..937181cbedbcf 100644
--- a/docs/basic-features/data-fetching.md
+++ b/docs/basic-features/data-fetching.md
@@ -72,8 +72,8 @@ The `context` parameter is an object containing the following keys:
`getStaticProps` should return an object with:
-- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
-- `revalidate` - An **optional** amount in seconds after which a page re-generation can occur. More on [Incremental Static Regeneration](#incremental-static-regeneration)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `revalidate` - An **optional** amount in seconds after which a page re-generation can occur (defaults to: `false` or no revalidating). More on [Incremental Static Regeneration](#incremental-static-regeneration)
- `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
```js
@@ -672,7 +672,7 @@ The `context` parameter is an object containing the following keys:
`getServerSideProps` should return an object with:
-- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
- `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
```js
diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md
index a19908372c8ce..c4c67789ac173 100644
--- a/docs/basic-features/typescript.md
+++ b/docs/basic-features/typescript.md
@@ -127,3 +127,26 @@ export default MyApp
Next.js automatically supports the `tsconfig.json` `"paths"` and `"baseUrl"` options.
You can learn more about this feature on the [Module Path aliases documentation](/docs/advanced-features/module-path-aliases.md).
+
+## Type checking next.config.js
+
+The `next.config.js` file must be a JavaScript file as it does not get parsed by Babel or TypeScript, however you can add some type checking in your IDE using JSDoc as below:
+
+```js
+// @ts-check
+
+/**
+ * @type {import('next/dist/next-server/server/config').NextConfig}
+ **/
+const nextConfig = {
+ /* config options here */
+}
+
+module.exports = nextConfig
+```
+
+## Incremental type checking
+
+Since `v10.2.1` Next.js supports [incremental type checking](https://www.typescriptlang.org/tsconfig#incremental) when enabled in your `tsconfig.json`, this can help speed up type checking in larger applications.
+
+It is highly recommended to be on at least `v4.3.0-beta` of TypeScript to experience the best performance when leveraging this feature.
diff --git a/errors/no-img-element.md b/errors/no-img-element.md
new file mode 100644
index 0000000000000..7bc8523146ff7
--- /dev/null
+++ b/errors/no-img-element.md
@@ -0,0 +1,32 @@
+# No Img Element
+
+### Why This Error Occurred
+
+An HTML `` element was used to display an image. For better performance and automatic image optimization, use Next.js' built-in image component instead.
+
+### Possible Ways to Fix It
+
+Import and use the `` component:
+
+```jsx
+import { Image } from 'next/image'
+
+function Home() {
+ return (
+ <>
+
+
+ )
+}
+
+export default Home
+```
+
+### Useful Links
+
+- [Image Component and Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)
diff --git a/errors/no-sync-scripts.md b/errors/no-sync-scripts.md
index 4af7ef58b5211..1788236d85df1 100644
--- a/errors/no-sync-scripts.md
+++ b/errors/no-sync-scripts.md
@@ -16,7 +16,7 @@ import Script from 'next/experimental-script'
const Home = () => {
return (
-
+
Home Page
)
diff --git a/examples/cms-ghost/README.md b/examples/cms-ghost/README.md
index 13fb0d60c227a..a38bee5a6a4d7 100644
--- a/examples/cms-ghost/README.md
+++ b/examples/cms-ghost/README.md
@@ -2,7 +2,7 @@
This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Ghost](https://ghost.org/) as the data source.
-> This boilerplate demonstrates simple usage and best practices. If you are looking for a more feature richt Next.js generator for Ghost including the Casper theme,
+> This boilerplate demonstrates simple usage and best practices. If you are looking for a more feature rich Next.js generator for Ghost including the Casper theme,
> check out [next-cms-ghost](https://github.com/styxlab/next-cms-ghost).
## Deploy your own
diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
index ac40d1262d1a4..b98f6ca22612f 100644
--- a/examples/with-supertokens/package.json
+++ b/examples/with-supertokens/package.json
@@ -11,7 +11,7 @@
"next": "latest",
"react": "17.0.1",
"react-dom": "17.0.1",
- "supertokens-auth-react": "^0.12.0",
+ "supertokens-auth-react": "^0.13.0",
"supertokens-node": "^5.0.0"
},
"license": "MIT"
diff --git a/examples/with-supertokens/pages/index.js b/examples/with-supertokens/pages/index.js
index 00284df70e94c..befe0d5d5cb94 100644
--- a/examples/with-supertokens/pages/index.js
+++ b/examples/with-supertokens/pages/index.js
@@ -42,13 +42,17 @@ export default function Home(props) {
function ProtectedPage({ userId }) {
async function logoutClicked() {
await ThirdPartyEmailPassword.signOut()
- window.location.href = '/auth'
+ ThirdPartyEmailPassword.redirectToAuth()
}
async function fetchUserData() {
const res = await fetch('/api/user')
- const json = await res.json()
- alert(JSON.stringify(json))
+ if (res.status === 401) {
+ ThirdPartyEmailPassword.redirectToAuth()
+ } else {
+ const json = await res.json()
+ alert(JSON.stringify(json))
+ }
}
return (
diff --git a/examples/with-tailwindcss/pages/index.js b/examples/with-tailwindcss/pages/index.js
index 5cb31bcd3bed7..6b67e91ccd256 100644
--- a/examples/with-tailwindcss/pages/index.js
+++ b/examples/with-tailwindcss/pages/index.js
@@ -8,7 +8,7 @@ export default function Home() {
-
+