Reverts vercel/next.js#20428 temporarily to move this feature into the next canary release.

# Route Announcements

## Summary
This PR improves the accessibility of NextJS's client-side navigation by announcing route changes to screen readers.

## Context
When a user who is sighted clicks on a link, they can see the content change. It's an affirmation that what the user intended to do by clicking a link actually worked! Users navigating the page via a screen-reader will not get this feedback on NextJS sites (This is an issue on many SPA-like architectures).

https://user-images.githubusercontent.com/4213649/103017382-63b02b00-44f8-11eb-9940-fb530d2d3018.mov

## Solution
Whenever there is a route change, the new `<RouteAnnouncer />` will look for a name to give the new page and then announce it! The name is found by first looking for an `h1`, falling back to `document.title`, and lastly to `pathname`. `<RouteAnnouncer />` is a visually hidden component placed within the `<AppContainer />`.

## Demo
https://user-images.githubusercontent.com/4213649/103017401-6ad73900-44f8-11eb-8050-b3e9a7e0c3f2.mov

## Inspiration
First and foremost, this PR was inspired by @marcysutton's studies and writing, [What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs
](https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/) as well as @madalynrose's [Accessible Routing](https://github.com/gatsbyjs/gatsby/pull/19290) PR for Gatsby.

There were also learnings gleaned from the conversations within #7681.

### Related Issues & PRs
- Resolves #7681
- Relates to #19963

Also put current maintainers at the top of the list.

The `path` variable must be an array of objects which has a `params` key. This code will prevent reader confusion.

This fixes index data route loading for i18n with `trailingSlash: true` enabled and also fixes prerendering `asPath` values not containing a trailingSlash when enabled. 


Fixes: https://github.com/vercel/next.js/issues/17813
Fixes: https://github.com/vercel/next.js/issues/22747

This is an example on how to use styled-jsx with content security policy.

This makes sure we don't trigger the export step if we aren't exporting any static pages during a build. This also adds an invariant to ensure we don't attempt creating a progress with 0 items.

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

changing `props: posts` to `props: { posts }`

When there is data already, the props is props: { data }
Would be better if the `props: { }` part is `props: { data }`

This adds a note to the environment variables documentation to mention how the env files can be loaded using the `@next/env` package as this has been brought up a few times. 

x-ref: https://github.com/vercel/next.js/issues/22936#issuecomment-796665303
x-ref: https://github.com/vercel/next.js/issues/17903

These messages aren't necessary in the normal course of using Next.js.  Hiding behind a flag to reduce the noise.

Set tailwindcss as a development dependency https://tailwindcss.com/docs/guides/nextjs#install-tailwind-via-npm

A number of changes here.  I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.

- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
  + `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
  + `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.

Other sundry:

- I'm missing something, probably a setup step, with the Zipkin target.  Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831).  It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative.  Is `distDir` strictly required when creating a new Telemetry object?  I didn't dig too deep here.

As noted, there are a lot of changes, so it'd be great if a reviewer could:

- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality

Closes #22570
Fixes #22574

Currently if you have `sizes` set in `next/image`, the image will likely be downloaded multiple times (usually twice) on Safari (macOS and iOS): the correct size for the viewport, and the original size specified in `src`. 

Also make sure you have "Ignore Resource Cache" disabled in the Safari Devtools when trying to reproduce:

![CleanShot 2021-03-09 at 21 05 54@2x](https://user-images.githubusercontent.com/3676859/110476820-6399f180-811d-11eb-93ec-5b2482c87884.png)

The root cause is the way Safari handles `<img>`'s attribute updates. Although React updates all the attributes one by one synchronously and programmatically, Safari will still try to fetch the resource immediately and won't wait for other DOM changes to be finished. 

That means if we set the following 3 attributes in this order: `src`, `srcSet`, `sizes`. Safari will fetch the image when `src` is set. And then once `srcSet` is there it will fetch the resource again based on it. And finally, when `sizes` is updated it might correct the resource URL again.

So the fix here is simple: by just reordering those to `sizes`, `srcSet`, `src`, it will only load the image with the correct size only once:

<img width="1498" alt="CleanShot 2021-03-09 at 21 05 30@2x" src="https://user-images.githubusercontent.com/3676859/110477852-a27c7700-811e-11eb-88dc-d6e7895f67bd.png">

Fixes #19478.

This adds an `appDir` field to the `required-server-files` manifest signifying where the app source is located. 

x-ref: https://github.com/vercel/next.js/issues/22847

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

This updates to not automatically export `/500` from `_error` if a custom `getInitialProps` is used since logic may be used inside of this method that causes the export to fail. Users can still opt-in to the static `/500` by adding a `pages/500.js` file. 

This also refactors checking `_app` for custom `getInitialProps` to outside of the static check loop to prevent a potential race condition where we could run this check multiple times un-necessarily.  

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

This PR fixed a typo in api reference.

Hiya! I was asked to add an example of how to use [Compiled](https://compiledcssinjs.com/) with Next.js, figured I might as well at it to the source 😄. Let me know if there's any changes needed.

This ensures we load all env values before loading `next.config.js` since these values can be used in there. This also updates to ensure we're testing these values are available while loading `next.config.js` so we don't regress on this. 

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

Upgrades webpack 5 to the latest version.

include scroll option documentation for router.push

Hi I saw you wrote extra async await code for command line function that doesn't need. I fixed that and code become very smaller and prettier.
![ts](https://user-images.githubusercontent.com/48912836/110254867-442c8880-7fa6-11eb-9f0f-3b853d5db94c.png)

Add note about restarting dev server on changes to tsconfig / jsconfig

This ensures we don't export `/404` during the automatic static optimization during build when the `/404` isn't static and won't be used/copied to the final output. 

x-ref: https://github.com/vercel/next.js/issues/22815

### Arabic/Hebrew RTL to `with-next-translate` Example
Added a simple example to change HTML direction based on the currently selected language

### References: 
- [#19049](https://github.com/vercel/next.js/discussions/19049)
- [#18667](https://github.com/vercel/next.js/issues/18667)