Deploying Next.js on Netlify
Tags: javascript, react, nextjs, opensource
Published: 2020-10-27 14:28:42

**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](https://nextjs.org/).

# 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 https://github.com/open-sauced/swag %}

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](https://opensauced.pizza). If you aren't familiar open sauced, it is a tool I am working on that makes contributing to open source a little easier.

{% link https://dev.to/opensauced/a-path-for-open-source-contributions-2oa2 %}

I got the site up and running quickly using Next.js and deployed it even quicker to [Vercel](https://vercel.com/). 

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](https://www.netlify.com/) 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](https://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](https://nextjs.org/docs/api-reference/next.config.js/build-target).

## 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](https://github.com/netlify/next-on-netlify), it was trivial to get working.

{% github https://github.com/netlify/next-on-netlify %}

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 😃

{% youtube nJwqX-rfpXw %}