Skip to content

Commit

Permalink
Update deploy docs to surface ZEIT Now / DPS
Browse files Browse the repository at this point in the history
  • Loading branch information
@chibicode
chibicode committed Feb 4, 2020
1 parent 821b325 commit 0ac757d
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 75 deletions.
4 changes: 0 additions & 4 deletions docs/advanced-features/static-html-export.md
View file
Expand Up @@ -47,10 +47,6 @@ By default `next export` doesn't require any configuration. It will generate a d

> To learn more about `exportPathMap` please visit the [documentation for the `exportPathMap` API](/docs/api-reference/next.config.js/exportPathMap.md).
## Deployment

You can read about deploying your Next.js application in the [deployment section](/docs/deployment.md).

## Caveats

- With `next export`, we build an HTML version of your app. At export time we will run the [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md) in your pages. The `req` and `res` fields of the [`context`](/docs/api-reference/data-fetching/getInitialProps.md#context-object) object will be empty objects during export as there is no server running.
Expand Down
117 changes: 46 additions & 71 deletions docs/deployment.md
View file
Expand Up @@ -4,102 +4,77 @@ description: Compile and deploy your Next.js app to production with ZEIT Now and

# 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 using 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 that supports as 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 be 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 give you 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:** When you work on something new, create a new Git branch and push to GitHub / GitLab / BitBucket.
- **Preview:** Every time you push changes to a branch, 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, instead of doing _code reviews_, your can do _deployment previews_. Each deployment creates a unique URL which 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. That means it has various optimizations specifically 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, 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). Note that HTTPS is enabled by default (including custom domains) and doesn't require extra configuration.
- **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.
- **More:** [Read our documentation](https://zeit.co/docs) to learn more about the ZEIT Now platform. You can deploy non-Next.js apps to ZEIT Now as well—[check out our how-to guides](https://zeit.co/guides).

#### 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 `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.
`build` builds the production application in the `.next` folder. After building, `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:
>
- 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 site server.

- 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.
>
> **Note:** If you use [ZEIT Now](https://zeit.co/), you don’t need to use `next export`. It’ll automatically serve all pages from the [ZEIT Now Smart CDN](https://zeit.co/smart-cdn).

0 comments on commit 0ac757d

Please sign in to comment.