Search code examples
javascriptdeploymentnext.jsvercelstatic-site

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

I used the Nextjs static site generator to output a simple static site. I am attempting to deploy this site to Vercel but I keep getting an error while it is building. I have deployed this same site to static hosting sites in the past, but want to try Vercel now.

The nextjs docs explicitly say my nextjs app requires zero config:

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.

This is my package.json, the deployment scripts run npm export which runs next build && next export to create the out/ directory, like the docs recommend:

{
  "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"
  }
}

Here is a portion of the Vercel deployment build logs containing the error:

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

As you can see it compiled successfully, but runs into an error when it tries to export I believe. Any ideas?

This is my next.config.js:

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

Error log when running npm run build in local project (identical to error output when deploying to Vercel

$ npm run build

> [email protected] 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! [email protected] build: `next build && next export`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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\_logs\2021-09-01T04_17_12_371Z-debug.log
Solution

  • You are probably having "target": "serverless" in your next.config.js. Remove it or set it to "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.

    EDIT: It appears that the error was due to old version of Next.js, most probably because they then understood Zeit (now Vercel) as a serverless platform and used to override the target. Updating the version will fix the problem. Also add .next, out, etc. to .gitignore. Here is the updated repo.