How to deploy NextJS on Netlify (with Server-Side Rendering)

🎉 Update: Netlify has adopted the next-on-netlify npm package 🎉

Great news for everyone using NextJS on Netlify: Netlify has decided to officially adopt the next-on-netlify npm package and to hire an engineer to support the development of this package. This will make next-on-netlify even better and ensure that using NextJS with Netlify is as seamless and feature-complete as possible!

Five simple steps to host your NextJS application on Netlify. Minimal configuration required thanks to the next-on-netlify npm package. next-on-netlify makes server-side rendering possible by using Netlify functions under the hood.

Demo: https://next-on.netlify.com/
Example repository: https://github.com/FinnWoelm/next-on-netlify-demo

Step 0: Create NextJS app

You probably already have created a NextJS app. If not, now is a good time to do so! Here are instructions for creating a NextJS app from scratch.

Note: next-on-netlify only works with NextJS version 9 or later.

Step 1: Install next-on-netlify

Let’s get the next-on-netlify package installed:

npm install --save next-on-netlify

Step 2: Set NextJS target to serverless

We must build our NextJS app as a serverless app. You can read more about serverless NextJS here.

It’s super simple. Just create a next.config.js file and write the following:

// next.config.js

module.exports = {
  // Target must be serverless
  target: 'serverless'
};

Step 3: Add postbuild hook

The next-on-netlify package adds the next-on-netlify command. When we run this command, some magic happens to prepare our NextJS app for hosting on Netlify*.

We want the next-on-netlify command to run after we build our NextJS application. So let’s add a postbuild hook to our package.json file:

{
  "name": "my-nextjs-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "postbuild": "next-on-netlify"
  },
  ....
}

*If you’re curious about what happens behind the scenes, check out the codebase on GitHub and the well-documented next-on-netlify.js file.

Step 4: Configure Netlify

We’re almost done! We just have to tell Netlify how to build our NextJS app, where the functions folder is located, and which folder to upload to its CDN. We do that with a netlify.toml file and the following instructions:

[build]
  command   = "npm run build"
  functions = "out_functions"
  publish   = "out_publish"

Step 5: Deploy! 🚀

If you have already set up your app on Netlify, just git push and you are done!
If not, here is a 2-min video on how to deploy on Netlify.

Tip: Add paths to .gitignore

If you do run next-on-netlify locally on your computer (to check out what it does to your files), I recommend adding the following entries to your .gitignore:

# .gitignore

# Files generated by next-on-netlify command
/out_publish/
/out_functions/

This way, the files generated by next-on-netlify will not clutter up your workspace.

Conclusion

You have done it! You just deployed your NextJS application with server-side rendering on Netlify. 🎉 Yupeee-Yayy 🎉 Super easy, right?

Did these instructions work for you? Did you run into any issues? What will you build with next-on-netlify? Please share below! 👇

📣 PS: Shoutout to @mottox2 (a pioneer of hosting NextJS on Netlify) and @danielcondemarin (author of serverless-next.js for AWS). The two were big inspirations for the next-on-netlify package.