React Ecosystem - Deploying Next.js application to Netlify

Netlify provides global scale platfom for web projects without any server, devops and infrastructure setup. It has a good support deploy static and dynamic site and you can start your project for free.

1. Deploying Static Site generated by Next.js

Add following to the scripts in package.json.

{
    "scripts": {
        "start": "next start",
        "build": "next build",
        "export": "next export"
    }
}

1.1. Create netlify.toml file under root folder and add following commands.

[build]
  command = "npm run build && npm run export"
  publish = "out"

That's it. Go to netlify.com and follow instruction on setting up project with github repository.

2. Depoying server-rendered React Apps generated by Next.js

Netlify follows serverless architecture. It has the concept of Functions. You need to add little extra steps. Add next-on-netlify library to your project with npm i next-on-netlify command.

Add following to the scripts in package.json.

{
    "scripts": {
        "start": "next start",
        "build": "next build",
        "export": "next export",
        "postbuild": "next-on-netlify"
    }
}

Create/ Update next.config.js file under root directory and add following code.

module.exports = {
  target: 'serverless'
}

With above code, we are changing the target from default server to serverless.

Create netlify.toml file under root folder and add following commands.

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

next-on-netlify library will change every server-side rendering code to individual function on Netlify.

That's it. Go to netlify.com and follow instruction on setting up project with github repository.

Recap We explained how to deploy SSG and SSR React apps generatd by Next.js on Netlify platform.

---

Tags: React, React Hooks, ReactJS, Typescript, Redux, Using @reduxjs/toolkit library, Next.js, Server side rendering with Next.js, Full stack development, Static Site Generation, Netlify

← Back home