Skip to content

Next.js

网站部署

Vercel （这种方式不适合国内，因此不翻译。继续往下看吧）

The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.

Getting started

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

  1. Sign up to Vercel (no credit card is required).
  2. After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
  3. Once that’s set up, click “Import 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 should work just fine!
  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.

Congratulations! You’ve just deployed your Next.js app! If you have questions, take a look at the Vercel documentation.

If you’re using a custom server, we strongly recommend migrating away from it (for example, by using dynamic routing). If you cannot migrate, consider other hosting options.

DPS: Develop, Preview, Ship

Let’s talk about the workflow we recommend using. Vercel supports what we call the DPS workflow: Develop, Preview, and Ship:

  • Develop: Write code in Next.js. Keep the development server running and take advantage of React Fast Refresh.
  • Preview: Every time you push changes to a branch on GitHub / GitLab / BitBucket, Vercel 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 Vercel. Learn more about it here.
  • Ship: When you’re ready to ship, merge the pull request to your default branch (e.g. master). Vercel will automatically create a production deployment.

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.

Optimized for Next.js

Vercel is made by the creators of Next.js and has first-class support for Next.js.

For example, the hybrid pages approach is fully supported out of the box.

Custom Domains, Environment Variables, Automatic HTTPS, and more

  • Custom Domains: Once deployed on Vercel, you can assign a custom domain to your Next.js app. Take a look at our documentation here.
  • Environment Variables: You can also set environment variables on Vercel. Take a look at our documentation here. You can then use those environment variables 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 to learn more about the Vercel platform.

其它托管方式

Node.js 服务器

Next.js 可以部署到任何支持 Node.js 的托管提供商处。如果你使用的是 自定义服务器 方式，则应采用这种方式。

确保你的 package.json 文件中设置了 "build" 和 "start" 脚本：

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

执行 next build 命令将在 .next 文件夹中构建出用于生产环境的应用程序。构建之后，执行 next start 命令启动一个支持 混合页面（hybrid pages） 的 Node.js 服务程序，该服务程序将同时服务于静态生成的页面和服务器端渲染的页面。

导出静态 HTML

如果你想将 Next.js 应用程序导出为静态 HTML，请按照 文档 中的说明进行操作。默认情况下，next export 命令将生成一个 out 目录，然后就可以托管到任何静网站态托管服务和 CDN 上。

We strongly recommend using Vercel even if your Next.js app is fully static. Vercel is optimized to make static Next.js apps blazingly fast. next export works with Zero Config deployments on Vercel.

API 路由: Response Helpers高级特性: 预览模式