# 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
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
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](235cedcb3e). 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#22570Fixes#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:
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 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
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
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
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.
