diff --git a/docs/deployment.md b/docs/deployment.md index 17e82c01f762196..bb08c431ff78ae2 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) (which we don’t recommend), 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.