The current dependencies of  the example "with-react-native-web" are outdated.
In this PR I updated them and tested that they run and work.

Newest current react and react-dom versions: 16.13.1
Newest current  react-native-web and babel-plugin-react-native-web versions: 0.13.14

Mainly for the people starting with this example to have the new versions since the current versions are very far from each other.
Please merge 🙏 

Follow-up #17916

Correcting type errors and organizing redundant descriptions.

This makes sure the image optimizer doesn't de-animate images by transforming them with sharp since sharp doesn't currently handle outputting animated images

x-ref: https://github.com/vercel/next.js/pull/17749

Co-authored-by: NTim Neutkens <timneutkens@me.com>
Co-authored-by: NTim Neutkens <tim@timneutkens.nl>

This PR fixes 2 issues with the mongodb example:

### 1. Fallable Caching Strategy

Calling `connectToDatabase()` multiple times before it's cached results in multiple connections being created. The latest one created was becoming the "cached" one and the others dissappear into the background.

This is now fixed by using **promise sharing** so that only one connection can ever be created.

### 2. Problematic Hot Reload

During development you can monitor your database connections and see that it continues to create more and more connections over time. Some users have reported their [databases reaching maximum connection limits](https://github.com/vercel/next.js/discussions/12229).

This is resolved by using `global` to store the cached connection. It's not ideal but it is necessary.

* Stabilize i18n fallback test

* Handle reload during hydration check

![Screenshot on VS Code](https://user-images.githubusercontent.com/12539/96300300-43fc1280-1030-11eb-89ae-dba8beeca583.png)

The only attribute that must be used with Image Component is src, but all attributes are required and TypeScript will warn you.

Unify the confusing `config.images.sizes` ([Image Optimizer](https://github.com/vercel/next.js/discussions/17141)) and `config.images.breakpoints` ([Image Component](https://github.com/vercel/next.js/discussions/16832)).

Image Optimizer only accepts the name of the width parameter as a `w`.

ref https://github.com/vercel/next.js/blob/v9.5.6-canary.3/packages/next/next-server/server/image-optimizer.ts#L71

Co-authored-by: NSteven <steven@ceriously.com>

Co-authored-by: NJJ Kasper <jj@jjsweb.site>

This makes sure the correct `initialRevalidateSeconds` field is populated in the `prerender-manifest` for non-dynamic SSG pages since they will be inserted into the `initialPageRevalidationMap` under their locale prefixed variant with `i18n` enabled

x-ref: https://github.com/vercel/next.js/pull/17370

This PR adjust the Web Vitals reporting to be called *after* rendering occurs. It used to work like this, but React's render method is no longer synchronous—so we have to do it in an effect.

Existing tests should cover this code path, and IMO it's unfeasible to test that it's invoked _after_ hydration.

Also removed the `&& ST` condition which is not relevant to Web Vitals.

* Ensure i18n support with AMP

* Fix type error

* Update size-limit

This adds the i18n config items to the routes-manifest so that they can accessed in the builder. This doesn't increment the routes-manifest version as existing value shapes haven't been modified and an additional non-breaking value is being added

x-ref: https://github.com/vercel/next.js/pull/17370

Co-authored-by: NTim Neutkens <tim@timneutkens.nl>
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

This adds the `locale` prop for `next/link` to allow transitioning between locales client-side and also allows passing the locale to `router.push/replace` via the transition options similar to `shallow` e.g. `router.push('/another', '/another, { locale: 'nl' })`

x-ref: https://github.com/vercel/next.js/pull/17370

This updates to set the `NEXT_LOCALE` cookie to the default locale when the user prefers a different locale from the default in their `accept-language` header but visits the default locale path e.g. `/en-US` with a `accept-language` preferred header of `nl` will set the `NEXT_LOCALE=en-US` header and then redirect to `/`

x-ref: https://github.com/vercel/next.js/pull/17370

Co-authored-by: NLuis Alvarez D <luis@vercel.com>
Co-authored-by: NTim Neutkens <tim@timneutkens.nl>

Co-authored-by: NTim Neutkens <timneutkens@me.com>
Co-authored-by: NTim Neutkens <tim@timneutkens.nl>

Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: NJJ Kasper <jj@jjsweb.site>
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Noticed there's an extra backslash in the example which causes an error. 

**EDIT:**

Also the promise needs to be resolved using `.toString()` before it can be returned as `content` in props.

Related issue: https://github.com/vercel/next.js/issues/10647#issuecomment-623703149

Sometimes we have both Yarn and NPM installed and want to explicitly bootstrap an app with the CLI using NPM. Having this flag documented could help people understand the package manager behavior and select NPM if that's their preference.

Fixes https://github.com/vercel/next.js/issues/17828.

This change adds a caveat to both the "Custom `App`" and "Custom `Document`" pages about how both `getStaticProps` and `getServerSideProps` aren't supported.

`higherOrderComponent(WrappedComponent)` causing the layout broken in mobile screen. 
* refer to screenshots below.


![image](https://user-images.githubusercontent.com/43801058/95730641-faaa6c80-0c97-11eb-9951-2a47b61cefad.png)
![image](https://user-images.githubusercontent.com/43801058/95730661-0138e400-0c98-11eb-9f02-b4d0676fd21b.png)

if we could make it `HOC(WrappedComponent)` it will not break the layout in mobile screen
![image](https://user-images.githubusercontent.com/43801058/95730673-04cc6b00-0c98-11eb-8782-2fa1f760f8fd.png)