diff --git a/contributing.md b/contributing.md index 8d1d05d6fe13..38b6dada03ae 100644 --- a/contributing.md +++ b/contributing.md @@ -167,9 +167,5 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ```` diff --git a/docs/advanced-features/custom-document.md b/docs/advanced-features/custom-document.md index 4408cf087f95..8af080e719d6 100644 --- a/docs/advanced-features/custom-document.md +++ b/docs/advanced-features/custom-document.md @@ -37,6 +37,12 @@ export default MyDocument ``, ``, `
` and `` are required for the page to be properly rendered. +Custom attributes are allowed as props, like `lang`: + +```jsx + +``` + The `ctx` object is equivalent to the one received in [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md#context-object), with one addition: - `renderPage`: `Function` - a callback that executes the actual React rendering logic (synchronously). It's useful to decorate this function in order to support server-rendering wrappers like Aphrodite's [`renderStatic`](https://github.com/Khan/aphrodite#server-side-rendering) diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md index adf716f1501b..547137cbb418 100644 --- a/docs/advanced-features/dynamic-import.md +++ b/docs/advanced-features/dynamic-import.md @@ -17,6 +17,8 @@ You can think of dynamic imports as another way to split your code into manageab ## Basic usage +In the following example, the module `../components/hello` will be dynamically loaded by the page: + ```jsx import dynamic from 'next/dynamic' @@ -35,14 +37,21 @@ function Home() { export default Home ``` +`DynamicComponent` will be the default component returned by `../components/hello`. It works like a regular React Component, and you can pass props to it as you normally would. + ## With named exports +If the dynamic component is not the default export, you can use a named export too. Consider the module `../components/hello.js` which has a named export `Hello`: + ```jsx -// components/hello.js export function Hello() { return

Hello!

} +``` +To dynamically import the `Hello` component, you can return it from the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) returned by [`import()`](https://github.com/tc39/proposal-dynamic-import#example), like so: + +```jsx import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => @@ -64,6 +73,8 @@ export default Home ## With custom loading component +An optional `loading` component can be added to render a loading state while the dynamic component is being loaded. For example: + ```jsx import dynamic from 'next/dynamic' diff --git a/docs/api-reference/next.config.js/build-target.md b/docs/api-reference/next.config.js/build-target.md index 7cdec149dbda..616cad6aca61 100644 --- a/docs/api-reference/next.config.js/build-target.md +++ b/docs/api-reference/next.config.js/build-target.md @@ -8,7 +8,7 @@ Next.js supports various build targets, each changing the way your application i ## `server` target -> This is the default target, however, we highly recommend the [`serverless` target](#serverless-target). The `serverless` target enforces additional constraints to keep you in the [Pit of Success](https://blog.codinghorror.com/falling-into-the-pit-of-success/). +> This is the default target, however, we highly recommend the [`serverless` target](#serverless-target). The `serverless` target enforces [additional constraints](https://rauchg.com/2020/2019-in-review#serverless-upgrades-itself) to keep you in the [Pit of Success](https://blog.codinghorror.com/falling-into-the-pit-of-success/). This target is compatible with both `next start` and [custom server](/docs/advanced-features/custom-server.md) setups (it's mandatory for a custom server). @@ -16,9 +16,11 @@ Your application will be built and deployed as a monolith. This is the default t ## `serverless` target -> Deployments to [ZEIT Now](https://zeit.co/home) will automatically enable this target. You do not need to opt-into it yourself, but you can. +> Deployments to [ZEIT Now](https://zeit.co) will automatically enable this target. You do not need to opt-into it yourself, but you can. -This target will output each page in a self-contained Serverless Function. It's only compatible with `next start` or Serverless deployment platforms (like ZEIT Now) — you cannot use the custom server API. +This target will output independent pages that don't require a monolithic server. + +It's only compatible with `next start` or Serverless deployment platforms (like [ZEIT Now](https://zeit.co)) — you cannot use the custom server API. To opt-into this target, set the following configuration in your `next.config.js`: diff --git a/docs/api-reference/next.config.js/ignoring-typescript-errors.md b/docs/api-reference/next.config.js/ignoring-typescript-errors.md index 306b77a3b878..f9f5b6ba9e4f 100644 --- a/docs/api-reference/next.config.js/ignoring-typescript-errors.md +++ b/docs/api-reference/next.config.js/ignoring-typescript-errors.md @@ -24,7 +24,7 @@ If you'd like Next.js to dangerously produce production code even when your appl > Be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous. -Open `next.config.js` and enable the `ignoreDevErrors` option in the `typescript` config: +Open `next.config.js` and enable the `ignoreBuildErrors` option in the `typescript` config: ```js module.exports = { diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md index 52ed3f450b7a..832963e96137 100644 --- a/docs/api-reference/next/link.md +++ b/docs/api-reference/next/link.md @@ -99,7 +99,7 @@ function NavLink({ href, name }) { export default NavLink ``` -> **Note:** If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `` tag directly. +> **Note**: If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `` tag directly. ## If the child is a function component diff --git a/docs/api-routes/dynamic-api-routes.md b/docs/api-routes/dynamic-api-routes.md index 88aa57a7f69e..fe700be588a8 100644 --- a/docs/api-routes/dynamic-api-routes.md +++ b/docs/api-routes/dynamic-api-routes.md @@ -19,3 +19,44 @@ export default (req, res) => { ``` Now, a request to `/api/post/abc` will respond with the text: `Post: abc`. + +### Catch all API routes + +API Routes can be extended to catch all paths by adding three dots (`...`) inside the brackets. For example: + +- `pages/api/post/[...slug].js` matches `/api/post/a`, but also `/api/post/a/b`, `/api/post/a/b/c` and so on. + +> **Note**: You can use names other than `slug`, such as: `[...param]` + +Matched parameters will be sent as a query parameter (`slug` in the example) to the page, and it will always be an array, so, the path `/api/post/a` will have the following `query` object: + +```json +{ "slug": ["a"] } +``` + +And in the case of `/api/post/a/b`, and any other matching path, new parameters will be added to the array, like so: + +```json +{ "slug": ["a", "b"] } +``` + +An API route for `pages/api/post/[...slug].js` could look like this: + +```js +export default (req, res) => { + const { + query: { slug }, + } = req + + res.end(`Post: ${slug.join(', ')}`) +} +``` + +Now, a request to `/api/post/a/b/c` will respond with the text: `Post: a, b, c`. + +## Caveats + +- Predefined API routes take precedence over dynamic API routes, and dynamic API routes over catch all API routes. Take a look at the following examples: + - `pages/api/post/create.js` - Will match `/api/post/create` + - `pages/api/post/[pid].js` - Will match `/api/post/1`, `/api/post/abc`, etc. But not `/api/post/create` + - `pages/api/post/[...slug].js` - Will match `/api/post/1/2`, `/api/post/a/b/c`, etc. But not `/api/post/create`, `/api/post/abc` diff --git a/docs/deployment.md b/docs/deployment.md index 17e82c01f762..3fbc580c636c 100644 --- a/docs/deployment.md +++ b/docs/deployment.md @@ -1,105 +1,77 @@ --- -description: Compile and deploy your Next.js app to production with ZEIT Now and other hosting alternatives. +description: Deploy your Next.js app to production with ZEIT Now and other hosting options. --- # Deployment -To go to production Next.js has a `next build` command. When run, it will compile your project and automatically apply numerous optimizations. +## ZEIT Now (Recommended) -## Prepare your package.json +The easiest way to deploy Next.js to production is to use the **[ZEIT Now platform](https://zeit.co)** from the creators of Next.js. [ZEIT Now](https://zeit.co) is an all-in-one platform with Global CDN supporting static & JAMstack deployment and Serverless Functions. -Ensure your `package.json` has the `"build"` and `"start"` scripts: - -```json -{ - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - } -} -``` - -In the case that you'd want to do a [full static export](/docs/advanced-features/static-html-export.md) of the Next.js application add `next export` to the `"build"` script: - -```json -{ - "scripts": { - "dev": "next", - "build": "next build && next export", - "start": "next start" - } -} -``` +### Getting started -## ZEIT Now +If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](http://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public. -The easiest way to deploy Next.js to production is using the [ZEIT Now platform](https://zeit.co) from the creators of Next.js. +Then, follow these steps: -### Preview deployments +1. [Sign up to ZEIT Now](https://zeit.co/signup) (no credit card is required). +2. After signing up, you’ll arrive on the [“Create a new project”](https://zeit.co/new) page. Under “From your existing code”, choose the Git provider you use and set up an integration. (Instructions: [GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) / [GitLab](https://zeit.co/docs/v2/git-integrations/zeit-now-for-gitlab) / [BitBucket](https://zeit.co/docs/v2/git-integrations/zeit-now-for-bitbucket)). +3. Once that’s set up, click “New Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything just works! +4. After importing, it’ll deploy your Next.js app and provide you with a deployment URL. Click “Visit” to see your app in production. -ZEIT Now integrates directly with GitHub, GitLab, and Bitbucket to give you a unique shareable url for every commit and every pull request. This url can be shared with customers and can be used to run integration tests against. +Congratulations! You’ve just deployed your Next.js app! If you have questions, take a look at the [ZEIT Now documentation](https://zeit.co/docs). -### Hybrid Next.js +> If you’re using a [custom server](/docs/advanced-features/custom-server.md), we strongly recommend migrating away from it (for example, by using [dynamic routing](/docs/routing/dynamic-routes.md)). If you cannot migrate, consider [other hosting options](#other-hosting-options). -The [hybrid pages](/docs/basic-features/pages.md) approach is fully supported out of the box. Meaning that every page can either use [Static Generation](/docs/basic-features/pages.md#static-generation) or [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering). +### DPS: Develop, Preview, Ship -In case of [Static Generation](/docs/basic-features/pages.md#static-generation) the page will automatically be served from the ZEIT Now Smart CDN. +Let’s talk about the workflow we recommend using. [ZEIT Now](https://zeit.co) supports what we call the **DPS** workflow: **D**evelop, **P**review, and **S**hip: -When the page is using [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) it will become an isolated serverless function automatically. This allows the page rendering to scale automatically and be independent—errors on one page won't affect another. +- **Develop:** Write code in Next.js. Keep the development server running and take advantage of its hot code reloading feature. +- **Preview:** Every time you push changes to a branch on GitHub / GitLab / BitBucket, ZEIT Now automatically creates a new deployment with a unique URL. You can view them on GitHub when you open a pull request, or under “Preview Deployments” on your project page on ZEIT Now. [Learn more about it here](https://zeit.co/features/deployment-previews). +- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `master`). ZEIT Now will automatically create a production deployment. -API routes will also become separate serverless functions that execute and scale separately from each other. +By using the DPS workflow, in addition to doing _code reviews_, you can do _deployment previews_. Each deployment creates a unique URL that can be shared or used for integration tests. -### CDN + HTTPS by default +### Optimized for Next.js -Assets (JavaScript, CSS, images, fonts etc) and Statically Generated pages are automatically served through the ZEIT Now Smart CDN, ensuring these are always served close to your users. +[ZEIT Now](https://zeit.co) is made by the creators of Next.js and has first-class support for Next.js. -HTTPS is enabled by default and doesn't require extra configuration. +For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully supported out of the box. -### Getting started +- Every page can either use [Static Generation](/docs/basic-features/pages.md#static-generation) or [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering). +- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from the [ZEIT Now Smart CDN](https://zeit.co/smart-cdn), which is blazingly fast. +- Pages that use [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) and [API routes](/docs/api-routes/introduction.md) will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely. -#### From a git repository +### Custom Domains, Environment Variables, Automatic HTTPS, and more -You can link your project in [GitHub](https://zeit.co/new), [GitLab](https://zeit.co/new), or [Bitbucket](https://zeit.co/new) through the [web interface](https://zeit.co/new). This will automatically set up deployment previews for pull requests and commits. To learn more about ZEIT Now’s Git integration, take a look at [our documentation here](https://zeit.co/docs/v2/git-integration/). +- **Custom Domains:** Once deployed on [ZEIT Now](https://zeit.co), you can assign a custom domain to your Next.js app. Take a look at [our documentation here](https://zeit.co/docs/v2/custom-domains). +- **Environment Variables:** You can also set environment variables on ZEIT Now. Take a look at [our documentation here](https://zeit.co/docs/v2/build-step#using-environment-variables-and-secrets). You can then [use those environment variables](/docs/api-reference/next.config.js/environment-variables.md) in your Next.js app. +- **Automatic HTTPS:** HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates. +- **More:** [Read our documentation](https://zeit.co/docs) to learn more about the ZEIT Now platform. -#### Through the ZEIT Now CLI +## Other hosting options -You can install [Now CLI](https://zeit.co/download) from either npm or Yarn. Using npm, run the following command from your terminal: +### Node.js Server -```bash -npm install -g now -``` +Next.js can be deployed to any hosting provider that supports Node.js. This is the approach you should take if you’re using a [custom server](/docs/advanced-features/custom-server.md). -You can deploy your application by running the following command in the root of the project directory: +Make sure your `package.json` has the `"build"` and `"start"` scripts: -```bash -now +```json +{ + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + } +} ``` -You will receive a unique link similar to the following: https://your-project.username.now.sh. - -#### Custom domains - -Once deployed on ZEIT Now, your projects can be assigned to a custom domain of your choice. To learn more, take a look at [our documentation here](https://zeit.co/docs/v2/custom-domains/). - -## Self hosting - -Next.js can be deployed to any hosting provider that supports Node.js. In order to self-host there are two commands: `next build` and `next start`. - -`next build` builds the production application in the `.next` folder. - -`next start` starts a Node.js server that supports [hybrid pages](/docs/basic-features/pages.md), serving both statically generated and server-side rendered pages. - -Generally you'll have to follow these steps to deploy to production: +`next build` builds the production application in the `.next` folder. After building, `next start` starts a Node.js server that supports [hybrid pages](/docs/basic-features/pages.md), serving both statically generated and server-side rendered pages. -- Run `npm install` -- Run `npm run build` (runs `next build`) -- Potentially copy the `.next`, `node_modules`, and `package.json` to your server. -- Run `npm run start` (runs `next start`) on the server +### Static HTML Export -In case you're doing a full static export using `next export` the steps are slightly different and don't involve using `next start`: +If you’d like to do a static HTML export of your Next.js app, follow the directions on [our documentation](/docs/advanced-features/static-html-export.md). By default, `next export` will generate an `out` directory, which can be served by any static hosting service or CDN. -- Run `npm install` -- Run `npm run build` (runs `next build && next export`) -- A `out` directory is generated by `next export` -- Copy the `out` directory to the server and make sure it's served by your server +> We strongly recommend using [ZEIT Now](https://zeit.co/) even if your Next.js app is fully static. [ZEIT Now](https://zeit.co/) is optimized to make static Next.js apps blazingly fast. `next export` works with Zero Config deployments on ZEIT Now. diff --git a/docs/getting-started.md b/docs/getting-started.md index 64155e039104..640de59dc9b1 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -17,6 +17,18 @@ The interactive course with quizzes will guide you through everything you need t ## Setup +We recommend creating a new Next.js app using `create-next-app`, which sets up everything automatically for you. To create a project, run: + +```bash +npm init next-app +# or +yarn create next-app +``` + +After the installation is complete, follow the instructions to start the development server. Try editing `pages/index.js` and see the result on your browser. + +## Manual Setup + Install `next`, `react` and `react-dom` in your project: ```bash diff --git a/docs/routing/dynamic-routes.md b/docs/routing/dynamic-routes.md index 0be3069dacd1..a8c9f9e27148 100644 --- a/docs/routing/dynamic-routes.md +++ b/docs/routing/dynamic-routes.md @@ -67,7 +67,9 @@ Client-side navigations to a dynamic route can be handled with [`next/link`](/do Dynamic routes can be extended to catch all paths by adding three dots (`...`) inside the brackets. For example: -- `pages/post/[...slug].js` matches `/post/a`, but also `post/a/b`, `post/a/b/c` and so on. +- `pages/post/[...slug].js` matches `/post/a`, but also `/post/a/b`, `/post/a/b/c` and so on. + +> **Note**: You can use names other than `slug`, such as: `[...param]` Matched parameters will be sent as a query parameter (`slug` in the example) to the page, and it will always be an array, so, the path `/post/a` will have the following `query` object: @@ -75,7 +77,7 @@ Matched parameters will be sent as a query parameter (`slug` in the example) to { "slug": ["a"] } ``` -And in the case of `post/a/b`, and any other matching path, new parameters will be added to the array, like so: +And in the case of `/post/a/b`, and any other matching path, new parameters will be added to the array, like so: ```json { "slug": ["a", "b"] } @@ -85,9 +87,10 @@ And in the case of `post/a/b`, and any other matching path, new parameters will ## Caveats -- Predefined routes take precedence over dynamic routes. Take a look at the following examples: +- Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. Take a look at the following examples: - `pages/post/create.js` - Will match `/post/create` - - `pages/post/[pid].js` - Will match `/post/1`, `/post/abc`, etc. but not `/post/create` + - `pages/post/[pid].js` - Will match `/post/1`, `/post/abc`, etc. But not `/post/create` + - `pages/post/[...slug].js` - Will match `/post/1/2`, `/post/a/b/c`, etc. But not `/post/create`, `/post/abc` - Pages that are statically optimized by [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) will be hydrated without their route parameters provided, i.e `query` will be an empty object (`{}`). After hydration, Next.js will trigger an update to your application to provide the route parameters in the `query` object. diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md index f18cff6a5c74..43c1eb1cbb61 100644 --- a/examples/active-class-name/README.md +++ b/examples/active-class-name/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/amp-first/README.md b/examples/amp-first/README.md index a3599e527efc..566bca9b6dab 100644 --- a/examples/amp-first/README.md +++ b/examples/amp-first/README.md @@ -97,8 +97,4 @@ To start the application in production mode, run: $ yarn start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/amp-story/README.md b/examples/amp-story/README.md index 816c6febe431..b704548ca7d2 100644 --- a/examples/amp-story/README.md +++ b/examples/amp-story/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/amp/README.md b/examples/amp/README.md index b828d6d6c537..3d2721beace3 100644 --- a/examples/amp/README.md +++ b/examples/amp/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-apollo-server-and-client-auth/README.md b/examples/api-routes-apollo-server-and-client-auth/README.md index a449cf4c45ff..825a0141a285 100644 --- a/examples/api-routes-apollo-server-and-client-auth/README.md +++ b/examples/api-routes-apollo-server-and-client-auth/README.md @@ -48,8 +48,4 @@ yarn dev > If you have issues installing `bcrypt`, follow this instructions: https://github.com/kelektiv/node.bcrypt.js/wiki/Installation-Instructions -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md index b1d07a06b974..7312eef050c4 100644 --- a/examples/api-routes-apollo-server-and-client/README.md +++ b/examples/api-routes-apollo-server-and-client/README.md @@ -46,8 +46,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md index ec0442b82331..efca2bb5d53a 100644 --- a/examples/api-routes-graphql/README.md +++ b/examples/api-routes-graphql/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-micro/README.md b/examples/api-routes-micro/README.md index 7fb0d0b449cd..5fb614b28e18 100644 --- a/examples/api-routes-micro/README.md +++ b/examples/api-routes-micro/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-middleware/README.md b/examples/api-routes-middleware/README.md index c11e0ff5f3a8..e50b54390176 100644 --- a/examples/api-routes-middleware/README.md +++ b/examples/api-routes-middleware/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-rest/README.md b/examples/api-routes-rest/README.md index 61902da4db29..abb365d53356 100644 --- a/examples/api-routes-rest/README.md +++ b/examples/api-routes-rest/README.md @@ -22,8 +22,4 @@ yarn create next-app --example api-routes-rest api-routes-rest-app ### Deploy to Now -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes/README.md b/examples/api-routes/README.md index 8a67988109a7..c37ff56621cf 100644 --- a/examples/api-routes/README.md +++ b/examples/api-routes/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/basic-css/README.md b/examples/basic-css/README.md index dcf18ca4e64d..1b040e404ba2 100644 --- a/examples/basic-css/README.md +++ b/examples/basic-css/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/basic-export/README.md b/examples/basic-export/README.md index 7ed82b4597b3..83abdddd3cab 100644 --- a/examples/basic-export/README.md +++ b/examples/basic-export/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md index 5de0a8b380ae..60dcc8e12d47 100644 --- a/examples/blog-starter/README.md +++ b/examples/blog-starter/README.md @@ -44,8 +44,4 @@ now dev ### Deploy -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md index b26d655e71dd..6a7e2c95c03c 100644 --- a/examples/catch-all-routes/README.md +++ b/examples/catch-all-routes/README.md @@ -48,8 +48,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [Now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-charset/README.md b/examples/custom-charset/README.md index 52436a27df0e..fdc2706b3b8d 100644 --- a/examples/custom-charset/README.md +++ b/examples/custom-charset/README.md @@ -36,8 +36,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-express/README.md b/examples/custom-server-express/README.md index 090bff8f1b2a..2c56115987ce 100644 --- a/examples/custom-server-express/README.md +++ b/examples/custom-server-express/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-fastify/README.md b/examples/custom-server-fastify/README.md index a59590ba63e5..ab8db700aa82 100644 --- a/examples/custom-server-fastify/README.md +++ b/examples/custom-server-fastify/README.md @@ -38,8 +38,4 @@ yarn dev ``` Fastify -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-hapi/README.md b/examples/custom-server-hapi/README.md index 5f69a48c9ce1..0b5d68cf6384 100644 --- a/examples/custom-server-hapi/README.md +++ b/examples/custom-server-hapi/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-koa/README.md b/examples/custom-server-koa/README.md index 7bb2f74ff6e8..5d9365cfbba6 100644 --- a/examples/custom-server-koa/README.md +++ b/examples/custom-server-koa/README.md @@ -37,11 +37,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Side note: Enabling gzip compression diff --git a/examples/custom-server-koa/package.json b/examples/custom-server-koa/package.json index 5b48c3c2657b..9102d4a8f6c2 100644 --- a/examples/custom-server-koa/package.json +++ b/examples/custom-server-koa/package.json @@ -9,7 +9,7 @@ "dependencies": { "cross-env": "^5.2.0", "koa": "^2.0.1", - "koa-router": "^7.1.0", + "@koa/router": "^8.0.7", "next": "latest", "react": "^16.7.0", "react-dom": "^16.7.0" diff --git a/examples/custom-server-koa/server.js b/examples/custom-server-koa/server.js index bd44da0c344e..20ee2c01590e 100644 --- a/examples/custom-server-koa/server.js +++ b/examples/custom-server-koa/server.js @@ -1,6 +1,6 @@ const Koa = require('koa') const next = require('next') -const Router = require('koa-router') +const Router = require('@koa/router') const port = parseInt(process.env.PORT, 10) || 3000 const dev = process.env.NODE_ENV !== 'production' diff --git a/examples/custom-server-micro/README.md b/examples/custom-server-micro/README.md index 544a2bfb6465..ef89f4f68307 100644 --- a/examples/custom-server-micro/README.md +++ b/examples/custom-server-micro/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-nodemon/README.md b/examples/custom-server-nodemon/README.md index 8c509a358123..2addd27e5e2b 100644 --- a/examples/custom-server-nodemon/README.md +++ b/examples/custom-server-nodemon/README.md @@ -33,8 +33,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-polka/README.md b/examples/custom-server-polka/README.md index 49bb96cf7581..2cb5dae21158 100644 --- a/examples/custom-server-polka/README.md +++ b/examples/custom-server-polka/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-reasonml/README.md b/examples/custom-server-reasonml/README.md index 333011f9847c..9ad89d58e190 100644 --- a/examples/custom-server-reasonml/README.md +++ b/examples/custom-server-reasonml/README.md @@ -59,8 +59,4 @@ yarn start ### Deploy the app -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server-typescript/README.md b/examples/custom-server-typescript/README.md index b77a6c48d8c5..91dc23a785fb 100644 --- a/examples/custom-server-typescript/README.md +++ b/examples/custom-server-typescript/README.md @@ -36,8 +36,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/custom-server/README.md b/examples/custom-server/README.md index 8c9e8bf7c9f5..b27f3b384c56 100644 --- a/examples/custom-server/README.md +++ b/examples/custom-server/README.md @@ -35,8 +35,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md index ec0a093d03bb..24d8fde3a791 100644 --- a/examples/data-fetch/README.md +++ b/examples/data-fetch/README.md @@ -42,8 +42,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/dynamic-routing/README.md b/examples/dynamic-routing/README.md index e5611c521fe4..93a9e3b90f45 100644 --- a/examples/dynamic-routing/README.md +++ b/examples/dynamic-routing/README.md @@ -47,8 +47,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [Now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/form-handler/README.md b/examples/form-handler/README.md index f67d64f21caa..cc606977e36e 100644 --- a/examples/form-handler/README.md +++ b/examples/form-handler/README.md @@ -33,8 +33,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/head-elements/README.md b/examples/head-elements/README.md index 72f04f159545..349d91e3fd2b 100644 --- a/examples/head-elements/README.md +++ b/examples/head-elements/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md index f6a38a2b0548..f08c47bf66a7 100644 --- a/examples/hello-world/README.md +++ b/examples/hello-world/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md index d4c50f741a7d..a7206ae7f44e 100644 --- a/examples/layout-component/README.md +++ b/examples/layout-component/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/nested-components/README.md b/examples/nested-components/README.md index 88b3c08da28a..7b74712ffefd 100644 --- a/examples/nested-components/README.md +++ b/examples/nested-components/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/only-client-render-external-dependencies/README.md b/examples/only-client-render-external-dependencies/README.md index eb268b5ab07a..1364a53bdfe4 100644 --- a/examples/only-client-render-external-dependencies/README.md +++ b/examples/only-client-render-external-dependencies/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index 1f0404503cb6..3beeebd6fe1d 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -53,8 +53,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md index 1ef82ae9821f..5cf0316d14cc 100644 --- a/examples/shared-modules/README.md +++ b/examples/shared-modules/README.md @@ -42,8 +42,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/ssr-caching/README.md b/examples/ssr-caching/README.md index 38cbc3ab12e3..d3520c0b6d48 100644 --- a/examples/ssr-caching/README.md +++ b/examples/ssr-caching/README.md @@ -38,8 +38,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md index af0ed0ad9987..f54aaceccd53 100644 --- a/examples/svg-components/README.md +++ b/examples/svg-components/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/using-nerv/README.md b/examples/using-nerv/README.md index 532a1a2fa9de..073273f3f1cb 100644 --- a/examples/using-nerv/README.md +++ b/examples/using-nerv/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/using-preact/README.md b/examples/using-preact/README.md index 2a958ec90ede..4f5d5b81bf01 100644 --- a/examples/using-preact/README.md +++ b/examples/using-preact/README.md @@ -38,8 +38,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/using-router/README.md b/examples/using-router/README.md index d14a89f9f52a..b700c81a195a 100644 --- a/examples/using-router/README.md +++ b/examples/using-router/README.md @@ -42,8 +42,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/using-with-router/README.md b/examples/using-with-router/README.md index fab07357d6c5..d4fbb5110f03 100644 --- a/examples/using-with-router/README.md +++ b/examples/using-with-router/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md index 1e3b41b0dfb2..432147b87c72 100644 --- a/examples/with-absolute-imports/README.md +++ b/examples/with-absolute-imports/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-algolia-react-instantsearch/README.md b/examples/with-algolia-react-instantsearch/README.md index 6475108ec931..5b9481e544ed 100644 --- a/examples/with-algolia-react-instantsearch/README.md +++ b/examples/with-algolia-react-instantsearch/README.md @@ -38,8 +38,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-ant-design-less/README.md b/examples/with-ant-design-less/README.md index 7f67e9495725..fc234367bc1b 100644 --- a/examples/with-ant-design-less/README.md +++ b/examples/with-ant-design-less/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md index b50208f5883c..6095efe95e8d 100644 --- a/examples/with-ant-design/README.md +++ b/examples/with-ant-design/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-antd-mobile/README.md b/examples/with-antd-mobile/README.md index 3b227d647269..c589b2a93b51 100644 --- a/examples/with-antd-mobile/README.md +++ b/examples/with-antd-mobile/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-aphrodite/README.md b/examples/with-aphrodite/README.md index 9355d63d13c6..da5b623c333b 100644 --- a/examples/with-aphrodite/README.md +++ b/examples/with-aphrodite/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-apollo-and-redux-saga/README.md b/examples/with-apollo-and-redux-saga/README.md index fef06ecd1dad..58bc50c27a06 100644 --- a/examples/with-apollo-and-redux-saga/README.md +++ b/examples/with-apollo-and-redux-saga/README.md @@ -33,11 +33,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Note: diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md index 0548ba8e8ca5..e8390b3576c1 100644 --- a/examples/with-apollo-and-redux/README.md +++ b/examples/with-apollo-and-redux/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-apollo/README.md b/examples/with-apollo/README.md index f7a21a22f6b9..f2286c78f9e8 100644 --- a/examples/with-apollo/README.md +++ b/examples/with-apollo/README.md @@ -50,8 +50,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-apollo/apolloClient.js b/examples/with-apollo/apolloClient.js new file mode 100644 index 000000000000..6f48ea6e9718 --- /dev/null +++ b/examples/with-apollo/apolloClient.js @@ -0,0 +1,18 @@ +import { ApolloClient } from 'apollo-client' +import { InMemoryCache } from 'apollo-cache-inmemory' +import { HttpLink } from 'apollo-link-http' +import fetch from 'isomorphic-unfetch' + +export default function createApolloClient(initialState, ctx) { + // The `ctx` (NextPageContext) will only be present on the server. + // use it to extract auth headers (ctx.req) or similar. + return new ApolloClient({ + ssrMode: Boolean(ctx), + link: new HttpLink({ + uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute) + credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers` + fetch, + }), + cache: new InMemoryCache().restore(initialState), + }) +} diff --git a/examples/with-apollo/lib/apollo.js b/examples/with-apollo/lib/apollo.js index 54e4e3b8c8a4..d8ffd59ce831 100644 --- a/examples/with-apollo/lib/apollo.js +++ b/examples/with-apollo/lib/apollo.js @@ -1,24 +1,94 @@ import React from 'react' -import Head from 'next/head' +import App from 'next/app' import { ApolloProvider } from '@apollo/react-hooks' -import { ApolloClient } from 'apollo-client' -import { InMemoryCache } from 'apollo-cache-inmemory' -import { HttpLink } from 'apollo-link-http' -import fetch from 'isomorphic-unfetch' +import createApolloClient from '../apolloClient' +// On the client we store the apollo client in the following variable +// this prevents the client from reinitializing between page transitions. let globalApolloClient = null /** - * Creates and provides the apolloContext - * to a next.js PageTree. Use it by wrapping - * your PageComponent via HOC pattern. - * @param {Function|Class} PageComponent - * @param {Object} [config] - * @param {Boolean} [config.ssr=true] + * Installes the apollo client on NextPageContext + * or NextAppContext. Useful if you want to use apolloClient + * inside getStaticProps, getStaticPaths or getServerProps + * @param {NextPageContext | NextAppContext} ctx */ -export function withApollo(PageComponent, { ssr = true } = {}) { +export const initOnContext = ctx => { + const inAppContext = Boolean(ctx.ctx) + + // We consider installing `withApollo({ ssr: true })` on global App level + // as antipattern since it disables project wide Automatic Static Optimization. + if (process.env.NODE_ENV === 'development') { + if (inAppContext) { + console.warn( + 'Warning: You have opted-out of Automatic Static Optimization due to `withApollo` in `pages/_app`.\n' + + 'Read more: https://err.sh/next.js/opt-out-auto-static-optimization\n' + ) + } + } + + // Initialize ApolloClient if not already done + const apolloClient = + ctx.apolloClient || + initApolloClient(ctx.apolloState || {}, inAppContext ? ctx.ctx : ctx) + + // To avoid calling initApollo() twice in the server we send the Apollo Client as a prop + // to the component, otherwise the component would have to call initApollo() again but this + // time without the context, once that happens the following code will make sure we send + // the prop as `null` to the browser + apolloClient.toJSON = () => null + + // Add apolloClient to NextPageContext & NextAppContext + // This allows us to consume the apolloClient inside our + // custom `getInitialProps({ apolloClient })`. + ctx.apolloClient = apolloClient + if (inAppContext) { + ctx.ctx.apolloClient = apolloClient + } + + return ctx +} + +/** + * Always creates a new apollo client on the server + * Creates or reuses apollo client in the browser. + * @param {NormalizedCacheObject} initialState + * @param {NextPageContext} ctx + */ +const initApolloClient = (initialState, ctx) => { + // Make sure to create a new client for every server-side request so that data + // isn't shared between connections (which would be bad) + if (typeof window === 'undefined') { + return createApolloClient(initialState, ctx) + } + + // Reuse client on the client-side + if (!globalApolloClient) { + globalApolloClient = createApolloClient(initialState, ctx) + } + + return globalApolloClient +} + +/** + * Creates a withApollo HOC + * that provides the apolloContext + * to a next.js Page or AppTree. + * @param {Object} withApolloOptions + * @param {Boolean} [withApolloOptions.ssr=false] + * @returns {(PageComponent: ReactNode) => ReactNode} + */ +export const withApollo = ({ ssr = false } = {}) => PageComponent => { const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => { - const client = apolloClient || initApolloClient(apolloState) + let client + if (apolloClient) { + // Happens on: getDataFromTree & next.js ssr + client = apolloClient + } else { + // Happens on: next.js csr + client = initApolloClient(apolloState, undefined) + } + return ( @@ -30,108 +100,72 @@ export function withApollo(PageComponent, { ssr = true } = {}) { if (process.env.NODE_ENV !== 'production') { const displayName = PageComponent.displayName || PageComponent.name || 'Component' - - if (displayName === 'App') { - console.warn('This withApollo HOC only works with PageComponents.') - } - WithApollo.displayName = `withApollo(${displayName})` } if (ssr || PageComponent.getInitialProps) { WithApollo.getInitialProps = async ctx => { - const { AppTree } = ctx - - // Initialize ApolloClient, add it to the ctx object so - // we can use it in `PageComponent.getInitialProp`. - const apolloClient = (ctx.apolloClient = initApolloClient()) + const inAppContext = Boolean(ctx.ctx) + const { apolloClient } = initOnContext(ctx) // Run wrapped getInitialProps methods let pageProps = {} if (PageComponent.getInitialProps) { pageProps = await PageComponent.getInitialProps(ctx) + } else if (inAppContext) { + pageProps = await App.getInitialProps(ctx) } // Only on the server: if (typeof window === 'undefined') { + const { AppTree } = ctx // When redirecting, the response is finished. // No point in continuing to render if (ctx.res && ctx.res.finished) { return pageProps } - // Only if ssr is enabled - if (ssr) { + // Only if dataFromTree is enabled + if (ssr && AppTree) { try { - // Run all GraphQL queries + // Import `@apollo/react-ssr` dynamically. + // We don't want to have this in our client bundle. const { getDataFromTree } = await import('@apollo/react-ssr') - await getDataFromTree( - - ) + + // Since AppComponents and PageComponents have different context types + // we need to modify their props a little. + let props + if (inAppContext) { + props = { ...pageProps, apolloClient } + } else { + props = { pageProps: { ...pageProps, apolloClient } } + } + + // Take the Next.js AppTree, determine which queries are needed to render, + // and fetch them. This method can be pretty slow since it renders + // your entire AppTree once for every query. Check out apollo fragments + // if you want to reduce the number of rerenders. + // https://www.apollographql.com/docs/react/data/fragments/ + await getDataFromTree() } catch (error) { // Prevent Apollo Client GraphQL errors from crashing SSR. // Handle them in components via the data.error prop: // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error console.error('Error while running `getDataFromTree`', error) } - - // getDataFromTree does not call componentWillUnmount - // head side effect therefore need to be cleared manually - Head.rewind() } } - // Extract query data from the Apollo store - const apolloState = apolloClient.cache.extract() - return { ...pageProps, - apolloState, + // Extract query data from the Apollo store + apolloState: apolloClient.cache.extract(), + // Provide the client for ssr. As soon as this payload + // gets JSON.stringified it will remove itself. + apolloClient: ctx.apolloClient, } } } return WithApollo } - -/** - * Always creates a new apollo client on the server - * Creates or reuses apollo client in the browser. - * @param {Object} initialState - */ -function initApolloClient(initialState) { - // Make sure to create a new client for every server-side request so that data - // isn't shared between connections (which would be bad) - if (typeof window === 'undefined') { - return createApolloClient(initialState) - } - - // Reuse client on the client-side - if (!globalApolloClient) { - globalApolloClient = createApolloClient(initialState) - } - - return globalApolloClient -} - -/** - * Creates and configures the ApolloClient - * @param {Object} [initialState={}] - */ -function createApolloClient(initialState = {}) { - // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient - return new ApolloClient({ - ssrMode: typeof window === 'undefined', // Disables forceFetch on the server (so queries are only run once) - link: new HttpLink({ - uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute) - credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers` - fetch, - }), - cache: new InMemoryCache().restore(initialState), - }) -} diff --git a/examples/with-apollo/package.json b/examples/with-apollo/package.json index 3718e480056b..82a42c03fb8a 100644 --- a/examples/with-apollo/package.json +++ b/examples/with-apollo/package.json @@ -7,13 +7,13 @@ "start": "next start" }, "dependencies": { - "@apollo/react-hooks": "3.0.0", - "@apollo/react-ssr": "3.0.0", - "apollo-cache-inmemory": "1.6.3", - "apollo-client": "2.6.4", - "apollo-link-http": "1.5.15", + "@apollo/react-hooks": "3.1.3", + "@apollo/react-ssr": "3.1.3", + "apollo-cache-inmemory": "1.6.5", + "apollo-client": "2.6.8", + "apollo-link-http": "1.5.16", "graphql": "^14.0.2", - "graphql-tag": "2.10.1", + "graphql-tag": "2.10.3", "isomorphic-unfetch": "^3.0.0", "next": "latest", "prop-types": "^15.6.2", diff --git a/examples/with-apollo/pages/about.js b/examples/with-apollo/pages/about.js index d8bbe18afcb3..01290e995b08 100644 --- a/examples/with-apollo/pages/about.js +++ b/examples/with-apollo/pages/about.js @@ -1,7 +1,7 @@ import App from '../components/App' import Header from '../components/Header' -export default () => ( +const AboutPage = () => (
@@ -41,3 +41,5 @@ export default () => (
) + +export default AboutPage diff --git a/examples/with-apollo/pages/client-only.js b/examples/with-apollo/pages/client-only.js index 1866c0941bf5..445e956d8d71 100644 --- a/examples/with-apollo/pages/client-only.js +++ b/examples/with-apollo/pages/client-only.js @@ -26,7 +26,4 @@ const ClientOnlyPage = props => ( ) -export default withApollo(ClientOnlyPage, { - // Disable apollo ssr fetching in favour of automatic static optimization - ssr: false, -}) +export default withApollo()(ClientOnlyPage) diff --git a/examples/with-apollo/pages/index.js b/examples/with-apollo/pages/index.js index fd7361809593..93e8d42fecaa 100644 --- a/examples/with-apollo/pages/index.js +++ b/examples/with-apollo/pages/index.js @@ -5,7 +5,7 @@ import Submit from '../components/Submit' import PostList from '../components/PostList' import { withApollo } from '../lib/apollo' -const IndexPage = props => ( +const IndexPage = () => (
@@ -26,4 +26,4 @@ const IndexPage = props => ( ) -export default withApollo(IndexPage) +export default withApollo({ ssr: true })(IndexPage) diff --git a/examples/with-app-layout/README.md b/examples/with-app-layout/README.md index e0adb09c81c5..dbf481c3a9a2 100644 --- a/examples/with-app-layout/README.md +++ b/examples/with-app-layout/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-asset-imports/README.md b/examples/with-asset-imports/README.md index 02581a94d54e..cc5d865a1b54 100644 --- a/examples/with-asset-imports/README.md +++ b/examples/with-asset-imports/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Note diff --git a/examples/with-astroturf/README.md b/examples/with-astroturf/README.md index e54040b61909..2c4d5be6a2a5 100644 --- a/examples/with-astroturf/README.md +++ b/examples/with-astroturf/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-babel-macros/README.md b/examples/with-babel-macros/README.md index 01fb45ed4d17..7edafbd2726f 100644 --- a/examples/with-babel-macros/README.md +++ b/examples/with-babel-macros/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Note diff --git a/examples/with-carbon-components/README.md b/examples/with-carbon-components/README.md index 1b2d22ff7f75..e422bd851e42 100644 --- a/examples/with-carbon-components/README.md +++ b/examples/with-carbon-components/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-cerebral/README.md b/examples/with-cerebral/README.md index 54ab93610c33..8079ddec38c1 100644 --- a/examples/with-cerebral/README.md +++ b/examples/with-cerebral/README.md @@ -71,8 +71,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md index ba1b43bd40e4..aca0ee1f19f9 100644 --- a/examples/with-chakra-ui/README.md +++ b/examples/with-chakra-ui/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-componentdidcatch/README.md b/examples/with-componentdidcatch/README.md index 885d91ed7eb8..19194f8971ea 100644 --- a/examples/with-componentdidcatch/README.md +++ b/examples/with-componentdidcatch/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-configured-preset-env/README.md b/examples/with-configured-preset-env/README.md index 1f197df05b0b..5d760634af53 100644 --- a/examples/with-configured-preset-env/README.md +++ b/examples/with-configured-preset-env/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md index 7f8126d24da6..56e542c331c5 100644 --- a/examples/with-context-api/README.md +++ b/examples/with-context-api/README.md @@ -47,8 +47,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-cookie-auth-fauna/README.md b/examples/with-cookie-auth-fauna/README.md index 973f5baab352..8fc7b80ebd6d 100644 --- a/examples/with-cookie-auth-fauna/README.md +++ b/examples/with-cookie-auth-fauna/README.md @@ -62,8 +62,4 @@ We'll use [now](https://zeit.co/now) to deploy our app, first we need to add the now secrets add fauna-secret-key "ENTER YOUR FAUNA SERVER KEY" ``` -Then deploy it to the cloud: - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-cookie-auth/README.md b/examples/with-cookie-auth/README.md index bf0d012e4dec..9e64c07fb6e5 100644 --- a/examples/with-cookie-auth/README.md +++ b/examples/with-cookie-auth/README.md @@ -49,8 +49,4 @@ $ (with-cookie-auth/) yarn dev ### Deploy -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-custom-babel-config/README.md b/examples/with-custom-babel-config/README.md index d230bd981a38..8c0ae6b026cc 100644 --- a/examples/with-custom-babel-config/README.md +++ b/examples/with-custom-babel-config/README.md @@ -45,8 +45,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-cxs/README.md b/examples/with-cxs/README.md index f3aae99bb662..91c25209b92b 100644 --- a/examples/with-cxs/README.md +++ b/examples/with-cxs/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-data-prefetch/README.md b/examples/with-data-prefetch/README.md deleted file mode 100644 index bb85bfc7307c..000000000000 --- a/examples/with-data-prefetch/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# Example app with prefetching data - -Next.js lets you prefetch the JS code of another page just adding the `prefetch` prop to `next/link`. This can help you avoid the download time a new page you know beforehand the user is most probably going to visit. - -In the example we'll extend the `Link` component to also run the `getInitialProps` (if it's defined) of the new page and save the resulting props on cache. When the user visits the page it will load the props from cache and avoid any request. - -It uses `sessionStorage` as cache but it could be replaced with any other more specialized system. Like IndexedDB or just an in-memory API with a better cache strategy to prune old cache and force new fetching. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-data-prefetch) - -## How to use - -### Using `create-next-app` - -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 with-data-prefetch with-data-prefetch-app -# or -yarn create next-app --example with-data-prefetch with-data-prefetch-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-data-prefetch -cd with-data-prefetch -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` - -## Note - -This example is based on the [ScaleAPI article explaining this same technique](https://www.scaleapi.com/blog/increasing-the-performance-of-dynamic-next-js-websites). - -**Note**: it only works in production environment. In development Next.js just avoid doing the prefetch. diff --git a/examples/with-data-prefetch/components/link.js b/examples/with-data-prefetch/components/link.js deleted file mode 100644 index cbc8fa95ca53..000000000000 --- a/examples/with-data-prefetch/components/link.js +++ /dev/null @@ -1,70 +0,0 @@ -import PropTypes from 'prop-types' -import Link from 'next/link' -import Router from 'next/router' -import { execOnce, warn } from 'next/dist/lib/utils' -import exact from 'prop-types-exact' -import { format, resolve, parse } from 'url' - -export const prefetch = async href => { - // if we're running server side do nothing - if (typeof window === 'undefined') return - - const url = typeof href !== 'string' ? format(href) : href - - const parsedHref = resolve(window.location.pathname, url) - - const { query, pathname } = typeof href !== 'string' ? href : parse(url, true) - - const Component = await Router.prefetch(parsedHref) - - // if Component exists and has getInitialProps - // fetch the component props (the component should save it in cache) - if (Component && Component.getInitialProps) { - const ctx = { pathname, query, isVirtualCall: true } - await Component.getInitialProps(ctx) - } -} - -// extend default next/link to customize the prefetch behaviour -export default class LinkWithData extends Link { - // re defined Link propTypes to add `withData` - static propTypes = exact({ - href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, - as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - prefetch: PropTypes.bool, - replace: PropTypes.bool, - shallow: PropTypes.bool, - passHref: PropTypes.bool, - scroll: PropTypes.bool, - children: PropTypes.oneOfType([ - PropTypes.element, - (props, propName) => { - const value = props[propName] - - if (typeof value === 'string') { - execOnce(warn)( - `Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of ` - ) - } - - return null - }, - ]).isRequired, - withData: PropTypes.bool, // our custom prop - }) - - // our custom prefetch method - async prefetch() { - // if the prefetch prop is not defined do nothing - if (!this.props.prefetch) return - - // if withData prop is defined - // prefetch with data - // otherwise just prefetch the page - if (this.props.withData) { - prefetch(this.props.href) - } else { - super.prefetch() - } - } -} diff --git a/examples/with-data-prefetch/package.json b/examples/with-data-prefetch/package.json deleted file mode 100644 index d801914456b5..000000000000 --- a/examples/with-data-prefetch/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "isomorphic-unfetch": "^2.0.0", - "next": "latest", - "prop-types": "^15.6.0", - "prop-types-exact": "^1.1.1", - "react": "^16.7.0", - "react-dom": "^16.7.0" - } -} diff --git a/examples/with-data-prefetch/pages/article.js b/examples/with-data-prefetch/pages/article.js deleted file mode 100644 index 58efb46db13c..000000000000 --- a/examples/with-data-prefetch/pages/article.js +++ /dev/null @@ -1,67 +0,0 @@ -import { Component } from 'react' -import fetch from 'isomorphic-unfetch' -import { format } from 'url' - -export default class Article extends Component { - static async getInitialProps({ req, query, pathname, isVirtualCall }) { - const url = format({ pathname, query }) - - // if we're not running server side - // get the props from sessionStorage using the pathname + query as key - // if we got something return it as an object - if (!req) { - const props = window.sessionStorage.getItem(url) - if (props) { - return JSON.parse(props) - } - } - - // fetch data as usual - const responses = await Promise.all([ - fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}`), - fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}/comments`), - ]) - - const [article, comments] = await Promise.all( - responses.map(response => response.json()) - ) - - const user = await fetch( - `https://jsonplaceholder.typicode.com/users/${article.userId}` - ).then(response => response.json()) - - const props = { article, comments, user } - - // if the method is being called by our Link component - // save props on sessionStorage using the full url (pathname + query) - // as key and the serialized props as value - if (isVirtualCall) { - window.sessionStorage.setItem(url, JSON.stringify(props)) - } - - return props - } - - render() { - const { article, comments, user } = this.props - - return ( -
-

{article.title}

- -

{article.body}

-
    - {comments.map(comment => ( -
  • - {comment.body} -
    - By {comment.name} -
    • - ))} -
-
- ) - } -} diff --git a/examples/with-data-prefetch/pages/index.js b/examples/with-data-prefetch/pages/index.js deleted file mode 100644 index e65ef8f4e892..000000000000 --- a/examples/with-data-prefetch/pages/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import Link, { prefetch } from '../components/link' - -// we just render a list of 3 articles having 2 with prefetched data -export default () => ( -
-

