Merge branch 'cms-builder-io-example' of github.com:teleaziz/next.js …

…into cms-builder-io-example

* 'cms-builder-io-example' of github.com:teleaziz/next.js: (22 commits)
  drop dynamic import with `ssr: false` on server-side (vercel#32606)
  next-swc: fix ssg code elimination when used in render (vercel#32709)
  Add Caveats section to custom error page (vercel#33160)
  v12.0.8-canary.20
  Allow dependencies to use environment variables in middlewares (vercel#33141)
  use a separate webpack runtime for middleware (vercel#33134)
  No info on environment variables in the src folder (vercel#33110) (vercel#33136)
  docs: minor text-copy cleanup (vercel#33120)
  Update swc (vercel#33063)
  Update next.config.js (vercel#33091)
  Adding Asset Component for Rich Text Renderer (vercel#32503)
  Update using-mdx.md (vercel#33077)
  v12.0.8-canary.19
  Fix middleware at root in standalone mode (vercel#33053)
  Add util for generating new tests/error documents (vercel#33001)
  Remove extra config from tailwind example (vercel#33062)
  Fix link for Next.js Analytics in docs (vercel#33049)
  Bump `@vercel/nft` to 0.17.2 (vercel#33048)
  Update deployment documentation. (vercel#32006)
  v12.0.8-canary.18
  ...

contributing.md

@@ -203,15 +203,8 @@ In general, all warnings and errors added should have these links attached.
 
 Below are the steps to add a new link:
 
-1. Create a new markdown file under the `errors` directory based on
-   `errors/template.md`:
-
-   ```shell
-   cp errors/template.md errors/<error-file-name>.md
-   ```
-
-2. Add the newly added file to `errors/manifest.json`
-3. Add the following url to your warning/error:
+1. Run `yarn new-error` which will create the error document and update the manifest automatically.
+2. Add the following url to your warning/error:
    `https://nextjs.org/docs/messages/<file-path-without-dotmd>`.
 
    For example, to link to `errors/api-routes-static-export.md` you use the url:

docs/advanced-features/custom-error-page.md

@@ -94,3 +94,7 @@ export default function Page({ errorCode, stars }) {
 The `Error` component also takes `title` as a property if you want to pass in a text message along with a `statusCode`.
 
 If you have a custom `Error` component be sure to import that one instead. `next/error` exports the default component used by Next.js.
+
+### Caveats
+
+- `Error` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).

docs/advanced-features/src-directory.md

@@ -11,7 +11,7 @@ The `src` directory is very common in many apps and Next.js supports it by defau
 ## Caveats
 
 - `src/pages` will be ignored if `pages` is present in the root directory
-- Config files like `next.config.js` and `tsconfig.json` should be inside the root directory, moving them to `src` won't work. Same goes for the [`public` directory](/docs/basic-features/static-file-serving.md)
+- Config files like `next.config.js` and `tsconfig.json`, as well as environment variables, should be inside the root directory, moving them to `src` won't work. Same goes for the [`public` directory](/docs/basic-features/static-file-serving.md)
 
 ## Related
 

docs/advanced-features/using-mdx.md

@@ -118,7 +118,7 @@ Checkout my React component:
 
 <MyComponent/>
 
-export default = ({ children }) => <MyLayoutComponent meta={meta}>{children}</MyLayoutComponent>
+export default ({ children }) => <MyLayoutComponent meta={meta}>{children}</MyLayoutComponent>
 ```
 
 ### Custom Elements

docs/basic-features/environment-variables.md

@@ -76,6 +76,8 @@ export async function getStaticProps() {
 > CORRECT=pre\$A
 > ```
 
+> **Note**: If you are using a `/src` folder, please note that Next.js will load the .env files **only** from the parent folder and **not** from the `/src` folder.
+
 ## Exposing Environment Variables to the Browser
 
 By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
@@ -128,11 +130,11 @@ When using the Vercel CLI to deploy make sure you add a [`.vercelignore`](https:
 
 ## Test Environment Variables
 
-Apart from `development` and `production` environments, there is a 3rd option available: `test`. In the same way you can set defaults for development or production environments, you can do the same with `.env.test` file for testing environment (though this one is not so common as the previous two).
+Apart from `development` and `production` environments, there is a 3rd option available: `test`. In the same way you can set defaults for development or production environments, you can do the same with a `.env.test` file for the `testing` environment (though this one is not as common as the previous two).
 
 This one is useful when running tests with tools like `jest` or `cypress` where you need to set specific environment vars only for testing purposes. Test default values will be loaded if `NODE_ENV` is set to `test`, though you usually don't need to do this manually as testing tools will address it for you.
 
-There is a small difference between `test` environment, and both `development` and `production` that you need to bear in mind: `.env.local` won't be loaded, as you expect tests to produce the same results for everyone. This way every test execution will use same env defaults across different executions by ignoring your `.env.local` (which is intended to override the default set).
+There is a small difference between `test` environment, and both `development` and `production` that you need to bear in mind: `.env.local` won't be loaded, as you expect tests to produce the same results for everyone. This way every test execution will use the same env defaults across different executions by ignoring your `.env.local` (which is intended to override the default set).
 
 > **Note**: similar to Default Environment Variables, `.env.test` file should be included in your repository, but `.env.test.local` shouldn't, as `.env*.local` are intended to be ignored through `.gitignore`.
 

docs/basic-features/fast-refresh.md

@@ -74,9 +74,9 @@ local state being reset on every edit to a file:
   and Hooks preserve state).
 - The file you're editing might have _other_ exports in addition to a React
   component.
-- Sometimes, a file would export the result of calling higher-order component
+- Sometimes, a file would export the result of calling a higher-order component
   like `HOC(WrappedComponent)`. If the returned component is a
-  class, state will be reset.
+  class, its state will be reset.
 - Anonymous arrow functions like `export default () => <div />;` cause Fast Refresh to not preserve local component state. For large codebases you can use our [`name-default-component` codemod](/docs/advanced-features/codemods.md#name-default-component).
 
 As more of your codebase moves to function components and Hooks, you can expect