Deploy Next.js project to Netlify

#nextjs #netlify #git

I have just finished my own test with Netlify. It is a static page provider with Git deploy integration opportunity (GitHub, GitLab, Bitbucket) . Netlify has got very good performance, it provides https sertification and we can use our own domain with the projects. So, we have got everything that we need for a starter project. Here comes a brief guide!

Our next excellent tool is Next.js! It provides server-side rendering application development tool for us. Next.js can export our full application by pages. So it can behave as a server-side rendered application, but without Node.js server.

🔥 Important note: Netlify can serve static page only! So if you have multiple route in your application then you need to export every of them! It is not a Next.js guide article, but I would give you a hint, how to do that:

You only need to add three additional script to you package.json:

{
  "scripts": {
    "build: "next build",
    "export": "next export",
    "deploy": "npm run build && npm run export"
  }
}
```



After the *"npm run export"* command, Next.js will take care about the rest. It will generate every of your page and subpage as a static application.

**🤔 Ok, what's next?!**

Deploy your project to GitHub/GitLab or Bitbucket. After that, you can create your Netlify project and connect it to your repository.

![Create Netlify Project](https://thepracticaldev.s3.amazonaws.com/i/85n9jgo9qg0gtpblcpwc.jpg)

As you can see, you can select the branch, where you would like to watch the changes. Netlify will copy every new version after commits, and then you can give a command which will take care about the build process. In our case, we can use *"npm run deploy"* as the build command.

You have a publish directory option in the form, where you can give the generated build's folder name. In Next.js case, we need to use *"out"*, because Next will export everything into that folder.

That's all! After these settings, Netlify will take care about hosting and build process on your selected branch.

👨‍💻 Happy coding!

Top comments (12)

Naveen Kashyap • Oct 13 '19

i'm trying to do the same but it's keep failing and not uploading to netlifyher's my logs IDK wha's is going on but i have tried it many times
6:14:02 PM: Build ready to start
6:14:05 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
6:14:05 PM: build-image tag: v3.3.2
6:14:05 PM: buildbot version: 8727aab446158e7b8c8ad2e96fe74b0154505a4e
6:14:05 PM: Fetching cached dependencies
6:14:05 PM: Failed to fetch cache, continuing with build
6:14:05 PM: Starting to prepare the repo for build
6:14:06 PM: No cached dependencies found. Cloning fresh repo
6:14:06 PM: git clone github.com/naveenkash/Forex
6:14:06 PM: Preparing Git Reference refs/heads/master
6:14:06 PM: Starting build script
6:14:07 PM: Installing dependencies
6:14:08 PM: Downloading and installing node v10.16.3...
6:14:08 PM: Downloading nodejs.org/dist/v10.16.3/node-v10.......
6:14:10 PM: 0.
6:14:10 PM: 0%
6:14:10 PM:

6:14:10 PM: 2.7%
6:14:10 PM:

6:14:10 PM: 44.1%
6:14:10 PM:

6:14:10 PM: ################### 100.0%
6:14:10 PM: Computing checksum with sha256sum
6:14:11 PM: Checksums matched!
6:14:13 PM: Now using node v10.16.3 (npm v6.9.0)
6:14:13 PM: Attempting ruby version 2.6.2, read from environment
6:14:14 PM: Using ruby version 2.6.2
6:14:15 PM: Using PHP version 5.6
6:14:15 PM: Started restoring cached node modules
6:14:15 PM: Finished restoring cached node modules
6:14:15 PM: Installing NPM modules using NPM version 6.9.0
6:14:30 PM: > core-js@2.6.9 postinstall /opt/build/repo/node_modules/core-js
6:14:30 PM: > node scripts/postinstall || echo "ignore"
6:14:30 PM: Thank you for using core-js ( github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
6:14:30 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
6:14:30 PM: > opencollective.com/core-js
6:14:30 PM: > patreon.com/zloirock
6:14:30 PM: Also, the author of core-js ( github.com/zloirock ) is looking for a good job -)
6:14:31 PM: npm
6:14:31 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
6:14:31 PM: npm
6:14:31 PM: WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
6:14:31 PM: added 782 packages from 365 contributors and audited 10434 packages in 14.851s
6:14:31 PM: found 0 vulnerabilities
6:14:31 PM: NPM modules installed
6:14:31 PM: Started restoring cached go cache
6:14:31 PM: Finished restoring cached go cache
6:14:31 PM: unset GOOS;
6:14:31 PM: unset GOARCH;
6:14:31 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
6:14:31 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
6:14:31 PM: go version >&2;
6:14:31 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
6:14:31 PM: go version go1.12 linux/amd64
6:14:31 PM: Installing missing commands
6:14:31 PM: Verify run directory
6:14:31 PM: Executing user command: npm run deploy
6:14:32 PM: > transfer-to@0.1.0 deploy /opt/build/repo
6:14:32 PM: > npm run build && npm run export
6:14:32 PM: > transfer-to@0.1.0 build /opt/build/repo
6:14:32 PM: > next build
6:14:33 PM: Attention: Next.js now collects completely anonymous telemetry regarding usage.
6:14:33 PM: This information is used to shape Next.js' roadmap and prioritize features.
6:14:33 PM: You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
6:14:33 PM: nextjs.org/telemetry
6:14:33 PM: Creating an optimized production build...
6:14:54 PM: Failed to compile.
6:14:54 PM: ./components/currencyInput.js
6:14:54 PM: Module not found: Can't resolve './swapicon' in '/opt/build/repo/components'
6:14:54 PM: > Build error occurred
6:14:54 PM: Error: > Build failed because of webpack errors
6:14:54 PM: at build (/opt/build/repo/node_modules/next/dist/build/index.js:7:847)
6:14:54 PM: npm
6:14:54 PM: ERR! code ELIFECYCLE
6:14:54 PM: npm
6:14:54 PM: ERR! errno
6:14:54 PM: 1
6:14:54 PM: npm ERR!
6:14:54 PM: transfer-to@0.1.0 build: next build
6:14:54 PM: npm ERR! Exit status 1
6:14:54 PM: npm
6:14:54 PM: ERR!
6:14:54 PM: npm
6:14:54 PM: ERR! Failed at the transfer-to@0.1.0 build script.
6:14:54 PM: npm ERR!
6:14:54 PM: This is probably not a problem with npm. There is likely additional logging output above.
6:14:54 PM: npm
6:14:54 PM: ERR! A complete log of this run can be found in:
6:14:54 PM: npm ERR!
6:14:54 PM: /opt/buildhome/.npm/_logs/2019-10-12T12_44_54_359Z-debug.log
6:14:54 PM: npm
6:14:54 PM: ERR! code ELIFECYCLE
6:14:54 PM: npm ERR!
6:14:54 PM: errno 1
6:14:54 PM: npm ERR! transfer-to@0.1.0 deploy: npm run build && npm run export
6:14:54 PM: npm ERR! Exit status 1
6:14:54 PM: npm ERR!
6:14:54 PM: npm ERR! Failed at the transfer-to@0.1.0 deploy script.
6:14:54 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
6:14:54 PM: npm
6:14:54 PM: ERR! A complete log of this run can be found in:
6:14:54 PM: npm ERR! /opt/buildhome/.npm/_logs/2019-10-12T12_44_54_373Z-debug.log
6:14:54 PM: Skipping functions preparation step: no functions directory set
6:14:54 PM: Caching artifacts
6:14:54 PM: Started saving node modules
6:14:54 PM: Finished saving node modules
6:14:54 PM: Started saving pip cache
6:14:54 PM: Finished saving pip cache
6:14:54 PM: Started saving emacs cask dependencies
6:14:54 PM: Finished saving emacs cask dependencies
6:14:54 PM: Started saving maven dependencies
6:14:54 PM: Finished saving maven dependencies
6:14:54 PM: Started saving boot dependencies
6:14:54 PM: Finished saving boot dependencies
6:14:54 PM: Started saving go dependencies
6:14:54 PM: Finished saving go dependencies
6:14:56 PM: Error running command: Build script returned non-zero exit code: 1
6:14:56 PM: Failing build: Failed to build site
6:14:56 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
6:14:57 PM: Finished processing build request in 51.737765494s

sudip lahiri • Apr 15 '19

Hi Kristian,
I have deployed one next js site to netlify. Site is opening properly but when I have try to browse contact page from heading ..it shows 404 error where as in localhost the contact page getting opened with contact form and googlemap
what could be the error.
-SL

Taylor Page • Apr 24 '19

You may want to look into Netlify's documentation on site redirects. May not address your issue specifically with Next.js, but could be helpful at least if there's an error with routing: netlify.com/docs/redirects/

Lisa Kristinardottir • Feb 17 '20 • Edited

the scripts section should look like this:
.....

"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"deploy": "npm run build && npm run export"

.....

and...
the build command is: npm run deploy
pulish dir is: out

see screenshots as well for running site using example site from zeit now
Git: github.com/lisaiceland/nextjs-now-...
running on now as well pointing to the github repo: nextjs-drab-nu-95.now.sh/