Next.js - with data prefetch example

- -
-) diff --git a/examples/with-dotenv/README.md b/examples/with-dotenv/README.md index c02e791fa139..7e6480052930 100644 --- a/examples/with-dotenv/README.md +++ b/examples/with-dotenv/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Note diff --git a/examples/with-draft-js/README.md b/examples/with-draft-js/README.md index fb6a1af74c77..2e9c1eb1b208 100644 --- a/examples/with-draft-js/README.md +++ b/examples/with-draft-js/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-dynamic-app-layout/README.md b/examples/with-dynamic-app-layout/README.md index 8ea3628800de..83205636d57e 100644 --- a/examples/with-dynamic-app-layout/README.md +++ b/examples/with-dynamic-app-layout/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md index 041b23c0f3ed..29ebeae8a8ab 100644 --- a/examples/with-dynamic-import/README.md +++ b/examples/with-dynamic-import/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-emotion-10/README.md b/examples/with-emotion-10/README.md index d26d7af368b3..9a085455f878 100644 --- a/examples/with-emotion-10/README.md +++ b/examples/with-emotion-10/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-emotion-11/README.md b/examples/with-emotion-11/README.md index f7cce4726caa..a826427817a1 100644 --- a/examples/with-emotion-11/README.md +++ b/examples/with-emotion-11/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-emotion/README.md b/examples/with-emotion/README.md index 6a2a534d6d2b..d064395f3754 100644 --- a/examples/with-emotion/README.md +++ b/examples/with-emotion/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-env-from-next-config-js/README.md b/examples/with-env-from-next-config-js/README.md index 9084bbdaeb34..c78fd84dd4d8 100644 --- a/examples/with-env-from-next-config-js/README.md +++ b/examples/with-env-from-next-config-js/README.md @@ -47,11 +47,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). > ## Special note > diff --git a/examples/with-external-styled-jsx-sass/README.md b/examples/with-external-styled-jsx-sass/README.md index 7909f55652dd..23773fb819e5 100644 --- a/examples/with-external-styled-jsx-sass/README.md +++ b/examples/with-external-styled-jsx-sass/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md index 40a53aa84117..c6182d6e85f2 100755 --- a/examples/with-fela/README.md +++ b/examples/with-fela/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-firebase-authentication-serverless/README.md b/examples/with-firebase-authentication-serverless/README.md index bc46159573db..5166b6178c48 100644 --- a/examples/with-firebase-authentication-serverless/README.md +++ b/examples/with-firebase-authentication-serverless/README.md @@ -38,13 +38,9 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). -```bash -now -``` - -After `now` successfully deploys, a URL will for your site will be displayed. Copy that URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list. +After deploying, copy the deployment URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list. ## The idea behind the example diff --git a/examples/with-firebase-authentication/README.md b/examples/with-firebase-authentication/README.md index 5b175adaafaf..f43da148d4fe 100644 --- a/examples/with-firebase-authentication/README.md +++ b/examples/with-firebase-authentication/README.md @@ -52,10 +52,6 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). -```bash -now -``` - -After `now` successfully deploys, a URL will for your site will be displayed. Copy that URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list. +After deploying, copy the deployment URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list. diff --git a/examples/with-firebase-cloud-messaging/README.md b/examples/with-firebase-cloud-messaging/README.md index 645724ced447..8605e1004db0 100644 --- a/examples/with-firebase-cloud-messaging/README.md +++ b/examples/with-firebase-cloud-messaging/README.md @@ -37,11 +37,7 @@ yarn dev set your `messagingSenderId` in `static/firebase-messaging-sw.js` and `utils/webPush.js` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## How to send a notification diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md index b651d479a5bf..93cf465ba0f0 100644 --- a/examples/with-flow/README.md +++ b/examples/with-flow/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-framer-motion/README.md b/examples/with-framer-motion/README.md index 0db2bfd88551..ee9ffc20915c 100644 --- a/examples/with-framer-motion/README.md +++ b/examples/with-framer-motion/README.md @@ -39,8 +39,4 @@ npm run build npm start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-freactal/README.md b/examples/with-freactal/README.md index 159bc5d1e5c1..02baeda05343 100644 --- a/examples/with-freactal/README.md +++ b/examples/with-freactal/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### example app diff --git a/examples/with-glamor/README.md b/examples/with-glamor/README.md index ea803ab5840b..dd8358a5991d 100644 --- a/examples/with-glamor/README.md +++ b/examples/with-glamor/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-glamorous/README.md b/examples/with-glamorous/README.md index 8e29d0439093..57bbe83a09c8 100644 --- a/examples/with-glamorous/README.md +++ b/examples/with-glamorous/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-google-analytics-amp/README.md b/examples/with-google-analytics-amp/README.md index 4b121cdfbbe8..1da4b87daa6d 100644 --- a/examples/with-google-analytics-amp/README.md +++ b/examples/with-google-analytics-amp/README.md @@ -36,8 +36,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-google-analytics/README.md b/examples/with-google-analytics/README.md index c60df262e894..58a857007cc3 100644 --- a/examples/with-google-analytics/README.md +++ b/examples/with-google-analytics/README.md @@ -36,8 +36,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-graphql-faunadb/README.md b/examples/with-graphql-faunadb/README.md index 42fa330ebde3..9db1f9fc5905 100644 --- a/examples/with-graphql-faunadb/README.md +++ b/examples/with-graphql-faunadb/README.md @@ -67,8 +67,4 @@ Make sure to leave us a guestbook message in our [live demo](https://with-graphq ### Deploy -Deploy it to the cloud with [now](https://zeit.co/now)! [Install now](https://zeit.co/download) on your development machine before proceeding: - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-graphql-hooks/README.md b/examples/with-graphql-hooks/README.md index 350e7da7bf64..d3080545a629 100644 --- a/examples/with-graphql-hooks/README.md +++ b/examples/with-graphql-hooks/README.md @@ -45,8 +45,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-graphql-react/README.md b/examples/with-graphql-react/README.md index 94874af0f2cf..1a90b7773fc0 100644 --- a/examples/with-graphql-react/README.md +++ b/examples/with-graphql-react/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-grommet/README.md b/examples/with-grommet/README.md index 6df92ccf0fb1..ca2cb0b60e50 100644 --- a/examples/with-grommet/README.md +++ b/examples/with-grommet/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Try it on CodeSandbox diff --git a/examples/with-hashed-statics/README.md b/examples/with-hashed-statics/README.md index 78c1f24c5185..6bdb3c848a3f 100644 --- a/examples/with-hashed-statics/README.md +++ b/examples/with-hashed-statics/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md index 8ae6ea93895d..fb64d155b16c 100644 --- a/examples/with-higher-order-component/README.md +++ b/examples/with-higher-order-component/README.md @@ -40,9 +40,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) -([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-http2/README.md b/examples/with-http2/README.md index 4d1a48b607db..7e945481db7c 100644 --- a/examples/with-http2/README.md +++ b/examples/with-http2/README.md @@ -40,8 +40,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-http2/next.config.js b/examples/with-http2/next.config.js new file mode 100644 index 000000000000..a50ddf389e47 --- /dev/null +++ b/examples/with-http2/next.config.js @@ -0,0 +1,6 @@ +module.exports = { + /* this needs to be set to false until a bug in the compression npm module gets fixed. +reference: https://github.com/expressjs/compression/issues/122 + */ + compress: false, +} diff --git a/examples/with-immutable-redux-wrapper/README.md b/examples/with-immutable-redux-wrapper/README.md index 9f0760e5f26b..65234f7d0f27 100644 --- a/examples/with-immutable-redux-wrapper/README.md +++ b/examples/with-immutable-redux-wrapper/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-ioc/README.md b/examples/with-ioc/README.md index 391e853f33bc..3a35c2602ab7 100644 --- a/examples/with-ioc/README.md +++ b/examples/with-ioc/README.md @@ -37,8 +37,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md index d23447a8f362..64629bc0c546 100644 --- a/examples/with-kea/README.md +++ b/examples/with-kea/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-linaria/README.md b/examples/with-linaria/README.md index 248e9586b980..0ef6a6ed05c7 100644 --- a/examples/with-linaria/README.md +++ b/examples/with-linaria/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-lingui/README.md b/examples/with-lingui/README.md index 5c4058e65b23..2a1feac7b1e9 100644 --- a/examples/with-lingui/README.md +++ b/examples/with-lingui/README.md @@ -43,11 +43,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### How to add more translated strings diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md index 9b0463a16570..16a3a20dc304 100644 --- a/examples/with-loading/README.md +++ b/examples/with-loading/README.md @@ -47,8 +47,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md index ca41b800c31b..18b55d21a7a4 100644 --- a/examples/with-markdown/README.md +++ b/examples/with-markdown/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md index 5790a1a3bf6f..ea8713e308ba 100644 --- a/examples/with-mdx/README.md +++ b/examples/with-mdx/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-mobx-keystone-typescript/README.md b/examples/with-mobx-keystone-typescript/README.md index cb5d6c2684a5..a79916185b14 100644 --- a/examples/with-mobx-keystone-typescript/README.md +++ b/examples/with-mobx-keystone-typescript/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-mobx-react-lite/README.md b/examples/with-mobx-react-lite/README.md index 18dea1de3547..57dd6da7d23d 100644 --- a/examples/with-mobx-react-lite/README.md +++ b/examples/with-mobx-react-lite/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md index 5ea9a8158c9b..30f4609795ff 100644 --- a/examples/with-mobx-state-tree-typescript/README.md +++ b/examples/with-mobx-state-tree-typescript/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index 4379ea24083e..ef83a00d7025 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md index 31ae05c42e28..806d0a236611 100644 --- a/examples/with-mobx/README.md +++ b/examples/with-mobx/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-netlify-cms/README.md b/examples/with-netlify-cms/README.md index 3322c374471d..bc88e0e9dcc8 100644 --- a/examples/with-netlify-cms/README.md +++ b/examples/with-netlify-cms/README.md @@ -33,11 +33,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## How it works diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md index f7e5983c9c60..d462629b03bd 100644 --- a/examples/with-next-css/README.md +++ b/examples/with-next-css/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-less/README.md b/examples/with-next-less/README.md index bc298d10f6f5..d0051f8c7f17 100644 --- a/examples/with-next-less/README.md +++ b/examples/with-next-less/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-offline/README.md b/examples/with-next-offline/README.md index 8f256c529c43..ea3bc829913e 100644 --- a/examples/with-next-offline/README.md +++ b/examples/with-next-offline/README.md @@ -65,8 +65,4 @@ yarn start ### Deploy -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-page-transitions/README.md b/examples/with-next-page-transitions/README.md index 703cde461173..b7b0c321e7a1 100644 --- a/examples/with-next-page-transitions/README.md +++ b/examples/with-next-page-transitions/README.md @@ -39,8 +39,4 @@ npm run build npm start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-routes/README.md b/examples/with-next-routes/README.md index a6cec8dd9276..d4825848fea7 100644 --- a/examples/with-next-routes/README.md +++ b/examples/with-next-routes/README.md @@ -35,8 +35,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md index a7bdee16fa9c..74a6e9540fbb 100644 --- a/examples/with-next-sass/README.md +++ b/examples/with-next-sass/README.md @@ -49,8 +49,4 @@ yarn build yarn start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-seo/README.md b/examples/with-next-seo/README.md index bedaa7082504..692dfc3a1887 100644 --- a/examples/with-next-seo/README.md +++ b/examples/with-next-seo/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-noscript/README.md b/examples/with-noscript/README.md index de5e3b32127d..9bc59cf84834 100644 --- a/examples/with-noscript/README.md +++ b/examples/with-noscript/README.md @@ -63,8 +63,4 @@ yarn run build yarn start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-now-env/README.md b/examples/with-now-env/README.md index b44a64f92792..820ec576bb23 100644 --- a/examples/with-now-env/README.md +++ b/examples/with-now-env/README.md @@ -37,10 +37,6 @@ Start the development server with [now](https://zeit.co/now) ([download](https:/ now dev ``` -Deploy it to the cloud with `now`: +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). -```bash -now -``` - -keep in mind that in order to deploy the app to `now` the env [secrets](https://zeit.co/docs/getting-started/secrets) defined in `now.json` should be listed in your account. +Keep in mind that in order to deploy the app to ZEIT Now the env [secrets](https://zeit.co/docs/getting-started/secrets) defined in `now.json` should be listed in your account. diff --git a/examples/with-office-ui-fabric-react/README.md b/examples/with-office-ui-fabric-react/README.md index 59c707b5ef46..c8fe9ee26fd0 100644 --- a/examples/with-office-ui-fabric-react/README.md +++ b/examples/with-office-ui-fabric-react/README.md @@ -33,8 +33,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-orbit-components/README.md b/examples/with-orbit-components/README.md index 0ddd9c6d3ce4..96fd9cf091a8 100644 --- a/examples/with-orbit-components/README.md +++ b/examples/with-orbit-components/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-overmind/README.md b/examples/with-overmind/README.md index bcf8058f5e74..5f7faf27e9aa 100644 --- a/examples/with-overmind/README.md +++ b/examples/with-overmind/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-patternfly/README.md b/examples/with-patternfly/README.md index 77cdd7e9ee02..ca8cae909af9 100644 --- a/examples/with-patternfly/README.md +++ b/examples/with-patternfly/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-pkg/README.md b/examples/with-pkg/README.md index e729cfb89a89..681fe9f96dea 100644 --- a/examples/with-pkg/README.md +++ b/examples/with-pkg/README.md @@ -39,8 +39,4 @@ Execute the binary file: PORT=4000 ./dist/with-pkg-macos ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md index e7f8355c5a70..e0dfcd78f6e3 100644 --- a/examples/with-polyfills/README.md +++ b/examples/with-polyfills/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-portals-ssr/README.md b/examples/with-portals-ssr/README.md index 316bc24176b5..3a72c6fc5887 100644 --- a/examples/with-portals-ssr/README.md +++ b/examples/with-portals-ssr/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md index 2bf739eea8b1..116298d28635 100644 --- a/examples/with-portals/README.md +++ b/examples/with-portals/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-prefetching/README.md b/examples/with-prefetching/README.md index faa1ec58cb43..0e90df63a20b 100644 --- a/examples/with-prefetching/README.md +++ b/examples/with-prefetching/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-pretty-url-routing/README.md b/examples/with-pretty-url-routing/README.md index c521f503fe76..f271efd5677f 100644 --- a/examples/with-pretty-url-routing/README.md +++ b/examples/with-pretty-url-routing/README.md @@ -36,8 +36,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-quill-js/README.md b/examples/with-quill-js/README.md index 7b0f85e20925..dde1727ef084 100644 --- a/examples/with-quill-js/README.md +++ b/examples/with-quill-js/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-rbx-bulma-pro/README.md b/examples/with-rbx-bulma-pro/README.md index 2e98007e3548..dd86e698a535 100644 --- a/examples/with-rbx-bulma-pro/README.md +++ b/examples/with-rbx-bulma-pro/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-ga/README.md b/examples/with-react-ga/README.md index 26ab3d134782..74fcd7986789 100644 --- a/examples/with-react-ga/README.md +++ b/examples/with-react-ga/README.md @@ -40,8 +40,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md index 8d810a7610de..e6d28f4adf82 100644 --- a/examples/with-react-helmet/README.md +++ b/examples/with-react-helmet/README.md @@ -45,8 +45,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md index 0169286b036d..b046a181db3e 100644 --- a/examples/with-react-intl/README.md +++ b/examples/with-react-intl/README.md @@ -33,11 +33,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Features of this example app diff --git a/examples/with-react-jss/README.md b/examples/with-react-jss/README.md index 7b68e4ee6365..6bf4d7a27956 100644 --- a/examples/with-react-jss/README.md +++ b/examples/with-react-jss/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-md/README.md b/examples/with-react-md/README.md index 8040f0abcecb..3590a7ffe6ed 100644 --- a/examples/with-react-md/README.md +++ b/examples/with-react-md/README.md @@ -45,8 +45,4 @@ ln -f -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css public yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-multi-carousel/README.md b/examples/with-react-multi-carousel/README.md index 442005bc0750..1d1d493a6bb7 100644 --- a/examples/with-react-multi-carousel/README.md +++ b/examples/with-react-multi-carousel/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## How does it work with ssr? diff --git a/examples/with-react-native-web/README.md b/examples/with-react-native-web/README.md index 862ce0d3a7b6..cac6c0fac01c 100644 --- a/examples/with-react-native-web/README.md +++ b/examples/with-react-native-web/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-relay-network-modern/README.md b/examples/with-react-relay-network-modern/README.md index 140ba5aca01e..986d3056e001 100644 --- a/examples/with-react-relay-network-modern/README.md +++ b/examples/with-react-relay-network-modern/README.md @@ -65,8 +65,4 @@ npm run dev yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md index cd7389398abf..86bf473a83c1 100644 --- a/examples/with-react-toolbox/README.md +++ b/examples/with-react-toolbox/README.md @@ -43,8 +43,4 @@ yarn dev Notice that `yarn toolbox` (or `npm run toolbox`) should be rerun every time the `"reactToolbox"` configuration in `package.json` is changed, in order to update `/theme.js` and `public/theme.css`. The `"reactToolbox"` configuration includes styling, and the list of react-toolbox components to include. -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-useragent/README.md b/examples/with-react-useragent/README.md index 1030108a0f56..ec5777a8c195 100644 --- a/examples/with-react-useragent/README.md +++ b/examples/with-react-useragent/README.md @@ -46,8 +46,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-uwp/README.md b/examples/with-react-uwp/README.md index dfc0832c0b70..f8ae5c42a05d 100644 --- a/examples/with-react-uwp/README.md +++ b/examples/with-react-uwp/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md index d42efd9413f8..d5fcf54360d0 100644 --- a/examples/with-react-with-styles/README.md +++ b/examples/with-react-with-styles/README.md @@ -45,8 +45,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-reasonml-todo/README.md b/examples/with-reasonml-todo/README.md index 6b2123030d2d..78165889e331 100644 --- a/examples/with-reasonml-todo/README.md +++ b/examples/with-reasonml-todo/README.md @@ -61,11 +61,7 @@ yarn build yarn start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Recommendation: diff --git a/examples/with-reasonml/README.md b/examples/with-reasonml/README.md index 9b81da431eca..cff3b1b1577c 100644 --- a/examples/with-reasonml/README.md +++ b/examples/with-reasonml/README.md @@ -55,11 +55,7 @@ yarn build yarn start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Recommendation: diff --git a/examples/with-rebass/README.md b/examples/with-rebass/README.md index 5f69c0aa03ab..0efb499fcd33 100644 --- a/examples/with-rebass/README.md +++ b/examples/with-rebass/README.md @@ -43,8 +43,4 @@ ln -f -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css static yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-recompose/README.md b/examples/with-recompose/README.md index 04e5b3d5db68..876fbcab4412 100644 --- a/examples/with-recompose/README.md +++ b/examples/with-recompose/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-redux-code-splitting/README.md b/examples/with-redux-code-splitting/README.md index b1472ce3e1c9..35e296e338a9 100644 --- a/examples/with-redux-code-splitting/README.md +++ b/examples/with-redux-code-splitting/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-redux-observable/README.md b/examples/with-redux-observable/README.md index 6a5141eda9db..0278ed2fb0dc 100644 --- a/examples/with-redux-observable/README.md +++ b/examples/with-redux-observable/README.md @@ -45,11 +45,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Notes diff --git a/examples/with-redux-persist/README.md b/examples/with-redux-persist/README.md index 3280cdfa1e18..329a09003d93 100644 --- a/examples/with-redux-persist/README.md +++ b/examples/with-redux-persist/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-redux-reselect-recompose/README.md b/examples/with-redux-reselect-recompose/README.md index 719cc3a28ee5..8c4e43db6eee 100644 --- a/examples/with-redux-reselect-recompose/README.md +++ b/examples/with-redux-reselect-recompose/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-redux-saga/README.md b/examples/with-redux-saga/README.md index 559ad98d7710..696029f4d76b 100644 --- a/examples/with-redux-saga/README.md +++ b/examples/with-redux-saga/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-redux-thunk/README.md b/examples/with-redux-thunk/README.md index 14815e93f1cf..81929373b263 100644 --- a/examples/with-redux-thunk/README.md +++ b/examples/with-redux-thunk/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-redux-wrapper/README.md b/examples/with-redux-wrapper/README.md index af6181bfbd7e..4bd166e92a32 100644 --- a/examples/with-redux-wrapper/README.md +++ b/examples/with-redux-wrapper/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-redux/README.md b/examples/with-redux/README.md index c30b12da6cb7..029b8ffea07b 100644 --- a/examples/with-redux/README.md +++ b/examples/with-redux/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-reflux/README.md b/examples/with-reflux/README.md index 9209715f0e31..2c08614a2e91 100644 --- a/examples/with-reflux/README.md +++ b/examples/with-reflux/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-refnux/README.md b/examples/with-refnux/README.md index a27c75edaf44..cc7d8a32e8be 100644 --- a/examples/with-refnux/README.md +++ b/examples/with-refnux/README.md @@ -40,11 +40,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-relay-modern-server-express/README.md b/examples/with-relay-modern-server-express/README.md index 728b04165293..dad55edb9f7d 100644 --- a/examples/with-relay-modern-server-express/README.md +++ b/examples/with-relay-modern-server-express/README.md @@ -43,8 +43,4 @@ npm run dev yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-relay-modern/README.md b/examples/with-relay-modern/README.md index 7d5c6610280a..1dee3de8f5f8 100644 --- a/examples/with-relay-modern/README.md +++ b/examples/with-relay-modern/README.md @@ -65,8 +65,4 @@ npm run dev yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-rematch/README.md b/examples/with-rematch/README.md index f719485b3e24..43a086aff225 100644 --- a/examples/with-rematch/README.md +++ b/examples/with-rematch/README.md @@ -38,11 +38,7 @@ npm install npm run dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Directory structure diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md index dd9d0a0ea524..adfdec8df784 100644 --- a/examples/with-segment-analytics/README.md +++ b/examples/with-segment-analytics/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-semantic-ui/README.md b/examples/with-semantic-ui/README.md index f6932440c8fb..1826722c669b 100644 --- a/examples/with-semantic-ui/README.md +++ b/examples/with-semantic-ui/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-sentry-simple/README.md b/examples/with-sentry-simple/README.md index fc03c60afae0..5109f11dda06 100644 --- a/examples/with-sentry-simple/README.md +++ b/examples/with-sentry-simple/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [Now](https://zeit.co/now) ([Download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## About Example diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md index 5ab1e777340c..11f74fa467e3 100644 --- a/examples/with-sentry/README.md +++ b/examples/with-sentry/README.md @@ -34,11 +34,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Configuration diff --git a/examples/with-shallow-routing/README.md b/examples/with-shallow-routing/README.md index bed84dd2ac28..8846cbcba7db 100644 --- a/examples/with-shallow-routing/README.md +++ b/examples/with-shallow-routing/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-sitemap-and-robots-express-server/README.md b/examples/with-sitemap-and-robots-express-server/README.md index 414e3f368fe2..463a0f254f32 100644 --- a/examples/with-sitemap-and-robots-express-server/README.md +++ b/examples/with-sitemap-and-robots-express-server/README.md @@ -36,11 +36,7 @@ yarn yarn start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes @@ -60,5 +56,3 @@ In case you want to deploy this example, replace the URL in the following locati - `ROOT_URL` in `server/app.js` - `Sitemap` at the bottom of `robots.txt` - `alias` in `now.json` - -Deploy with `now` or with `yarn now` if you specified `alias` in `now.json` diff --git a/examples/with-slate/README.md b/examples/with-slate/README.md index db37d2db532f..a0f23c2bd4fa 100644 --- a/examples/with-slate/README.md +++ b/examples/with-slate/README.md @@ -36,8 +36,4 @@ npm install npm run dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-stencil/README.md b/examples/with-stencil/README.md index ae0be5300067..4d7ccc1a1873 100644 --- a/examples/with-stencil/README.md +++ b/examples/with-stencil/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). > Choose `packages/web-app` as root directory when deploying. diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md index 8b3f06192ba1..552e328850e0 100644 --- a/examples/with-storybook/README.md +++ b/examples/with-storybook/README.md @@ -49,13 +49,4 @@ npm run build-storybook yarn build-storybook ``` -Deploy Storybook to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -npm run build-storybook -# or -yarn build-storybook -# then -cd storybook-static -now -``` +You can use [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy Storybook. Specify `storybook-static` as the output directory. diff --git a/examples/with-strict-csp-hash/README.md b/examples/with-strict-csp-hash/README.md index 7cf4aa51c428..06d0cbb61ac0 100644 --- a/examples/with-strict-csp-hash/README.md +++ b/examples/with-strict-csp-hash/README.md @@ -43,8 +43,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-strict-csp/README.md b/examples/with-strict-csp/README.md index 5a290eacba71..bc381a4a4afa 100644 --- a/examples/with-strict-csp/README.md +++ b/examples/with-strict-csp/README.md @@ -35,8 +35,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-stripe-typescript/.env.example b/examples/with-stripe-typescript/.env.example new file mode 100644 index 000000000000..577acb094240 --- /dev/null +++ b/examples/with-stripe-typescript/.env.example @@ -0,0 +1,4 @@ +# Stripe keys +STRIPE_PUBLISHABLE_KEY=pk_12345 +STRIPE_SECRET_KEY=sk_12345 +STRIPE_WEBHOOK_SECRET=whsec_1234 diff --git a/examples/with-stripe-typescript/.gitignore b/examples/with-stripe-typescript/.gitignore new file mode 100644 index 000000000000..e623a2ddab55 --- /dev/null +++ b/examples/with-stripe-typescript/.gitignore @@ -0,0 +1,13 @@ +.env +.DS_Store +.vscode + +# Node files +node_modules/ + +# Typescript +dist + +# Next.js +.next +.now \ No newline at end of file diff --git a/examples/with-stripe-typescript/README.md b/examples/with-stripe-typescript/README.md new file mode 100644 index 000000000000..43dab5b83022 --- /dev/null +++ b/examples/with-stripe-typescript/README.md @@ -0,0 +1,142 @@ +# Example using Stripe with TypeScript and react-stripe-js + +- Demo: https://nextjs-typescript-react-stripe-js.now.sh/ +- CodeSandbox: https://codesandbox.io/s/github/stripe-samples/nextjs-typescript-react-stripe-js +- Tutorial: https://dev.to/thorwebdev/type-safe-payments-with-next-js-typescript-and-stripe-4jo7 + +This is a full-stack TypeScript example using: + +- Frontend: + - Next.js and [SWR](https://github.com/zeit/swr) + - [react-stripe-js](https://github.com/stripe/react-stripe-js) for [Checkout](https://stripe.com/checkout) and [Elements](https://stripe.com/elements) +- Backend + - Next.js [API routes](https://nextjs.org/docs/api-routes/introduction) + - [stripe-node with TypeScript](https://github.com/stripe/stripe-node#usage-with-typescript) + +**Demo** + +See the sample [live](https://nextjs-typescript-react-stripe-js.now.sh/) or [fork](https://codesandbox.io/s/github/stripe-samples/nextjs-typescript-react-stripe-js) on CodeSandbox. + +The demo is running in test mode -- use `4242424242424242` as a test card number with any CVC + future expiration date. + +Use the `4000000000003220` test card number to trigger a 3D Secure challenge flow. + +Read more about testing on Stripe at https://stripe.com/docs/testing. + +
Checkout Demo +A gif of the Checkout payment page. +
+ +
Elements Demo +A gif of the custom Elements checkout page. +
+ +### Included functionality + +- [Global CSS styles](https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets) +- Making `.env` variables available to next: [next.config.js](next.config.js) + - **Note**: When deploying with Now you need to [add your secrets](https://zeit.co/docs/v2/serverless-functions/env-and-secrets) and specify a [now.json](/now.json) file. +- Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via `loadStripe` helper: [components/Layout.tsx](components/Layout.tsx). +- Stripe Checkout + - Custom Amount Donation with redirect to Stripe Checkout: + - Frontend: [pages/donate-with-checkout.tsx](pages/donate-with-checkout.tsx) + - Backend: [pages/api/checkout_sessions/](pages/api/checkout_sessions/) + - Checkout payment result page that uses [SWR](https://github.com/zeit/swr) hooks to fetch the CheckoutSession status from the API route: [pages/result.tsx](pages/result.tsx). +- Stripe Elements + - Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect): + - Frontend: [pages/donate-with-elements.tsx](pages/donate-with-checkout.tsx) + - Backend: [pages/api/payment_intents/](pages/api/payment_intents/) +- Webhook handling for [post-payment events](https://stripe.com/docs/payments/accept-a-payment#web-fulfillment) + - By default Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach our API route, we need to add `micro-cors` and [verify the webhook signature](https://stripe.com/docs/webhooks/signatures) of the event. All of this happens in [pages/api/webhooks/index.ts](pages/api/webhooks/index.ts). +- Helpers + - [utils/api-helpers.ts](utils/api-helpers.ts) + - helpers for GET and POST requests. + - [utils/stripe-helpers.ts](utils/stripe-helpers.ts) + - Format amount strings properly using `Intl.NumberFormat`. + - Format amount for usage with Stripe, including zero decimal currency detection. + +## How to use + +### Using `create-next-app` + +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 with-stripe-typescript with-stripe-typescript-app +# or +yarn create next-app --example with-stripe-typescript with-stripe-typescript-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stripe-typescript +cd with-stripe-typescript +``` + +### Required configuration + +Copy the `.env.example` file into a file named `.env` in the root directory of this project: + +```bash +cp .env.example .env +``` + +You will need a Stripe account ([register](https://dashboard.stripe.com/register)) to run this sample. Go to the Stripe [developer dashboard](https://stripe.com/docs/development#api-keys) to find your API keys and replace them in the `.env` file. + +```bash +STRIPE_PUBLISHABLE_KEY= +STRIPE_SECRET_KEY= +``` + +Now install the dependencies and start the development server. + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +### Forward webhooks to your local dev server + +First [install the CLI](https://stripe.com/docs/stripe-cli) and [link your Stripe account](https://stripe.com/docs/stripe-cli#link-account). + +Next, start the webhook forwarding: + +```bash +stripe listen --forward-to localhost:3000/api/webhooks +``` + +The CLI will print a webhook secret key to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env` file. + +### Deploy + +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +**Note**: You must add your Stripe secrets using the ZEIT Now CLI ([Download here](https://zeit.co/download)): + +```bash +now secrets add stripe_publishable_key pk_*** +now secrets add stripe_secret_key sk_*** +now secrets add stripe_webhook_secret whsec_*** +``` + +After deploying, copy the deployment URL with the webhook path (`https://your-url.now.sh/api/webhooks`) and create a live webhook endpoint [in your Stripe dashboard](https://stripe.com/docs/webhooks/setup#configure-webhook-settings). + +**Note**: Your live webhook will have a different secret. To update it in your deployed application you will need to first remove the existing secret and then add the new secret: + +```bash +now secrets rm stripe_webhook_secret +now secrets add stripe_webhook_secret whsec_*** +``` + +As the secrets are set as env vars in the project at deploy time, we will need to redeploy our app after we made changes to the secrets. + +### Authors + +- [@thorsten-stripe](https://twitter.com/thorwebdev) +- [@lfades](https://twitter.com/luis_fades) diff --git a/examples/with-stripe-typescript/components/CheckoutForm.tsx b/examples/with-stripe-typescript/components/CheckoutForm.tsx new file mode 100644 index 000000000000..3844523570ec --- /dev/null +++ b/examples/with-stripe-typescript/components/CheckoutForm.tsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react' + +import CustomDonationInput from '../components/CustomDonationInput' + +import { fetchPostJSON } from '../utils/api-helpers' +import { formatAmountForDisplay } from '../utils/stripe-helpers' +import * as config from '../config' + +import { useStripe } from '@stripe/react-stripe-js' + +const CheckoutForm: React.FunctionComponent = () => { + const [input, setInput] = useState({ + customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP), + }) + const stripe = useStripe() + + const handleInputChange: React.ChangeEventHandler = e => + setInput({ + ...input, + [e.currentTarget.name]: e.currentTarget.value, + }) + + const handleSubmit: React.FormEventHandler = async e => { + e.preventDefault() + // Create a Checkout Session. + const response = await fetchPostJSON('/api/checkout_sessions', { + amount: input.customDonation, + }) + + if (response.statusCode === 500) { + console.error(response.message) + return + } + + // Redirect to Checkout. + const { error } = await stripe!.redirectToCheckout({ + // Make the id field from the Checkout Session creation API response + // available to this file, so you can provide it as parameter here + // instead of the {{CHECKOUT_SESSION_ID}} placeholder. + sessionId: response.id, + }) + // If `redirectToCheckout` fails due to a browser or network + // error, display the localized error message to your customer + // using `error.message`. + console.warn(error.message) + } + + return ( +
+ + + + ) +} + +export default CheckoutForm diff --git a/examples/with-stripe-typescript/components/CustomDonationInput.tsx b/examples/with-stripe-typescript/components/CustomDonationInput.tsx new file mode 100644 index 000000000000..ffc64839807c --- /dev/null +++ b/examples/with-stripe-typescript/components/CustomDonationInput.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import { formatAmountForDisplay } from '../utils/stripe-helpers' + +type Props = { + name: string + value: number + min: number + max: number + currency: string + step: number + onChange: (e: React.ChangeEvent) => void + className?: string +} + +const CustomDonationInput: React.FunctionComponent = ({ + name, + value, + min, + max, + currency, + step, + onChange, + className, +}) => ( + +) + +export default CustomDonationInput diff --git a/examples/with-stripe-typescript/components/ElementsForm.tsx b/examples/with-stripe-typescript/components/ElementsForm.tsx new file mode 100644 index 000000000000..0b02f10ec1f3 --- /dev/null +++ b/examples/with-stripe-typescript/components/ElementsForm.tsx @@ -0,0 +1,172 @@ +import React, { useState } from 'react' + +import CustomDonationInput from '../components/CustomDonationInput' +import PrintObject from '../components/PrintObject' + +import { fetchPostJSON } from '../utils/api-helpers' +import { formatAmountForDisplay } from '../utils/stripe-helpers' +import * as config from '../config' + +import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js' + +const CARD_OPTIONS = { + iconStyle: 'solid' as const, + style: { + base: { + iconColor: '#6772e5', + color: '#6772e5', + fontWeight: '500', + fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif', + fontSize: '16px', + fontSmoothing: 'antialiased', + ':-webkit-autofill': { + color: '#fce883', + }, + '::placeholder': { + color: '#6772e5', + }, + }, + invalid: { + iconColor: '#ef2961', + color: '#ef2961', + }, + }, +} + +const ElementsForm: React.FunctionComponent = () => { + const [input, setInput] = useState({ + customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP), + cardholderName: '', + }) + const [payment, setPayment] = useState({ status: 'initial' }) + const [errorMessage, setErrorMessage] = useState('') + const stripe = useStripe() + const elements = useElements() + + const PaymentStatus = ({ status }: { status: string }) => { + switch (status) { + case 'processing': + case 'requires_payment_method': + case 'requires_confirmation': + return

