Hosting NEXT on Netlify

All Posts

Hosting NEXT on Netlify

Updated: August 26, 2020 by Tony Alves

We'll use an existing project to show how to host a NEXT site on Netlify. The project we'll use was written by Domitrius Clark and is called MDNEXT

Steps we'll take

  • Use degit to get the monorepo project
  • Make the project serverless
  • Setup the build process to use next-on-netlify
  • Add the netlify.toml to the project

Use degit to get the monorepo project

$ npx degit domitriusclark/mdnext/packages/mdnext mdnext-netlify

The command above will setup a new project in the mdnext-netlify directory from where we ran the command. You can use any folder you want here. Since We'll be calling my repository the same name, the repository package name will be the same so we'll change that also.

{
  "name": "mdnext-netlify",
  "description": "This example shows using [MDX](https://github.com/mdx-js/mdx) content inside your NextJS app w/ Frontmatter & layouts thanks to next-mdx-enhanced.",
  "version": "1.0.1",
  "repository": "https://github.com/domitriusclark/mdnext",
  "author": "domitriusclark",
  "main": "next.config.js",
...

Make the project serverless

Next allows us to config our project as serverless so add the following lines to the next.config.js in the root of the project.

next.config.js

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

Setup next-on-netlify

You can read about how to setup next-on-netlify here

First, install next-on-netlify into our project.

$ y add next-on-netlify --dev

Add a postbuild script in our package.

  "scripts": {
    "build": "next build",
    "postbuild": "next-on-netlify",
    "dev": "next",
    "start": "next start",
    "format": "yarn format:index && yarn format:pages && yarn format:src",
    "format:index": "prettier --write \"*.{js,json,md}\"",
    "format:pages": "prettier --write \"pages/**/*.js\"",
    "format:src": "prettier --write \"src/**/*.{js,md,mdx}\""
  },

Add output files to .gitignore for next-on-netlify

# Ignore next-on-netlify output
/out_publish/
/out_functions/
/404.html

Add the netlify.toml

We add the netlify.toml file to the root of our project.

netlify.toml

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

Done!

Now ready to push up to GitHub and connect to Netlify.

You can find the source code on GitHub.

If you haven't setup Netlify before, you can follow the step by step here or get started with the Netlify docs.

© Tony Alves