This adds a lint rule to ensure we don't import dev dependencies by accident.

@lfades hope this works. I have updated the example to show differences between client/ssr/ssg initial state in redux. Let me know if something needs to be changed.

As reported here:
https://twitter.com/vvoyer/status/1246913957899763712?s=21

### Add dynamic routes to _with-route-as-modal_ example

This PR adds [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes), [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation), and [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) to the **with-route-as-modal** example. This change might also clear up some confusion here on https://github.com/zeit/next.js/issues/11971

Additionally this PR makes sure each modal route is also a modal **page.**

This is an important distinction and makes sure the experience is the same should the URL (route) be shared as a link. In other words, `index.js` need not be the only "entrypoint" to browsing the website.

With the additions in this PR, each post page is an actual page, so if you were to share the link for **Post 3** you'd get this:

<img src="https://user-images.githubusercontent.com/7191639/82058282-25ad7780-968a-11ea-94f1-9b4a36abccf9.png" width="200px" />

(clickable outer region brings you back to the 'gallery')

**Update:** I have also included the `pathname` to signal the difference in which page component is rendered

Rather than this (previously):

<img src="https://user-images.githubusercontent.com/7191639/82058199-0878a900-968a-11ea-97d2-e9e20c9267fc.png" width="200px" />

I have used a similar approach [here 🔗](https://hashiconf.com/digital-june/schedule/the-hitchhikers-guide-to-terraform-your-infrastructure)

Netlify Plugins are out of beta!

https://www.netlify.com/blog/2020/05/27/netlify-build-plugins-are-here/

This adds `InferredStaticProps` and `InferredServerSideProps` to the typings.

- [x] add types for type inference 
- [x] add explanation to docs
- [ ] tests - are there any?

![inferred-props](https://user-images.githubusercontent.com/56154253/79068041-24bcab00-7cc4-11ea-8397-ed1b95fbeca7.gif)

### What does it do:

As an alternative to declaring your Types manually with:
```typescript
type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = () => ({
  posts: await fetchMyPosts(),
})

export const MyComponent(props: Props) =>(
 // ...
);
```

we can now also infer the prop types with
```typescript
export const getStaticProps = () => ({
  // given fetchMyPosts() returns type Post[]
  posts: await fetchMyPosts(),
})

export const MyComponent(props: InferredStaticProps<typeof getStaticProps>) =>(
 // props.posts will be of type Post[]
);

```

### help / review wanted
- [ ] I am no typescript expert. Although the solution works as intended for me, someone with more knowledge could probably improve the types. Any edge cases I missed?
- [ ] are there any tests I should modify/ add?

This pull request updates our TypeScript verification process to not wipe out potentially vital user comments.

Introducing a prompt process was mostly a side effect of users wanting to keep comments.
There's no reason we really need this prompt, as answering no would refuse to boot the Next.js server anyway.

---

Fixes #8128
Closes #11440

Co-authored-by: NJoe Haddad <joe.haddad@zeit.co>

Co-authored-by: NJoe Haddad <joe.haddad@zeit.co>

There was no period before `jsx` in the list of file types for pages. I added the period for consistency.

This adds a warning when a user has nested a reserved page `_error`, `_app`, or `_document` in their pages directory since it causes it to not be picked up and used by Next.js in the expected way

x-ref: https://github.com/zeit/next.js/pull/13425

<details>
<summary>Example of warning</summary>

<img width="927" alt="Screen Shot 2020-05-27 at 10 39 09" src="https://user-images.githubusercontent.com/22380829/83042315-24276c00-a007-11ea-9dc4-cabcc93571d2.png">
</details>

Observed here: https://github.com/zeit/next.js/pull/13434#issuecomment-634566450

1. I updated all the packages.
2. Refactored the home component from class to functional
3. Example now uses getServerSideProps instead of getInitialProps

## What

An example to show how you can create a static generated build of Next.js (using the new `getStaticProps` and `getStaticPaths` functions) with data fetched from a local GraphQL schema. The same schema is used to host a GraphQL endpoint using the API Route `/api/graphql`.

## Why

I was setting up a static hosted website whereby data is stored in a set of local JSON files (pulled from a backend server at build time). I wanted to consume the content using the developer benefits that GraphQL provides and using a consistent interface the GraphQL API consumers would be using.

Within my page components I initially made GraphQL `fetch` calls to the locally running `/api/graphql` endpoint which worked well with `npm run dev`, however when it came to `npm run build` that endpoint was inaccessible (I tried both VERCEL_URL and localhost:3000) - which is now understandable given I read further the "[Write server-side code directly](https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly)" documentation.

This example may or may not be useful for others so please feel free to close, but I thought I would contribute incase it assisted others.

## Related Discussions

It looks as though this PR may help with some of the following discussions:
  - https://github.com/zeit/next.js/discussions/12785
  - https://github.com/zeit/next.js/discussions/10946
  - https://github.com/zeit/next.js/discussions/12182
  - https://github.com/zeit/next.js/discussions/11285

## Related Examples

The end solution for this PR was a combination of web discussions and seeing the `api-routes-graphql` example. Perhaps this PR should just update that example to use the new methods? Or maybe it is worth having both?
- https://github.com/zeit/next.js/blob/canary/examples/examples/api-routes-graphql

This is also similar to this example, although that example has more code in order to provide isomorphic Apollo Client for client side code use.
- https://github.com/zeit/next.js/blob/canary/examples/api-routes-apollo-server-and-client

## Errors Recieved
I've included the below errors as they are the ones I faced when figuring out the end solution. These may just help with SEO for others googling the same issue.

### Error when trying to use localhost:3000
```
> Build error occurred
{ FetchError: request to http://localhost:3000/api/graphql failed, reason: connect ECONNREFUSED 127.0.0.1:3000
    at ClientRequest.<anonymous> (/vercel/7cf60e2b/.next/serverless/pages/content.js:1999:147829)
    at ClientRequest.emit (events.js:198:13)
    at Socket.socketErrorListener (_http_client.js:401:9)
    at Socket.emit (events.js:198:13)
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at process._tickCallback (internal/process/next_tick.js:63:19) type: 'system', errno: 'ECONNREFUSED', code: 'ECONNREFUSED' }
```

### Error when trying to use VERCEL_URL
```
> Build error occurred
{ FetchError: invalid json response body at https://vercel.com/login?next=%2Fdeployments%2Fprojectnamehere.now.sh%3Fhost%3Dprojectnamehere.now.sh%26redirect%3D1%26section%3D reason: Unexpected token < in JSON at position 0
    at /vercel/3d91c11/node_modules/next/dist/compiled/node-fetch/index.js:1:133590
    at process._tickCallback (internal/process/next_tick.js:68:7) type: 'invalid-json' }
```

This makes sure we don't duplicate the `/` route or any others while exporting with `exportTrailingSlash` enabled. We do still output `404.html` with `exportTrailingSlash` enabled in case anyone was relying on this file being present.

Fixes: https://github.com/zeit/next.js/issues/11008

This fixes an edge case where an application can seemingly randomly be opted out of the automatic static optimization from having an `_error` file that isn't directly nested under the `pages` folder e.g. `pages/hello/_error.js`. 

Since in serverless mode we use the `_app` export from the first serverless page, if this `_error.js` file is used to check for custom `getIniitalProps` in `_app` and the `_error.js` page had a custom `getInitialProps` itself it would cause the check to fail opting the application out of the static optimization. 

This fixes it by having the check be explicit instead of relying on the bundle name and it also adds regression tests for this. It might be good to also add a warning when `_error` or `_app` are not directly nested under the pages folder in a follow up PR

**Affected examples**

with-segment-analytics
with-slate
with-portals-ssr ( _with-portals-ssr is based on a package not being updated in the last year_)
with-videojs
with-next-page-transitions
with-firebase-cloud-messaging
with-dynamic-app-layout
with-dynamic-import
with-next-transition
with-carbon-components
with-cerebral
with-custom-babel-config

Here and there I have removed some redundant imports as well. I believe with this PR, there are only 1 or 2 examples left using class-based components. If by any chance you find any, let me know and I'll refactor them too.

If you don't like anything or you want me to change something, please let me know.

**If there is anything else you'd like me to help with, I would be honored to assist.**

Co-authored-by: NJoe Haddad <joe.haddad@zeit.co>

Per https://github.com/zeit/next.js/issues/12964

Removed redundant react imports from next.js/examples/with-overmind

The experimental modern mode runs the type checking plugin twice, which **occasionally** suffers from a race condition that hangs the build.

This PR fixes type checking to only be run once.

While this test cannot 100% reproduce/capture the race condition, I don't feel strongly about the test case:

- We're planning on eliminating this type checking plugin ASAP (for a faster alternative)
- Modern mode implementation as-is will probably go away with webpack 5

Closes #9990 by collecting all paths with errors during `next export` and reporting them sorted in the error summary at the end.

It will produce an output similar to:

```
    Error: Export encountered errors on following paths:
        /nested/page
        /page
        /page-1
        /page-10
        /page-11
        /page-12
        /page-13
        /page-2
        /page-3
        /page-4
        /page-5
        /page-6
        /page-7
        /page-8
        /page-9
        at _default (/app/next.js/packages/next/dist/export/index.js:19:788)
        at process._tickCallback (internal/process/next_tick.js:68:7)
```

I tested the output with the `handle-export-errors` integration test suite, but I'm not sure how to gracefully test this added output.
I thought of collecting all page source files with [recursiveReaddirSync](https://github.com/zeit/next.js/blob/2ba352da39ee00b6595aecdc9ffb2f103e803a85/packages/next/next-server/server/lib/recursive-readdir-sync.ts) but it seems I can't import it in js test files:

```
SyntaxError: /app/next.js/packages/next/next-server/server/lib/recursive-readdir-sync.ts: Unexpected token, expected "," (11:5)

       9 |  */
      10 | export function recursiveReadDirSync(
    > 11 |   dir: string,
         |      ^
      12 |   arr: string[] = [],
      13 |   rootDir = dir
      14 | ): string[] {
```

The test itself could look like:
```js
  it('Reports failing paths', async () => {
    const { stderr } = await nextBuild(appDir, [], {
      stdout: true,
      stderr: true,
    })
    const pages = []
    // collect pages to be ['/page', '/page-1', ... etc.]
    pages.forEach(page => {
      expect(stderr).toContain(page)
    })
  })
```

As discussed this adds bundling of `.env` files in `serverless` mode so that the environment values are also available when deploying with this target

closes: https://github.com/zeit/next.js/issues/13332

Fixes https://github.com/zeit/next.js/issues/12935

x-ref: #12313

Previous referencing the incorrect `Error` global.

fix #12136 

I add a prompt if there is an error when trying to download example files.
Maybe could be better to add an error class and in create-app.ts on every "console.error" trow a new Exception and manage it in catch. What you think ? 👯 

Per https://github.com/zeit/next.js/issues/12964

* with-ant-design
* with-dynamic-import
* with-iron-session
* with-monaco-editor
* with-next-page-transitions
* with-react-with-styles
* with-style-sheet
* with-why-did-you-render

Tested each example, working as intended, no additional issues presented

URL paths are case sensitive, MacOS file system is case insensitive. This PR makes sure development mode doesn't find pages that don't have the casing as specified in the URL.

Will clean up and write a test when agreed on this approach.

Fixes https://github.com/zeit/next.js/issues/8825
Fixes https://github.com/zeit/next.js/issues/8847
Fixes https://github.com/zeit/next.js/issues/9080

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