如何将 Nextjs 生成的静态站点部署到 Vercel?

How do I deploy a static site generated by Nextjs to Vercel?

我使用Nextjs静态站点生成器输出了一个简单的静态站点。我正在尝试将此站点部署到 Vercel,但在构建过程中我不断收到错误消息。我过去曾将同一个站点部署到静态托管站点,但现在想尝试 Vercel。

nextjs 文档明确指出我的 nextjs 应用需要零配置:

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.

这是我的 package.json,部署脚本 运行 npm export 运行s next build && next export 创建 out/ 目录,例如文档推荐:

{
  "name": "new-barber-shop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build && next export",
    "export": "next export",
    "start": "next start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "google-maps-react": "^2.0.2",
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-dom": "^16.11.0",
    "semantic-ui-react": "^0.88.1"
  }
}

这是包含错误的 Vercel 部署构建日志的一部分:

22:42:26.610
Compiled successfully.
22:42:26.611
22:42:26.612
Automatically optimizing pages...
22:42:27.095
22:42:27.109
Page            Size     Files  Packages
22:42:27.109
┌ ⚡ /           98.9 kB      2        13
22:42:27.109
├   /_app       223 kB       0         2
22:42:27.109
├   /_document
22:42:27.109
└   /_error     1.96 kB      0         0
22:42:27.109
22:42:27.109
λ  (Lambda)       page was emitted as a lambda (i.e. getInitialProps)
22:42:27.109
⚡  (Static File)  page was prerendered as static HTML
22:42:27.109
22:42:27.445
Error: Cannot export when target is not server. https://err.sh/zeit/next.js/next-export-serverless
22:42:27.445
    at _default (/vercel/path0/node_modules/next/dist/export/index.js:1:2956)
22:42:27.445
    at nextExport (/vercel/path0/node_modules/next/dist/cli/next-export.js:20:325)
22:42:27.445
    at /vercel/p

如您所见,它编译成功,但我相信 运行 在尝试导出时出错。有什么想法吗?

这是我的 next.config.js:

module.exports = {
  target: 'serverless',
    exportPathMap: function() {
      return {
        '/': { page: '/' }
      };
    }
  };

在本地项目中 运行ning npm run build 时的错误日志(与部署到 Vercel

时的错误输出相同
$ npm run build

> new-barber-shop@1.0.0 build F:\Austin\web-apps\new-barber-shop
> next build && next export

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Creating an optimized production build  

Compiled successfully.

Automatically optimizing pages  

Page            Size     Files  Packages
┌ ⚡ /           98.9 kB      2        13
├   /_app       223 kB       0         2
├   /_document
└   /_error     1.96 kB      0         4

λ  (Lambda)       page was emitted as a lambda (i.e. getInitialProps)
⚡  (Static File)  page was prerendered as static HTML

Error: Cannot export when target is not server. https://err.sh/zeit/next.js/next-export-serverless
    at _default (F:\Austin\web-apps\new-barber-shop\node_modules\next\dist\export\index.js:1:2956)
    at nextExport (F:\Austin\web-apps\new-barber-shop\node_modules\next\dist\cli\next-export.js:20:325)
    at commands.(anonymous function).then.exec (F:\Austin\web-apps\new-barber-shop\node_modules\next\dist\bin\next:29:346)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! new-barber-shop@1.0.0 build: `next build && next export`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the new-barber-shop@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Austin\AppData\Roaming\npm-cache\_logs21-09-01T04_17_12_371Z-debug.log

您的 next.config.js 中可能有 "target": "serverless"。删除它或将其设置为 "target": "server".

Next.js can only handle exporting when the target is set to server (this is the default value). A serverless build, for instance, has no handler for requests–this is usually implemented by a hosting provider.


编辑: 看来错误是由于 Next.js 的旧版本造成的,很可能是因为他们随后将 Zeit(现在的 Vercel)理解为无服务器平台,并且用于覆盖目标。更新版本即可解决问题。还要在 .gitignore 中添加 .nextout 等。 Here is the updated repo.