Add example for proxying upstream with custom routes (vercel#14374)

As discussed this adds an example to demonstrate how you can achieve proxying upstream requests that didn't match any pages/assets in Next.js which can be helpful in achieving incremental migration

examples/custom-routes-proxying/README.md

@@ -0,0 +1,42 @@
+# Custom Routes Proxying Example
+
+This example shows the most basic example using Next.js' new custom routes feature to proxy requests to an upstream server. We have 3 pages: `pages/index.js`, `pages/about.js`, and `pages/hello/[slug].js`. All of these pages will be matched against Next.js and any other path will be proxied to the upstream server.
+
+This approach is very helpful when you are trying to incrementally migrate your application to Next.js but still need to fallback to an existing application. You can add pages to your Next.js application one-by-one and then for non-migrated pages Next.js can proxy to the existing application until they are able to be migrated.
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example custom-routes-proxying custom-routes-proxying-app
+# or
+yarn create next-app --example custom-routes-proxying custom-routes-proxying-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-routes-proxying
+cd custom-routes-proxying
+```
+
+### Step 4. Run Next.js in development mode
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn install
+yarn dev
+```
+
+Test out visiting one of the Next.js pages https://localhost:3000/ and then a non-Next.js page like http://localhost:3000/legacy-first.html or http://localhost:3000/another-legacy.html which will be proxied to the upstream server since it doesn't match any pages/assets in Next.js.
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). Note: to deploy this example you will need to configure an existing upstream server.

examples/custom-routes-proxying/next.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  experimental: {
+    async rewrites() {
+      return [
+        // we need to define a no-op rewrite to trigger checking
+        // all pages/static files before we attempt proxying
+        {
+          source: '/:path*',
+          destination: '/:path*',
+        },
+        {
+          source: '/:path*',
+          destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
+        },
+      ]
+    },
+  },
+}

examples/custom-routes-proxying/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "custom-routes-proxying",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
+  }
+}

examples/custom-routes-proxying/pages/about.js

@@ -0,0 +1,11 @@
+import Link from 'next/link'
+export default function About() {
+  return (
+    <div>
+      <h3>This is the /about page. </h3>
+      <Link href="/">
+        <a> &larr; Back home</a>
+      </Link>
+    </div>
+  )
+}

examples/custom-routes-proxying/pages/hello/[slug].js

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function About() {
+  return (
+    <div>
+      <h3>This is the `hello/[slug]` page. slug: {useRouter().query.slug}</h3>
+      <Link href="/">
+        <a> &larr; Back home</a>
+      </Link>
+    </div>
+  )
+}

examples/custom-routes-proxying/pages/index.js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+export default function Home() {
+  return (
+    <div>
+      <h3>Hello World.</h3>
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+      <br />
+      <Link href="/hello/[slug]" as="/hello/world">
+        <a>Hello world</a>
+      </Link>
+    </div>
+  )
+}