My [draft PR was merged](https://github.com/zeit/next.js/pull/13193) so let's at least keep the code in canary in a working state. 

This waits for the render to be committed to DOM before we render the route change complete event (no longer sync in new React).

We have tests that ensure this resolves.

---

Closes #12938

Closes #13254

* Update debugging docs

* typo

* Update docs/debugging.md
Co-authored-by: NLuis Alvarez D. <luis@vercel.com>

* Update docs/debugging.md
Co-authored-by: NLuis Alvarez D. <luis@vercel.com>

* Clarify

* Move to advanced features
Co-authored-by: NLuis Alvarez D. <luis@vercel.com>

This continues https://github.com/zeit/next.js/pull/12501 and resolves the merge conflicts since we aren't able to update that branch and would like to land this change

Closes: https://github.com/zeit/next.js/pull/12501

* feature: add blog-starter-typescript

* chore: edit tailwind.config

* Fix linting
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: NTim Neutkens <timneutkens@me.com>

This PR adds support for prepending sass code before the actual entry file.

It's common for developers to import their sass mixins and variables once on their project config so they don't need to import them on every file that requires it. Frameworks like gatsby and nuxt.js already support that handy feature.

The way it works is:

```
/// next.config.js
module.exports = {
  experimental: {
    sassOptions: {
      prependData: `
        /// Scss code that you want to be
        /// prepended to every single scss file.
      `,
    },
  },
}
```

Fixes #11617 and duplicates

This new documentation page explains how to debug your backend and frontend code in Chrome DevTools/VS Code. This works perfectly with full source map support for both Node.js and React code.
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Add demo and note to with-mux-video

* Update README.md

* yarn create next-app

* create an upload show page

* create upload page to handle in-progress upload and asset when it is ready

* move things to a layout component

* add some button styling

* poll for updates intelligently by dynamically setting refreshInterval on SWR hook

* better title

* edit gitignore, add MIT license use next 'latest'

based on feedback from https://github.com/zeit/next.js/pull/12723

* add some messages and spinner to make this a little nicer

* update README with environment variables info and Mux account info

* add .now to gitignore

* cleaner uploading state - redirect to /v/:playback_id when complete

* hardset image width in footer

* remove unused styles

* adjust title font size on mobile and adjust footer height on mobile

* use upchunk 1.0.8 so we don't have to dynamically load it

* cleaner error message handling

* fix brief error from returning Router on the render

* yarn lint-fix

* update README with note about .env.local

* add min height so the layout doesn't shift after selecting a file

* set poster attribute at video element

* use getStaticProps and fallback:true to render meta tags for social sharing

* create a pages/asset/:id route that we can be on while in the preparing state

* add copy about Mux, add twitter share widget

* add flash message about video ready for playback

* call it pre-rendered instead of server-side rendered

* pre-rendering, not server-side rendering

* Next.js not NextJS

* handle asset creation errors in the UI

* call hls.destroy() when the component is unmounted

* Updated readme and renamed .env.local

* Updated description

* add suggested patch with links to source code https://github.com/zeit/next.js/pull/13120#issuecomment-632858572

* Added vercel.json

* Updated some links

* Removed Prerequisites
Co-authored-by: NLuis Alvarez <luis@vercel.com>

* Modified nextjs config so that it works with all types of fonts and images.

* Update next.config.js

* Fix code
Co-authored-by: NTim Neutkens <timneutkens@me.com>
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Currently failing because `withStyles` can't read the interface from context:


```
Unhandled Runtime Error
TypeError: Cannot read property 'createLTR' of undefined
webpack-internal:///./node_modules/react-with-styles/lib/withStyles.js (150:33)
```

Manually registering the interface resolves the issue:

```diff
diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js
index 91d09a2a9..a393572b8 100644
--- a/examples/with-react-with-styles/pages/_app.js
+++ b/examples/with-react-with-styles/pages/_app.js
@@ -2,11 +2,16 @@ import App from 'next/app'
 import React from 'react'
 import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
 import AphroditeInterface from 'react-with-styles-interface-aphrodite'
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
 
 import defaultTheme from '../defaultTheme'
 
 class MyApp extends App {
+    constructor(props) {
+        super(props);
+        ThemedStyleSheet.registerInterface(AphroditeInterface)
+    }
   render() {
     const { Component, pageProps } = this.props
```

But that's not how it is documented. I'm following up with react-with-styles to see if this is a bug.

It seems like this was supposed to use the memoized version of `pageChecker`. I also updated the function to memoize promises instead of promise results. Just in case this function ever gets called concurrently.

This matches the `dotenv` spec:
https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use

---

Closes #13015

* Install UrQL dependencies

- Created the examples folder `with-urql`
- Installed the dependencies
- Got a simple index.js page setup

* Basic UrQL example

- Connects to Pokemon GraphQL API

* Loading Pokemon list + Pokemon page

- Using `isomorphic-unfetch` because `urql` uses `window.fetch` to get data because we need to query the GraphQL API using Node (in `getStaticProps`)
- Deleted `_app.js` since we're not using UrQL to query data on the clientside
- Put all GraphQL related code in `/graphql`

* Update README for UrQL example

* Update urql casing

* Update examples/with-urql/graphql/client.js
Co-authored-by: NJoe Haddad <timer150@gmail.com>

* Update examples/with-urql/pages/index.js
Co-authored-by: NJoe Haddad <timer150@gmail.com>

* Update examples/with-urql/pages/pokemon/[name].js
Co-authored-by: NJoe Haddad <timer150@gmail.com>

* Fix linting
Co-authored-by: NTim Neutkens <tim@timneutkens.nl>
Co-authored-by: NJoe Haddad <timer150@gmail.com>
Co-authored-by: NJoe Haddad <joe.haddad@zeit.co>

cacheable-response.get expects a get(req, res) method signature:
https://www.npmjs.com/package/cacheable-response#get

Before the change:
```
curl -s  -v http://localhost:3000/blog/first 2>&1 | grep HTTP/1.1
> GET /blog/first HTTP/1.1
< HTTP/1.1 404 Not Found
```
After the change:
```
curl -s  -v http://localhost:3000/blog/first 2>&1 | grep HTTP/1.1
> GET /blog/first HTTP/1.1
< HTTP/1.1 200 OK
```

This is a partial fix of https://github.com/zeit/next.js/issues/12019 to make the example work. However it doesn't fix the error 
```
(node:62360) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
``` , which will need a change at server/next-server.ts

See related issue:
https://github.com/zeit/next.js/discussions/11525 
https://github.com/zeit/next.js/issues/11665

This issue is related to #12964 

**I changed the following examples:**
`with-zeit-fetch` 
`with-why-did-you-render`
`with-styletron`
`custom-server-fastify`
`custom-server-express`
`with-why-did-you-render`
`custom-server-hapi`
`custom-server-koa`
`custom-server-polka`
`custom-server-typescript`
`progressive-render`
`ssr-caching`
`svg-components`
`using-preact`
`with-ant-design`

This PR imports our bundled dependency instead of re-adding it to install-time.

---

Closes #13166

* Remove React redundant import on `analyze-bundles` example
Co-authored-by: NMarcus Silva <mvfsillva@gmail.com>

* Remove React redundant import on `api-routes-apollo-server-and-client-auth` example
Co-authored-by: NMarcus Silva <mvfsillva@gmail.com>

* Remove React redundant import on `custom-server` example
Co-authored-by: NMarcus Silva <mvfsillva@gmail.com>

* Remove React redundant import on `custom-server-actionhero` example
Co-authored-by: NMarcus Silva <mvfsillva@gmail.com>
Co-authored-by: NMarcus Silva <mvfsillva@gmail.com>

Again, related to [12964](https://github.com/zeit/next.js/issues/12964)

After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports.
Let me know if you want me to edit anything that you don't like.

Regards

with-typescript
with-atstroturf
with-atlaskit
with-styletron
with-styled-components-rtl
with-stylesheet
with-stomp
with-stitches-styled
with-stitches
with-slate
with-sentry-simple
with-sentry
with-segment-analytics
with-rematch
with-relay-modern
with-reflux
with-redux-wrapper
with-react-relay-network
with-react-native
with-react-multi-carousel
with-react-jss
with-react-helmet
with-react-ga
with-quill-js
with-prefetching
with-google-analytics-amp
with-google-analytics
with-framer-motion
with-flow
with-firebase-hosting
with-firebase-cloud-messaging
with-firebase-authentication
with-expo
with-dynamic-app-layout
with-draft-js
with-cxs
with-cerebral
with-ant-design-mobile
with-algolia-react-instantsearch
using-preact
progressive-render

A minor chage, that makes `.env` clickable in terminals. When Next.js starts, I am showing some variables in the terminal. To jump to the .env file, adding `./` in front of it makes it clickable.

Example:
![image](https://user-images.githubusercontent.com/18369201/80307289-5fe0d300-87c8-11ea-9ba1-781cf82bc500.png)

One disadvantage is that I am unsure how well this is supported in terminals in general (I am using VSCode's built-in one here)

Any other disadvantages?

* Add with-reason-relay example

* update gitignore

* Add missing components

* Add _app.js wrapper

* Move records to wait for results

* Update readme

* Upload schema

* Add call to query hook to get viewerData with getFragmentRefs

* Move relay env setup to seperate module

* remove unused code

* lint fixes

* prettier fix

Fixes #12042

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

https://twitter.com/timer150/status/1263689549898829829

- Mention React Fast Refresh instead of hot reloading in docs
- Added a mention of our deployment docs in the main documentation page
- replaced `npm init` with `npx`

- bug fixes in `@next/eslint-plugin-next`.
- adds rules to `recommended` config.

* Migrate PR stats into Next.js repo

* Update running prettier in local mode

Fixes #13171