loading...
Cover image for Deploying Next.js on Netlify

Deploying Next.js on Netlify

bdougieyo profile image Brian Douglas ・3 min read

TLDR; use the next-on-netlify library.

Next.js claims to be the React framework for production, and it is, I tried it recently and can confirm.

It gives you routing and server-side rendering by default as a framework. I got when I used to write Rails and what I missed when I move to exclusively working in React projects.

The opinionated way to build React was missing from my ecosystem, and I did not realize it until recently. I have been making React projects as long as it's been around, and I already have good opinions on building projects using this technology, at least I thought I did until I tried Next.js.

My new Next.js project

The real difference I found here is having one-way to do everything. This one-way gets you back to writing code without not getting fatiguing over the latest JavaScript library decisions to do the same the others already do.

GitHub logo open-sauced / swag

🍕 Swag surfin'

SWAG

This is a full-stack TypeScript powered swag shop using:

Included functionality

I shipped my first Next.js project last month, and it was such a great experience. I am now convinced to build all my new projects using this framework. The project I shipped was an idea swag shop for my brand Open Sauced. If you aren't familiar open sauced, it is a tool I am working on that makes contributing to open source a little easier.

I got the site up and running quickly using Next.js and deployed it even quicker to Vercel.

Regarding my previously mentioned opinions, one of the best opinions that make Next.js so easy is the ease of which it was to deploy to productions with Vercel. This developer tool focuses on providing one of the best developer experiences.

So Why Netlify?

Why am I deploying to Netlify when the best (opinion) solution for deploying Next.js is on Vercel?

The reason is I've been using Netlify for a long time (I was an employee for a short time too). My Open Sauced project is also already hosted on Netlify and takes advantage of many of its features.

Switching that project was not an option, even for a quick side project with an excellent development experience. I also wanted to make the subdomain swag.opensauced.pizza with the Netlify management service.

So with that limitation I had, it seemed worth exploring getting my Next.js site working on Netlify. I also thought it would be an interesting technical problem to solve using the Next.js serverless target feature.

Install next-on-netlify

I set out to figure this out, and, to accomplish without a ton of effort thanks to this open-sourced tool, next-on-netlify, it was trivial to get working.

GitHub logo netlify / next-on-netlify

Build and deploy Next.js applications with Server-Side Rendering on Netlify!

Next.js on Netlify

next-on-netlify is a utility for enabling server-side rendering in Next.js on Netlify. It wraps your application in a tiny compatibility layer, so that pages can use Netlify Functions to be server-side rendered.

TL;DR: You can enable SSR in your Next.js applications with 3 simple steps, listed here!

Table of Contents

Installation

npm install --save next-on-netlify

Setup

1. Set Next.js target to serverless

We must build our Next.js app as a serverless app. You can read more about serverless Next.js 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",
};
Enter fullscreen mode Exit fullscreen mode

After installing next-on-netlify, it worked. I hoped to write a service that dynamically rendered the API calls into functions, but next-on-netlify is already doing that. It also mirrors what Vercel is doing in this situation, so if I decide to jump to Vercel for whatever reason, I can do that easily (which I already tried).

I went through all of that, bu. I explained the project to why I created this project, and I could get this up and running. I now have a Netlify site powered Next.js, using its native server-side (serverless technically) rendering feature.

So if you were interested in this and getting next to Netlify of this house, I encourage you to try it out.

I am also interested in creative ways to leverage Next.js and take advantage of its features. If you know of any other Next.js features, I should look intro leave me a comment below.

Make sure you like and subscribe.

If you found this helpful, click that ❤️ or let me know. If you want to see me walk through my code that makes this work, check out the Youtube video I made 😃

Discussion

pic
Editor guide