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

January 28, 2020

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/
/404.html

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.