Processing...

+ + case 'requires_action': + return

Authenticating...

+ + case 'succeeded': + return

Payment Succeeded 🥳

+ + case 'error': + return ( + <> +

Error 😭

+

{errorMessage}

+ + ) + + default: + return null + } + } + + const handleInputChange: React.ChangeEventHandler = e => + setInput({ + ...input, + [e.currentTarget.name]: e.currentTarget.value, + }) + + const handleSubmit: React.FormEventHandler = async e => { + e.preventDefault() + // Abort if form isn't valid + if (!e.currentTarget.reportValidity()) return + setPayment({ status: 'processing' }) + + // Create a PaymentIntent with the specified amount. + const response = await fetchPostJSON('/api/payment_intents', { + amount: input.customDonation, + }) + setPayment(response) + + if (response.statusCode === 500) { + setPayment({ status: 'error' }) + setErrorMessage(response.message) + return + } + + // Get a reference to a mounted CardElement. Elements knows how + // to find your CardElement because there can only ever be one of + // each type of element. + const cardElement = elements!.getElement(CardElement) + + // Use your card Element with other Stripe.js APIs + const { error, paymentIntent } = await stripe!.confirmCardPayment( + response.client_secret, + { + payment_method: { + card: cardElement!, + billing_details: { name: input.cardholderName }, + }, + } + ) + + if (error) { + setPayment({ status: 'error' }) + setErrorMessage(error.message ?? 'An unknown error occured') + } else if (paymentIntent) { + setPayment(paymentIntent) + } + } + + return ( + <> +
+ +
+ Your payment details: + +
+ { + if (e.error) { + setPayment({ status: 'error' }) + setErrorMessage(e.error.message ?? 'An unknown error occured') + } + }} + /> +
+
+ + + + + + ) +} + +export default ElementsForm diff --git a/examples/with-stripe-typescript/components/Layout.tsx b/examples/with-stripe-typescript/components/Layout.tsx new file mode 100644 index 000000000000..a6cd61a2716c --- /dev/null +++ b/examples/with-stripe-typescript/components/Layout.tsx @@ -0,0 +1,75 @@ +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import { Elements } from '@stripe/react-stripe-js' +import { loadStripe } from '@stripe/stripe-js' + +type Props = { + title?: string +} + +const stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY!) + +const Layout: React.FunctionComponent = ({ + children, + title = 'TypeScript Next.js Stripe Example', +}) => ( + + + {title} + + + + + + + + +
+
+
+ + + + + +

+ Stripe Sample +
+ Next.js, TypeScript, and Stripe 🔒💸 +

+
+
+ {children} +
+
+ + This is a{' '} + + Stripe Sample + + .{' View code on '} + + GitHub + + . + +
+ +) + +export default Layout diff --git a/examples/with-stripe-typescript/components/PrintObject.tsx b/examples/with-stripe-typescript/components/PrintObject.tsx new file mode 100644 index 000000000000..8b36b678c9f9 --- /dev/null +++ b/examples/with-stripe-typescript/components/PrintObject.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +type Props = { + content: object +} + +const PrintObject: React.FunctionComponent = ({ content }) => { + const formattedContent: string = JSON.stringify(content, null, 2) + return 
{formattedContent}
+} + +export default PrintObject diff --git a/examples/with-stripe-typescript/config/index.ts b/examples/with-stripe-typescript/config/index.ts new file mode 100644 index 000000000000..b36aaf909821 --- /dev/null +++ b/examples/with-stripe-typescript/config/index.ts @@ -0,0 +1,6 @@ +export const CURRENCY = 'usd' +// Set your amount limits: Use float for decimal currencies and +// Integer for zero-decimal currencies: https://stripe.com/docs/currencies#zero-decimal. +export const MIN_AMOUNT = 10.0 +export const MAX_AMOUNT = 5000.0 +export const AMOUNT_STEP = 5.0 diff --git a/examples/with-stripe-typescript/next-env.d.ts b/examples/with-stripe-typescript/next-env.d.ts new file mode 100644 index 000000000000..0ed4fc8ed494 --- /dev/null +++ b/examples/with-stripe-typescript/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/with-stripe-typescript/next.config.js b/examples/with-stripe-typescript/next.config.js new file mode 100644 index 000000000000..604069d81a0c --- /dev/null +++ b/examples/with-stripe-typescript/next.config.js @@ -0,0 +1,7 @@ +require('dotenv').config() + +module.exports = { + env: { + STRIPE_PUBLISHABLE_KEY: process.env.STRIPE_PUBLISHABLE_KEY, + }, +} diff --git a/examples/with-stripe-typescript/now.json b/examples/with-stripe-typescript/now.json new file mode 100644 index 000000000000..527e1aaee55b --- /dev/null +++ b/examples/with-stripe-typescript/now.json @@ -0,0 +1,11 @@ +{ + "env": { + "STRIPE_SECRET_KEY": "@stripe_secret_key", + "STRIPE_WEBHOOK_SECRET": "@stripe_webhook_secret" + }, + "build": { + "env": { + "STRIPE_PUBLISHABLE_KEY": "@stripe_publishable_key" + } + } +} diff --git a/examples/with-stripe-typescript/package.json b/examples/with-stripe-typescript/package.json new file mode 100644 index 000000000000..ed9894360c96 --- /dev/null +++ b/examples/with-stripe-typescript/package.json @@ -0,0 +1,30 @@ +{ + "name": "with-stripe-typescript", + "version": "1.0.0", + "description": "Full-stack TypeScript example using Next.js, react-stripe-js, and stripe-node.", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "license": "ISC", + "dependencies": { + "@stripe/react-stripe-js": "^1.0.0-beta.5", + "@stripe/stripe-js": "^1.0.0-beta.6", + "dotenv": "latest", + "micro": "^9.3.4", + "micro-cors": "^0.1.1", + "next": "latest", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "stripe": "^8.15.0", + "swr": "^0.1.16" + }, + "devDependencies": { + "@types/micro": "^7.3.3", + "@types/micro-cors": "^0.1.0", + "@types/node": "^13.1.2", + "@types/react": "^16.9.17", + "typescript": "^3.7.4" + } +} diff --git a/examples/with-stripe-typescript/pages/_app.tsx b/examples/with-stripe-typescript/pages/_app.tsx new file mode 100644 index 000000000000..46dcc68f2f97 --- /dev/null +++ b/examples/with-stripe-typescript/pages/_app.tsx @@ -0,0 +1,9 @@ +import { AppProps } from 'next/app' + +import '../styles.css' + +function MyApp({ Component, pageProps }: AppProps) { + return +} + +export default MyApp diff --git a/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts b/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts new file mode 100644 index 000000000000..815a1e4db345 --- /dev/null +++ b/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts @@ -0,0 +1,24 @@ +import { NextApiRequest, NextApiResponse } from 'next' + +import Stripe from 'stripe' +const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { + // https://github.com/stripe/stripe-node#configuration + apiVersion: '2019-12-03', +}) + +export default async (req: NextApiRequest, res: NextApiResponse) => { + const id: string = req.query.id as string + try { + if (!id.startsWith('cs_')) { + throw Error('Incorrect CheckoutSession ID.') + } + const checkout_session: Stripe.Checkout.Session = await stripe.checkout.sessions.retrieve( + id, + { expand: ['payment_intent'] } + ) + + res.status(200).json(checkout_session) + } catch (err) { + res.status(500).json({ statusCode: 500, message: err.message }) + } +} diff --git a/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts b/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts new file mode 100644 index 000000000000..3b8706adfbea --- /dev/null +++ b/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts @@ -0,0 +1,47 @@ +import { NextApiRequest, NextApiResponse } from 'next' + +import { CURRENCY, MIN_AMOUNT, MAX_AMOUNT } from '../../../config' +import { formatAmountForStripe } from '../../../utils/stripe-helpers' + +import Stripe from 'stripe' +const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { + // https://github.com/stripe/stripe-node#configuration + apiVersion: '2019-12-03', +}) + +export default async (req: NextApiRequest, res: NextApiResponse) => { + if (req.method === 'POST') { + const amount: number = req.body.amount + try { + // Validate the amount that was passed from the client. + if (!(amount >= MIN_AMOUNT && amount <= MAX_AMOUNT)) { + throw new Error('Invalid amount.') + } + // Create Checkout Sessions from body params. + const params: Stripe.Checkout.SessionCreateParams = { + submit_type: 'donate', + payment_method_types: ['card'], + line_items: [ + { + name: 'Custom amount donation', + amount: formatAmountForStripe(amount, CURRENCY), + currency: CURRENCY, + quantity: 1, + }, + ], + success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`, + cancel_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`, + } + const checkoutSession: Stripe.Checkout.Session = await stripe.checkout.sessions.create( + params + ) + + res.status(200).json(checkoutSession) + } catch (err) { + res.status(500).json({ statusCode: 500, message: err.message }) + } + } else { + res.setHeader('Allow', 'POST') + res.status(405).end('Method Not Allowed') + } +} diff --git a/examples/with-stripe-typescript/pages/api/payment_intents/index.ts b/examples/with-stripe-typescript/pages/api/payment_intents/index.ts new file mode 100644 index 000000000000..5f6228479cba --- /dev/null +++ b/examples/with-stripe-typescript/pages/api/payment_intents/index.ts @@ -0,0 +1,38 @@ +import { NextApiRequest, NextApiResponse } from 'next' + +import { CURRENCY, MIN_AMOUNT, MAX_AMOUNT } from '../../../config' +import { formatAmountForStripe } from '../../../utils/stripe-helpers' + +import Stripe from 'stripe' +const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { + // https://github.com/stripe/stripe-node#configuration + apiVersion: '2019-12-03', +}) + +export default async (req: NextApiRequest, res: NextApiResponse) => { + if (req.method === 'POST') { + const { amount }: { amount: number } = req.body + try { + // Validate the amount that was passed from the client. + if (!(amount >= MIN_AMOUNT && amount <= MAX_AMOUNT)) { + throw new Error('Invalid amount.') + } + // Create PaymentIntent from body params. + const params: Stripe.PaymentIntentCreateParams = { + payment_method_types: ['card'], + amount: formatAmountForStripe(amount, CURRENCY), + currency: CURRENCY, + } + const payment_intent: Stripe.PaymentIntent = await stripe.paymentIntents.create( + params + ) + + res.status(200).json(payment_intent) + } catch (err) { + res.status(500).json({ statusCode: 500, message: err.message }) + } + } else { + res.setHeader('Allow', 'POST') + res.status(405).end('Method Not Allowed') + } +} diff --git a/examples/with-stripe-typescript/pages/api/webhooks/index.ts b/examples/with-stripe-typescript/pages/api/webhooks/index.ts new file mode 100644 index 000000000000..0ae6ef52c3ef --- /dev/null +++ b/examples/with-stripe-typescript/pages/api/webhooks/index.ts @@ -0,0 +1,67 @@ +import { buffer } from 'micro' +import Cors from 'micro-cors' +import { NextApiRequest, NextApiResponse } from 'next' + +import Stripe from 'stripe' +const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { + // https://github.com/stripe/stripe-node#configuration + apiVersion: '2019-12-03', +}) + +const webhookSecret: string = process.env.STRIPE_WEBHOOK_SECRET! + +// Stripe requires the raw body to construct the event. +export const config = { + api: { + bodyParser: false, + }, +} + +const cors = Cors({ + allowMethods: ['POST', 'HEAD'], +}) + +const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => { + if (req.method === 'POST') { + const buf = await buffer(req) + const sig = req.headers['stripe-signature']! + + let event: Stripe.Event + + try { + event = stripe.webhooks.constructEvent(buf.toString(), sig, webhookSecret) + } catch (err) { + // On error, log and return the error message. + console.log(`❌ Error message: ${err.message}`) + res.status(400).send(`Webhook Error: ${err.message}`) + return + } + + // Successfully constructed event. + console.log('✅ Success:', event.id) + + // Cast event data to Stripe object. + if (event.type === 'payment_intent.succeeded') { + const paymentIntent = event.data.object as Stripe.PaymentIntent + console.log(`💰 PaymentIntent status: ${paymentIntent.status}`) + } else if (event.type === 'payment_intent.payment_failed') { + const paymentIntent = event.data.object as Stripe.PaymentIntent + console.log( + `❌ Payment failed: ${paymentIntent.last_payment_error?.message}` + ) + } else if (event.type === 'charge.succeeded') { + const charge = event.data.object as Stripe.Charge + console.log(`💵 Charge id: ${charge.id}`) + } else { + console.warn(`🤷‍♀️ Unhandled event type: ${event.type}`) + } + + // Return a response to acknowledge receipt of the event. + res.json({ received: true }) + } else { + res.setHeader('Allow', 'POST') + res.status(405).end('Method Not Allowed') + } +} + +export default cors(webhookHandler as any) diff --git a/examples/with-stripe-typescript/pages/donate-with-checkout.tsx b/examples/with-stripe-typescript/pages/donate-with-checkout.tsx new file mode 100644 index 000000000000..0960e3e575be --- /dev/null +++ b/examples/with-stripe-typescript/pages/donate-with-checkout.tsx @@ -0,0 +1,18 @@ +import { NextPage } from 'next' +import Layout from '../components/Layout' + +import CheckoutForm from '../components/CheckoutForm' + +const DonatePage: NextPage = () => { + return ( + +
+

