DEV Community

Cover image for Deploying Next.js on Netlify
Brian Douglas
Brian Douglas

Posted on

Deploying Next.js on Netlify

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'


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 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!

Deprecating next-on-netlify

We are deprecating next-on-netlify in favor of Netlify's Essential Next.js Build Plugin. Please visit this issue to learn more about the deprecation of next-on-netlify and ask any questions. You can also visit our simple Migration doc for assistance migrating to the plugin.

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.

Table of Contents


npm install --save next-on-netlify


1. Set Next.js target to serverless

We must build our Next.js app…

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 😃

Top comments (0)