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

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 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.

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)

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

This PR adds request deduplication for `_getServerData`. If a request with the same URL is already in-flight, we don't send another new request. When a request succeeds or fails, we delete the cache.

A potential improvement this brings is, when `getServerSideProps` of a new route is slow to load, the user might keep clicking on the link which causes new requests, and the route will never update because results of old requests were ditched. Also adds a test case for this scenario.

Closes #19238.

In the current implementation, `idleTimeout` will always be thrown even if it didn't time out and `Promise.race` was resolved. This causes the error `Error: Route did not complete loading` on every route transition and Chrome Devtools will pause code execution if you have "Pause on exceptions" enabled.

This PR adds `resolvePromiseWithTimeout` which does the same thing as `Promise.race` and `idleTimeout`, but it cancels the rejection when it resolves successfully, in which case the error won't be thrown.

Fixes #21543.

This fixes the case where index page revalidation would match a dynamic page instead of the index page from the pathname not being denormalized. 

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

This ensures we load `_document` then `_app` and then the page's component in all cases which matches behavior between the serverless target and the default server target.  Additional tests to ensure this order is followed has been added to prevent regression. 

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

This updates to output server chunks to a nested folder to prevent bundling the entire folder when tracing. This also fixes the webpack 5 tests not actually using webpack 5 since https://github.com/vercel/next.js/pull/22583 since the webpack 5 enabling check didn't account for the test environment variable used to enable webpack 5. This also clears up some deprecation warnings from webpack 5 in the mini-css-extract-plugin.

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

 Making experimental script work in _document.js - Fixes for server to client transition
Adding additional test for _document.js

This pull request ensures the webpack hook is installed before an attempt is made to load the configuration.

This pull request is tested by the PnP tests, which should now be passing as a result of this change.

---

Fixes #21679

Just the conversion of config loading from sync to async from https://github.com/vercel/next.js/pull/22153

cc @Timer 

We do have a third argument on `processEnv` to customize the console instance, however `processEnv` relies on `processEnv` which also have the same argument for the same purpose but it's not forwarded from `processEnv`. 

Was there a purpose for it to be left out ? If not I would expect it to be forwarded 😄 

Closes: https://github.com/vercel/next.js/pull/21788

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

i confirmed in a personal test repo that this solves the issue of infinite 307s on root level non-default locales :)  let me know what else this needs if anything! thanks for the time/help @ijjk ❤️ 

This ensures `distDir` is set under `renderOpts` in `next-server` so that it is present when experimental `optimizeCss` is enabled. 

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

Currently, the image component doesn't handle use of the `sizes` property with `layout="fill"` and `layout="responsive"` very well for small viewports. It will never include sizes smaller than the smallest viewport (640px) in the srcset, so even if you specify `sizes="30vw"` in your image, you have to download the full-viewport-width image on small devices. 

This PR adds logic such that if you use `layout="fill"` and include a `sizes` property, the image component will include the full range of image sizes in the `srcset`.

It also includes an optimization where it finds the smallest `vw` value in the sizes value and combines that with the smallest viewport width, and uses that as the floor of the srcset. It does this so it doesn't unnecessarily increase transfer size by including ALL sizes. This is still a conservative optimization--for 95% of cases, taking the _largest_ `vw` size would work, but I don't see a way to do that without breaking a few corner cases.

The case of a sizes prop with `px` values is fixed but not optimized--though generally that case is less of a good fit for the fill or responsive layout anyway.

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