Donate with Checkout

+

Donate to our project 💖

+ +
+ + ) +} + +export default DonatePage diff --git a/examples/with-stripe-typescript/pages/donate-with-elements.tsx b/examples/with-stripe-typescript/pages/donate-with-elements.tsx new file mode 100644 index 000000000000..4929f4c63d95 --- /dev/null +++ b/examples/with-stripe-typescript/pages/donate-with-elements.tsx @@ -0,0 +1,18 @@ +import { NextPage } from 'next' +import Layout from '../components/Layout' + +import ElementsForm from '../components/ElementsForm' + +const DonatePage: NextPage = () => { + return ( + +
+

Donate with Elements

+

Donate to our project 💖

+ +
+ + ) +} + +export default DonatePage diff --git a/examples/with-stripe-typescript/pages/index.tsx b/examples/with-stripe-typescript/pages/index.tsx new file mode 100644 index 000000000000..bb18247a4a9b --- /dev/null +++ b/examples/with-stripe-typescript/pages/index.tsx @@ -0,0 +1,30 @@ +import { NextPage } from 'next' +import Link from 'next/link' +import Layout from '../components/Layout' + +const IndexPage: NextPage = () => { + return ( + + + + ) +} + +export default IndexPage diff --git a/examples/with-stripe-typescript/pages/result.tsx b/examples/with-stripe-typescript/pages/result.tsx new file mode 100644 index 000000000000..781752368b2a --- /dev/null +++ b/examples/with-stripe-typescript/pages/result.tsx @@ -0,0 +1,35 @@ +import { NextPage } from 'next' +import { useRouter } from 'next/router' +import Layout from '../components/Layout' +import PrintObject from '../components/PrintObject' + +import { fetchGetJSON } from '../utils/api-helpers' +import useSWR from 'swr' + +const ResultPage: NextPage = () => { + const router = useRouter() + + // Fetch CheckoutSession from static page via + // https://nextjs.org/docs/basic-features/data-fetching#static-generation + const { data, error } = useSWR( + router.query.session_id + ? `/api/checkout_sessions/${router.query.session_id}` + : null, + fetchGetJSON + ) + + if (error) return
failed to load
+ + return ( + +
+

Checkout Payment Result

+

Status: {data?.payment_intent?.status ?? 'loading...'}

+

CheckoutSession response:

+ +
+ + ) +} + +export default ResultPage diff --git a/examples/with-stripe-typescript/public/checkout-one-time-payments.svg b/examples/with-stripe-typescript/public/checkout-one-time-payments.svg new file mode 100644 index 000000000000..2a17b2e2e891 --- /dev/null +++ b/examples/with-stripe-typescript/public/checkout-one-time-payments.svg @@ -0,0 +1 @@ +$29.90Pay $29.90424211/26934Jenny Rosenjenny@rosen.com \ No newline at end of file diff --git a/examples/with-stripe-typescript/public/checkout_demo.gif b/examples/with-stripe-typescript/public/checkout_demo.gif new file mode 100644 index 000000000000..f3944584bc3d Binary files /dev/null and b/examples/with-stripe-typescript/public/checkout_demo.gif differ diff --git a/examples/with-stripe-typescript/public/elements-card-payment.svg b/examples/with-stripe-typescript/public/elements-card-payment.svg new file mode 100644 index 000000000000..971ce7435a9c --- /dev/null +++ b/examples/with-stripe-typescript/public/elements-card-payment.svg @@ -0,0 +1 @@ +Pay $29.904242 4242 4242 4242 \ No newline at end of file diff --git a/examples/with-stripe-typescript/public/elements_demo.gif b/examples/with-stripe-typescript/public/elements_demo.gif new file mode 100644 index 000000000000..a47512013c5d Binary files /dev/null and b/examples/with-stripe-typescript/public/elements_demo.gif differ diff --git a/examples/with-stripe-typescript/public/logo.png b/examples/with-stripe-typescript/public/logo.png new file mode 100644 index 000000000000..2aa7c6c74f89 Binary files /dev/null and b/examples/with-stripe-typescript/public/logo.png differ diff --git a/examples/with-stripe-typescript/public/social_card.png b/examples/with-stripe-typescript/public/social_card.png new file mode 100644 index 000000000000..e9eec5de375a Binary files /dev/null and b/examples/with-stripe-typescript/public/social_card.png differ diff --git a/examples/with-stripe-typescript/styles.css b/examples/with-stripe-typescript/styles.css new file mode 100644 index 000000000000..fae4b236cfb5 --- /dev/null +++ b/examples/with-stripe-typescript/styles.css @@ -0,0 +1,283 @@ +/* Variables */ +:root { + --body-color: #fcfdfe; + --checkout-color: #8f6ed5; + --elements-color: #6772e5; + --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + sans-serif; + --h1-color: #1a1f36; + --h2-color: #7b818a; + --h3-color: #a3acb9; + --radius: 6px; + --container-width-max: 1280px; + --page-width-max: 600px; + --transition-duration: 2s; +} + +body { + margin: 0; + padding: 0; + background: var(--body-color); + overflow-y: scroll; +} + +* { + box-sizing: border-box; + font-family: var(--body-font-family); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +#__next { + display: flex; + justify-content: center; +} + +.container { + max-width: var(--container-width-max); + padding: 45px 25px; + display: flex; + flex-direction: row; +} + +.page-container { + padding-bottom: 60px; + max-width: var(--page-width-max); +} + +h1 { + font-weight: 600; + color: var(--h1-color); + margin: 6px 0 12px; + font-size: 27px; + line-height: 32px; +} + +h1 span.light { + color: var(--h3-color); +} + +h2 { + color: var(--h2-color); + margin: 8px 0; +} + +h3 { + font-size: 17px; + color: var(--h3-color); + margin: 8px 0; +} + +a { + color: var(--checkout-color); + text-decoration: none; +} + +header { + position: relative; + flex: 0 0 250px; + padding-right: 48px; +} + +.header-content { + position: sticky; + top: 45px; +} + +.logo img { + height: 20px; + margin-bottom: 52px; +} + +ul, +li { + list-style: none; + padding: 0; + margin: 0; +} + +.card-list { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + padding-top: 64px; +} + +.card { + display: block; + border-radius: 10px; + position: relative; + padding: 12px; + height: 320px; + flex: 0 0 33%; + min-width: 304px; + width: 33%; + margin: 0 20px 0 0; + text-decoration: none; + box-shadow: -20px 20px 60px #abacad, 20px -20px 60px #ffffff; +} +.card h2 { + color: #fff; +} +.card h2.bottom { + position: absolute; + bottom: 10px; +} + +.card img { + width: 80%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.error-message { + color: #ef2961; +} + +.FormRow, +fieldset, +input[type='number'], +input[type='text'] { + border-radius: var(--radius); + padding: 5px 12px; + width: 100%; + background: #fff; + appearance: none; + font-size: 16px; + margin-top: 10px; +} + +input[type='range'] { + margin: 5px 0; + width: 100%; +} + +button { + border-radius: var(--radius); + color: white; + font-size: larger; + border: 0; + padding: 12px 16px; + margin-top: 10px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + display: block; + width: 100%; +} + +.elements-style { + color: var(--elements-color); + border: 1px solid var(--elements-color); +} +.elements-style-background { + background: var(--elements-color); + transition: box-shadow var(--transition-duration); +} +.card.elements-style-background:hover { + box-shadow: 20px 20px 60px #464e9c, -20px -20px 60px #8896ff; +} +.checkout-style { + color: var(--checkout-color); + border: 1px solid var(--checkout-color); +} +.checkout-style-background { + background: var(--checkout-color); + transition: box-shadow var(--transition-duration); +} +.card.checkout-style-background:hover { + box-shadow: 20px 20px 60px #614b91, -20px -20px 60px #bd91ff; +} + +/* Code block */ +code, +pre { + font-family: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace; + font-size: 12px; + background: rgba(0, 0, 0, 0.03); + padding: 12px; + border-radius: var(--radius); + max-height: 500px; + width: var(--page-width-max); + overflow: auto; +} + +.banner { + max-width: 825px; + margin: 0 auto; + font-size: 14px; + background: var(--body-color); + color: #6a7c94; + border-radius: 50px; + box-shadow: -20px 20px 60px #abacad, 20px -20px 60px #ffffff; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 15px; + line-height: 1.15; + position: fixed; + bottom: 2vh; + left: 0; + right: 0; + text-align: center; + justify-content: center; +} + +@media only screen and (max-width: 980px) { + .container { + flex-direction: column; + } + + .header-content { + max-width: 280px; + position: relative; + top: 0; + } + + .card { + margin: 0 20px 20px 0; + box-shadow: none; + } + + .card-list { + padding-top: 0; + } + + .banner { + box-shadow: none; + bottom: 0; + } +} + +@media only screen and (max-width: 600px) { + .container { + flex-direction: column; + } + + .card { + display: block; + border-radius: 8px; + flex: 1 0 100%; + max-width: 100%; + padding-left: 0; + padding-right: 0; + margin: 0 0 20px 0; + box-shadow: none; + } + + .card-list { + padding-top: 0; + } + + code, + pre, + h3 { + display: none; + } + + .banner { + box-shadow: none; + bottom: 0; + } +} diff --git a/examples/with-stripe-typescript/tsconfig.json b/examples/with-stripe-typescript/tsconfig.json new file mode 100644 index 000000000000..193d144c0987 --- /dev/null +++ b/examples/with-stripe-typescript/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "exclude": ["node_modules"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] +} diff --git a/examples/with-stripe-typescript/utils/api-helpers.ts b/examples/with-stripe-typescript/utils/api-helpers.ts new file mode 100644 index 000000000000..13d8772ec863 --- /dev/null +++ b/examples/with-stripe-typescript/utils/api-helpers.ts @@ -0,0 +1,30 @@ +export async function fetchGetJSON(url: string) { + try { + const data = await fetch(url).then(res => res.json()) + return data + } catch (err) { + throw new Error(err.message) + } +} + +export async function fetchPostJSON(url: string, data?: {}) { + try { + // Default options are marked with * + const response = await fetch(url, { + method: 'POST', // *GET, POST, PUT, DELETE, etc. + mode: 'cors', // no-cors, *cors, same-origin + cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached + credentials: 'same-origin', // include, *same-origin, omit + headers: { + 'Content-Type': 'application/json', + // 'Content-Type': 'application/x-www-form-urlencoded', + }, + redirect: 'follow', // manual, *follow, error + referrerPolicy: 'no-referrer', // no-referrer, *client + body: JSON.stringify(data || {}), // body data type must match "Content-Type" header + }) + return await response.json() // parses JSON response into native JavaScript objects + } catch (err) { + throw new Error(err.message) + } +} diff --git a/examples/with-stripe-typescript/utils/stripe-helpers.ts b/examples/with-stripe-typescript/utils/stripe-helpers.ts new file mode 100644 index 000000000000..06c46e6974be --- /dev/null +++ b/examples/with-stripe-typescript/utils/stripe-helpers.ts @@ -0,0 +1,30 @@ +export function formatAmountForDisplay( + amount: number, + currency: string +): string { + let numberFormat = new Intl.NumberFormat(['en-US'], { + style: 'currency', + currency: currency, + currencyDisplay: 'symbol', + }) + return numberFormat.format(amount) +} + +export function formatAmountForStripe( + amount: number, + currency: string +): number { + let numberFormat = new Intl.NumberFormat(['en-US'], { + style: 'currency', + currency: currency, + currencyDisplay: 'symbol', + }) + const parts = numberFormat.formatToParts(amount) + let zeroDecimalCurrency: boolean = true + for (let part of parts) { + if (part.type === 'decimal') { + zeroDecimalCurrency = false + } + } + return zeroDecimalCurrency ? amount : Math.round(amount * 100) +} diff --git a/examples/with-style-sheet/README.md b/examples/with-style-sheet/README.md index 8e3d6353dbeb..2037c9b9a983 100644 --- a/examples/with-style-sheet/README.md +++ b/examples/with-style-sheet/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md index 2a1c1e9c7837..8810848ee8b1 100644 --- a/examples/with-styled-components-rtl/README.md +++ b/examples/with-styled-components-rtl/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 246ff9a3230f..8349727e6bb5 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -41,11 +41,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Try it on CodeSandbox diff --git a/examples/with-styled-jsx-plugins/README.md b/examples/with-styled-jsx-plugins/README.md index d87b7f8a0e74..21e9d7afa044 100644 --- a/examples/with-styled-jsx-plugins/README.md +++ b/examples/with-styled-jsx-plugins/README.md @@ -45,8 +45,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md index a590380d3cf9..9e1aeabac743 100644 --- a/examples/with-styled-jsx-scss/README.md +++ b/examples/with-styled-jsx-scss/README.md @@ -45,8 +45,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-styletron/README.md b/examples/with-styletron/README.md index ec159dcceb7e..a77df2e882a0 100644 --- a/examples/with-styletron/README.md +++ b/examples/with-styletron/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-sw-precache/README.md b/examples/with-sw-precache/README.md index 18b934ddc21d..923a1a1cb9bb 100644 --- a/examples/with-sw-precache/README.md +++ b/examples/with-sw-precache/README.md @@ -33,8 +33,4 @@ npm run build npm start ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-tailwindcss-emotion/README.md b/examples/with-tailwindcss-emotion/README.md index 602ce72824f3..d56aa3fa65c1 100644 --- a/examples/with-tailwindcss-emotion/README.md +++ b/examples/with-tailwindcss-emotion/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md index 557e99494b07..d74f18eb99d5 100644 --- a/examples/with-tailwindcss/README.md +++ b/examples/with-tailwindcss/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-three-js/README.md b/examples/with-three-js/README.md new file mode 100644 index 000000000000..84d5ea623604 --- /dev/null +++ b/examples/with-three-js/README.md @@ -0,0 +1,45 @@ +# With Three js + +This example uses: + +`threejs`: A lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples. +`react-three-fiber`: A React renderer for Threejs on the web and react-native. + +## Deploy your own + +Deploy the example using [ZEIT Now](https://zeit.co/now): + +[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-three-js) + +## How to use + +### Using `create-next-app` + +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 +npx create-next-app --example with-three-js +# or +yarn create next-app --example with-three-js +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-three-js +cd with-three-js +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-three-js/package.json b/examples/with-three-js/package.json new file mode 100644 index 000000000000..faa0204c7827 --- /dev/null +++ b/examples/with-three-js/package.json @@ -0,0 +1,18 @@ +{ + "name": "with-three-js", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "9.2.1", + "react": "16.12.0", + "react-dom": "16.12.0", + "react-three-fiber": "4.0.12", + "three": "0.112.1" + }, + "devDependencies": {} +} diff --git a/examples/with-three-js/pages/_app.js b/examples/with-three-js/pages/_app.js new file mode 100644 index 000000000000..a0549e5c10ac --- /dev/null +++ b/examples/with-three-js/pages/_app.js @@ -0,0 +1,8 @@ +import React from 'react' +import './index.css' + +function MyApp({ Component, pageProps }) { + return +} + +export default MyApp diff --git a/examples/with-three-js/pages/birds.js b/examples/with-three-js/pages/birds.js new file mode 100644 index 000000000000..f9b2d4a042f0 --- /dev/null +++ b/examples/with-three-js/pages/birds.js @@ -0,0 +1,84 @@ +import React, { useRef, useState, useEffect, Suspense } from 'react' +import * as THREE from 'three' +import { Canvas, useFrame, useLoader } from 'react-three-fiber' + +let GLTFLoader + +const Bird = ({ speed, factor, url, ...props }) => { + const gltf = useLoader(GLTFLoader, url) + const group = useRef() + const [mixer] = useState(() => new THREE.AnimationMixer()) + useEffect( + () => void mixer.clipAction(gltf.animations[0], group.current).play(), + [gltf.animations, mixer] + ) + useFrame((state, delta) => { + group.current.rotation.y += + Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5 + mixer.update(delta * speed) + }) + return ( + + + + + + + + + ) +} + +const Birds = () => { + return new Array(5).fill().map((_, i) => { + const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1) + const y = -10 + Math.random() * 20 + const z = -5 + Math.random() * 10 + const bird = ['stork', 'parrot', 'flamingo'][Math.round(Math.random() * 2)] + let speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5 + let factor = + bird === 'stork' + ? 0.5 + Math.random() + : bird === 'flamingo' + ? 0.25 + Math.random() + : 1 + Math.random() - 0.5 + return ( + 0 ? Math.PI : 0, 0]} + speed={speed} + factor={factor} + url={`/glb/${bird}.glb`} + /> + ) + }) +} + +const BirdsPage = props => { + useEffect(() => { + GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader + }, []) + return ( + <> + + + + + + + + + ) +} + +export default BirdsPage diff --git a/examples/with-three-js/pages/boxes.js b/examples/with-three-js/pages/boxes.js new file mode 100644 index 000000000000..8fba862a743f --- /dev/null +++ b/examples/with-three-js/pages/boxes.js @@ -0,0 +1,46 @@ +import React, { useRef, useState, Suspense } from 'react' +import { Canvas, useFrame } from 'react-three-fiber' + +const Box = props => { + const mesh = useRef() + + const [hovered, setHover] = useState(false) + const [active, setActive] = useState(false) + + useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01)) + + return ( + setActive(!active)} + onPointerOver={e => setHover(true)} + onPointerOut={e => setHover(false)} + > + + + + ) +} + +const BirdsPage = () => { + return [ +

Click on me - Hover me :)

