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.

open-sauced / swag

🍕 Swag surfin'

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

• Frontend:

  • Next.js and SWR
  • react-stripe-js for Donating
  • use-shopping-cart for Stickers

• Backend

  • Next.js API routes
  • stripe-node with TypeScript

Included functionality

• Global CSS styles
• Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via loadStripe helper: components/Layout.tsx.
• Stripe Checkout
  • Custom Amount Donation with redirect to Stripe Checkout
    • Frontend: pages/donate-with-checkout.tsx
    • Backend: pages/api/checkout_sessions/
    • Checkout payment result page that uses SWR hooks to fetch the CheckoutSession status from the API route: pages/result.tsx.
• Stripe Elements
  • Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect)
    • Frontend: pages/donate-with-elements.tsx
    • Backend: pages/api/payment_intents/
• Webhook handling for post-payment events
  • By default Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach our API route, we need to add micro-cors and verify the webhook signature of the event. All of this happens in pages/api/webhooks/index.ts.
• Helpers
  • utils/api-helpers.ts
    • helpers for…

View on GitHub

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.

A path for open source contributions

Brian Douglas for OpenSauced ・ Feb 16 '20

#opensource #github #opensauced

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.

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.

• Build Plugin @netlify/plugin-nextjs
• Plugin npm package

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

• Installation
• Setup
  • 1. Set Next.js target to serverless
  • 2. Add postbuild hook
  • 3. Configure for Netlify
    • (Optional) Configure private git submodules
• Demo
• Optional Extras
  • Preview Locally
  • Custom Netlify Redirects
  • Custom Netlify Functions
  • Background Functions
  • Using Netlify Identity
• Caveats
  • Fallbacks for Pages with getStaticPaths
  • next/image
• Credits
• Showcase

Installation

npm install --save next-on-netlify

Setup

1. Set Next.js target to serverless

We must build our Next.js app…

View on GitHub

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 😃