Merge branch 'canary' into prettier-trailingComma

examples/cms-agilitycms/README.md

@@ -37,7 +37,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up-
 Execute [`create-next-app`](https://github.com/zeit/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
-npm init next-app --example cms-agilitycms cms-agilitycms-app
+npx create-next-app --example cms-agilitycms cms-agilitycms-app
 # or
 yarn create next-app --example cms-agilitycms cms-agilitycms-app
 ```

examples/cms-cosmic/README.md

@@ -32,7 +32,7 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e
 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
-npm init next-app --example cms-cosmic cms-cosmic-app
+npx create-next-app --example cms-cosmic cms-cosmic-app
 # or
 yarn create next-app --example cms-cosmic cms-cosmic-app
 ```

examples/cms-graphcms/README.md

@@ -37,7 +37,7 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e
 Execute [`create-next-app`](https://github.com/zeit/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
-npm init next-app --example cms-graphcms cms-graphcms-app
+npx create-next-app --example cms-graphcms cms-graphcms-app
 # or
 yarn create next-app --example cms-graphcms cms-graphcms-app
 ```

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>
+  )
+}

examples/with-tesfy/README.md

@@ -0,0 +1,50 @@
+# Tesfy Example
+
+[Tesfy](https://tesfy.io/) allows you to create **unlimited** A/B Tests and Feature Flags for **free** using a [web app](https://app.tesfy.io/) or by your self.
+
+This example shows how to integrate [react-tesfy](https://github.com/andresz1/react-tesfy) in Next.js.
+
+To use Tesfy there are only two mandatory things needed. A `userId` and a configuration file known as `datafile`. In the `_app.js` you will notice that those are being get.
+
+The `userId` must uniquely identify a user even if not logged in, for that reason a [uuid](https://en.wikipedia.org/wiki/Universally_unique_identifier) is created and stored in a cookie so the next time a page is requested a new `userId` won't be created, instead the cookie one will be used.
+
+The `datafile` is just a `json` that defines the configuration of the experiments and features avaliable. It must be fetched from Tesfy CDN or from your own servers at least everytime a request is performed, later on this configuration could also be fetched if wanted (e.g. during page transitions).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-tesfy)
+
+## 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 with-tesfy with-tesfy-app
+# or
+yarn create next-app --example with-tesfy with-tesfy-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/with-tesfy
+cd with-tesfy
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+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)).

examples/with-tesfy/components/nav.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+const Nav = () => {
+  return (
+    <nav>
+      <Link href="/">
+        <a>Experiments</a>
+      </Link>{' '}
+      <Link href="/features">
+        <a>Features</a>
+      </Link>
+    </nav>
+  )
+}
+
+export default Nav

examples/with-tesfy/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "with-tesfy",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-tesfy": "latest",
+    "tesfy": "latest",
+    "cookie": "0.4.1",
+    "uuid": "8.1.0"
+  },
+  "license": "ISC"
+}

examples/with-tesfy/pages/_app.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { TesfyProvider, createInstance } from 'react-tesfy'
+import Nav from '../components/nav'
+
+const App = ({ Component, pageProps }) => {
+  const { datafile = {}, userId } = pageProps
+  const engine = createInstance({
+    datafile,
+    userId,
+  })
+
+  return (
+    <TesfyProvider engine={engine}>
+      <Nav />
+      <main>
+        <p>
+          Your user identifier is <b>{engine.getUserId()}</b>. Delete{' '}
+          <b>user_id</b> cookie and refresh to get a new one
+        </p>
+        <Component {...pageProps} />
+      </main>
+    </TesfyProvider>
+  )
+}
+
+export default App

examples/with-tesfy/pages/features.js

@@ -0,0 +1,23 @@
+import { Feature } from 'react-tesfy'
+import { getTesfyProps } from '../utils'
+
+export const getServerSideProps = getTesfyProps(async () => {
+  return { props: {} }
+})
+
+const FeaturesPage = () => {
+  return (
+    <>
+      <h1>Features</h1>
+
+      <section>
+        <h2>Feature 1 - Allocation</h2>
+        <Feature id="feature-1">
+          {(isEnabled) => (isEnabled ? <p>Enabled</p> : <p>Disabled</p>)}
+        </Feature>
+      </section>
+    </>
+  )
+}
+
+export default FeaturesPage

examples/with-tesfy/pages/index.js

@@ -0,0 +1,43 @@
+import { Experiment, Variation } from 'react-tesfy'
+import { getTesfyProps } from '../utils'
+
+export const getServerSideProps = getTesfyProps(async () => {
+  return { props: {} }
+})
+
+const IndexPage = () => {
+  return (
+    <>
+      <h1>Experiments</h1>
+
+      <section>
+        <h2>Experiment 1 - Allocation</h2>
+        <Experiment id="experiment-1">
+          <Variation>
+            <p style={{ color: 'yellow' }}>Yellow</p>
+          </Variation>
+          <Variation id="0">
+            <p style={{ color: 'blue' }}>Blue</p>
+          </Variation>
+          <Variation id="1">
+            <p style={{ color: 'red' }}>Red</p>
+          </Variation>
+        </Experiment>
+      </section>
+
+      <section>
+        <h2>Experiment 2 - Audience</h2>
+        <Experiment id="experiment-2" attributes={{ countryCode: 'us' }}>
+          <Variation>
+            <p style={{ fontWeight: 'bold' }}>Bold</p>
+          </Variation>
+          <Variation id="0">
+            <p>Normal</p>
+          </Variation>
+        </Experiment>
+      </section>
+    </>
+  )
+}
+
+export default IndexPage

examples/with-tesfy/utils/getDatafile.js

@@ -0,0 +1,42 @@
+// Fetch your configuration from tesfy cdn or your own server
+const getDatafile = () => {
+  return {
+    experiments: {
+      'experiment-1': {
+        id: 'experiment-1',
+        percentage: 90,
+        variations: [
+          {
+            id: '0',
+            percentage: 50,
+          },
+          {
+            id: '1',
+            percentage: 50,
+          },
+        ],
+      },
+      'experiment-2': {
+        id: 'experiment-2',
+        percentage: 100,
+        variations: [
+          {
+            id: '0',
+            percentage: 100,
+          },
+        ],
+        audience: {
+          '==': [{ var: 'countryCode' }, 'us'],
+        },
+      },
+    },
+    features: {
+      'feature-1': {
+        id: 'feature-1',
+        percentage: 50,
+      },
+    },
+  }
+}
+
+export default getDatafile

examples/with-tesfy/utils/getTesfyProps.js

@@ -0,0 +1,13 @@
+import getDatafile from './getDatafile'
+import getUserId from './getUserId'
+
+const getTesfyProps = (getServerSideProps) => async (ctx) => {
+  const datafile = getDatafile()
+  const userId = getUserId(ctx)
+
+  const data = (await getServerSideProps(ctx)) || {}
+
+  return { ...data, props: { ...data.props, datafile, userId } }
+}
+
+export default getTesfyProps