, + + + + + + + + + + , + ] +} + +export default BirdsPage diff --git a/examples/with-three-js/pages/index.css b/examples/with-three-js/pages/index.css new file mode 100644 index 000000000000..5099ed4a8a60 --- /dev/null +++ b/examples/with-three-js/pages/index.css @@ -0,0 +1,43 @@ +body { + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + background: lavender; +} + +canvas { + width: 100%; + height: 100vh; +} + +h1 { + display: flex; + justify-content: center; + align-content: center; + color: hotpink; +} + +.main { + background: hotpink; + padding: 50px; + border-radius: 4px; + display: flex; + margin: 200px; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; +} + +a { + color: white; + display: block; + text-decoration: unset; + font-size: 20px; + margin: 5px 0; +} + +a:hover { + color: #3f51b5; +} diff --git a/examples/with-three-js/pages/index.js b/examples/with-three-js/pages/index.js new file mode 100644 index 000000000000..7164e9d7f28b --- /dev/null +++ b/examples/with-three-js/pages/index.js @@ -0,0 +1,17 @@ +import React from 'react' +import Link from 'next/link' + +const Index = () => { + return ( + + ) +} + +export default Index diff --git a/examples/with-three-js/public/glb/flamingo.glb b/examples/with-three-js/public/glb/flamingo.glb new file mode 100644 index 000000000000..2135fc0f7368 Binary files /dev/null and b/examples/with-three-js/public/glb/flamingo.glb differ diff --git a/examples/with-three-js/public/glb/parrot.glb b/examples/with-three-js/public/glb/parrot.glb new file mode 100644 index 000000000000..2ea9e5831185 Binary files /dev/null and b/examples/with-three-js/public/glb/parrot.glb differ diff --git a/examples/with-three-js/public/glb/stork.glb b/examples/with-three-js/public/glb/stork.glb new file mode 100644 index 000000000000..1358255157b5 Binary files /dev/null and b/examples/with-three-js/public/glb/stork.glb differ diff --git a/examples/with-ts-node/README.md b/examples/with-ts-node/README.md index ec9464282503..b7a183ff58f1 100644 --- a/examples/with-ts-node/README.md +++ b/examples/with-ts-node/README.md @@ -34,8 +34,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-typescript-graphql/README.md b/examples/with-typescript-graphql/README.md index cd4ae272cd9c..6e1f1b6703f5 100644 --- a/examples/with-typescript-graphql/README.md +++ b/examples/with-typescript-graphql/README.md @@ -51,11 +51,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-typescript-styled-components/README.md b/examples/with-typescript-styled-components/README.md index c27b91b98105..a345c40769f4 100644 --- a/examples/with-typescript-styled-components/README.md +++ b/examples/with-typescript-styled-components/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md index 1d4c1f32abc5..811c4d67a190 100644 --- a/examples/with-typescript/README.md +++ b/examples/with-typescript/README.md @@ -39,11 +39,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes diff --git a/examples/with-typestyle/README.md b/examples/with-typestyle/README.md index 7094d75c4893..97ab9d28cb5c 100644 --- a/examples/with-typestyle/README.md +++ b/examples/with-typestyle/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-universal-configuration-build-time/README.md b/examples/with-universal-configuration-build-time/README.md index 6f3322d918d2..7fefd5209a6a 100644 --- a/examples/with-universal-configuration-build-time/README.md +++ b/examples/with-universal-configuration-build-time/README.md @@ -41,11 +41,7 @@ yarn VARIABLE_EXAMPLE=next.js yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Please note diff --git a/examples/with-universal-configuration-runtime/README.md b/examples/with-universal-configuration-runtime/README.md index 7f16b24eae9a..56cac5b16f46 100644 --- a/examples/with-universal-configuration-runtime/README.md +++ b/examples/with-universal-configuration-runtime/README.md @@ -35,8 +35,4 @@ yarn API_URL='https://example.com' yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-unstated/README.md b/examples/with-unstated/README.md index 9362ce9a4b83..40c9c00cf5d8 100644 --- a/examples/with-unstated/README.md +++ b/examples/with-unstated/README.md @@ -41,8 +41,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-url-object-routing/README.md b/examples/with-url-object-routing/README.md index 51473f0e4c28..533e264b8cd5 100644 --- a/examples/with-url-object-routing/README.md +++ b/examples/with-url-object-routing/README.md @@ -35,8 +35,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-videojs/README.md b/examples/with-videojs/README.md index 16fe5b2e8481..d6c2c3630978 100644 --- a/examples/with-videojs/README.md +++ b/examples/with-videojs/README.md @@ -36,8 +36,4 @@ npm install npm run dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-webassembly/README.md b/examples/with-webassembly/README.md index 95be48302ab5..af6b3d1274d4 100644 --- a/examples/with-webassembly/README.md +++ b/examples/with-webassembly/README.md @@ -37,8 +37,4 @@ yarn dev To compile `src/add.rs` to `add.wasm` use `npm run build-rust`. -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-xstate/README.md b/examples/with-xstate/README.md index 38367fc0ecfc..442445df1818 100644 --- a/examples/with-xstate/README.md +++ b/examples/with-xstate/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-yarn-workspaces/README.md b/examples/with-yarn-workspaces/README.md index c77eba540103..78162125e998 100644 --- a/examples/with-yarn-workspaces/README.md +++ b/examples/with-yarn-workspaces/README.md @@ -42,11 +42,7 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). > Choose `packages/web-app` as root directory when deploying. diff --git a/examples/with-yarn-workspaces/packages/web-app/next.config.js b/examples/with-yarn-workspaces/packages/web-app/next.config.js index e89583091618..d359746caeba 100644 --- a/examples/with-yarn-workspaces/packages/web-app/next.config.js +++ b/examples/with-yarn-workspaces/packages/web-app/next.config.js @@ -1,7 +1,5 @@ -const withTM = require('next-transpile-modules') - -// Tell webpack to compile the "bar" package +// Tell webpack to compile the "bar" package, necessary if you're using the export statement for example // https://www.npmjs.com/package/next-transpile-modules -module.exports = withTM({ - transpileModules: ['bar'], -}) +const withTM = require('next-transpile-modules')(['bar']) + +module.exports = withTM() diff --git a/examples/with-yarn-workspaces/packages/web-app/package.json b/examples/with-yarn-workspaces/packages/web-app/package.json index ab2f77987965..97b2b1bc9195 100644 --- a/examples/with-yarn-workspaces/packages/web-app/package.json +++ b/examples/with-yarn-workspaces/packages/web-app/package.json @@ -8,7 +8,7 @@ }, "dependencies": { "next": "latest", - "next-transpile-modules": "^2.0.0", + "next-transpile-modules": "^3.0.0", "react": "^16.8.3", "react-dom": "^16.8.3" }, diff --git a/examples/with-zeit-fetch/README.md b/examples/with-zeit-fetch/README.md index 96faf85f19a5..34d326c423f4 100644 --- a/examples/with-zeit-fetch/README.md +++ b/examples/with-zeit-fetch/README.md @@ -39,8 +39,4 @@ yarn yarn dev ``` -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): - -```bash -now -``` +Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md index 4eb263d57c88..a10e282471ba 100644 --- a/examples/with-zones/README.md +++ b/examples/with-zones/README.md @@ -31,21 +31,15 @@ cd with-zones ## Notes -In this example, we have two apps: 'home' and 'blog'. We'll start both apps with [Now](https://zeit.co/now): - -```bash -now dev -``` - -Then, you can visit and develop for both apps as a single app. - -You can also start the apps separately, for example: +In this example, we have two apps: 'home' and 'blog'. You can start each app separately, for example: ```bash cd blog yarn dev ``` +Then, you can visit and develop your app. + ## Special Notes - All pages should be unique across zones. For example, the 'home' app should not have a `pages/blog/index.js` page. @@ -55,8 +49,11 @@ yarn dev ## Production Deployment -We only need to run `now`, the same `now.json` used for development will be used for the deployment: +We only need to run `now `, to deploy the app: ```bash -now +now blog +now home ``` + +> The rewrite destination in your `now.json` file in the `home` app must be adjusted to point to your deployment. diff --git a/lerna.json b/lerna.json index 6987f62510d9..9030d7853c94 100644 --- a/lerna.json +++ b/lerna.json @@ -12,5 +12,5 @@ "registry": "https://registry.npmjs.org/" } }, - "version": "9.2.2-canary.12" + "version": "9.2.2-canary.19" } diff --git a/package.json b/package.json index f5bf15c7eb34..7d34c7823b0d 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@babel/preset-react": "7.7.0", "@fullhuman/postcss-purgecss": "1.3.0", "@mdx-js/loader": "0.18.0", + "@types/cheerio": "0.22.16", "@types/http-proxy": "1.17.3", "@types/jest": "24.0.13", "@types/string-hash": "1.1.1", @@ -59,6 +60,7 @@ "caniuse-lite": "^1.0.30001019", "cheerio": "0.22.0", "clone": "2.1.2", + "cookie": "0.4.0", "coveralls": "3.0.3", "cross-env": "6.0.3", "cross-spawn": "6.0.5", diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json index d7ae204f608b..8d93fd49cc9e 100644 --- a/packages/create-next-app/package.json +++ b/packages/create-next-app/package.json @@ -1,6 +1,6 @@ { "name": "create-next-app", - "version": "9.2.2-canary.12", + "version": "9.2.2-canary.19", "keywords": [ "react", "next", diff --git a/packages/create-next-app/templates/default/README.md b/packages/create-next-app/templates/default/README.md index bdfa3f51f0d2..007329cc4b82 100644 --- a/packages/create-next-app/templates/default/README.md +++ b/packages/create-next-app/templates/default/README.md @@ -152,7 +152,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Deploy to Now -[ZEIT Now](https://zeit.co/home?utm_source=create-next-app&utm_medium=referral&utm_campaign=Create%20Next%20App) offers a zero-configuration single-command deployment. +[ZEIT Now](https://zeit.co/home?utm_source=create-next-app&utm_medium=readme&utm_campaign=create-next-app) offers a zero-configuration single-command deployment. 1. Install the `now` command-line tool either via npm `npm install -g now` or Yarn `yarn global add now`. @@ -164,7 +164,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ Paste that URL into your browser when the build is complete, and you will see your deployed app. -You can find more details about [`ZEIT Now` here](https://zeit.co/home?utm_source=create-next-app&utm_medium=referral&utm_campaign=Create%20Next%20App). +You can find more details about [`ZEIT Now` here](https://zeit.co/home?utm_source=create-next-app&utm_medium=readme&utm_campaign=create-next-app). ## Something Missing? diff --git a/packages/create-next-app/templates/default/pages/index.js b/packages/create-next-app/templates/default/pages/index.js index 871b2b26f22b..bbe2d105e680 100644 --- a/packages/create-next-app/templates/default/pages/index.js +++ b/packages/create-next-app/templates/default/pages/index.js @@ -37,7 +37,7 @@ const Home = () => (

Deploy →

@@ -50,7 +50,7 @@ const Home = () => (