So You Want to Build a Serverless React App with Next.js and ZEIT Now

Let’s say you’re starting your next project, its often overlooked but deployment is something you should be thinking about as early as possible. In today’s day and age serverless is a great option and one you should consider. In this article, we will discuss the pros and cons of serverless then we will quickly build a React app using Next.js and deploy it with ZEIT Now.

Overview

1. Introduction
2. Setup Next.js
3. Setup ZEIT Now
4. Conclusion
5. Where to learn more?

1 — Introduction

If you have heard of the phrase “focus on your business logic” — you already understand the benefits of serverless. Most developers who try serverless have a relatively stress-free experience but some do not and are left frustrated (keep reading the introduction👇). In fact, building a web or mobile app is easier than ever before and serverless is making it even easier but it doesn’t work for everyone.

Serverless — focus on your business logic!

To start, let’s realize and agree that “serverless” is kind of a poor name for its definition. Serverless still involves servers, you just don’t manage them. What we used to call front-end driven apps, gets labeled “serverless”. When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases because the front-end is becoming more powerful. We can build front-end applications now without the pain of owning infrastructure — this is mainly what serverless is about. If you are interested, you can read more about the general idea here.

Pros and Cons

So, why or why not choose serverless? Well, you’re in luck because I built my side project (reactanywhere.co) using serverless to discover the pros and cons. In fact, side projects are a perfect use-case to try out serverless technologies which I highly recommend.

It’s important to recognize that I’m not recommending that you use serverless for every app you build. Why? Like most things serverless has some drawbacks and limitations which you need to understand before you commit to it.

Let’s talk about why you would want to use serverless infrastructure:

• You’re a front-end developer (like me! 👋) who wants to focus on the front-end
• You’re an entrepreneur (like me!) who wants to focus on customer value, business logic and testing your idea quickly
• You don’t want to deal with server infrastructure (like me!) and invest your time and money into server “stuff”
• You’re building a side-project (like me!) or a startup where you’re learning a lot and need to test something new
• You’re building a simple app (like me!) that doesn’t involve long running threads
• You’re rapidly prototyping something (like me!) that is intended to be experimental and the code will likely be rewritten
• You’re a small team (like me!) who can’t afford hiring a lot of people
• You like getting things for free (like me!) such as global deployments, maintenance and scaling
• And generally you want to focus on the front-end (like me!)

Now, let’s talk about why you wouldn’t want to use serverless infrastructure:

• You’re building a complicated app with long running threads (i.e. artificial intelligence, image processing, etc.) or might need this in the future
• You can’t afford to take any risks on cutting-edge technologies
• You already have a backend and or server team within your organization that can help
• Most members of your company have never tried serverless
• You don’t like being locked into things like vendors
• You don’t fantasize that all back-end and server engineers move out of your way
• You don’t like new technology
• You don’t like troubleshooting things you don’t fully understand
• You like full control over everything and want to understand how everything works

So, that’s a lot to think about before you jump into serverless infrastructure! I highly recommend that you take these things into serious consideration. Generally, I think serverless works really well for well-defined use cases, scrappy startups, front-end engineers, and or side-projects. If one or more of those describes you then serverless might make sense, and you can throw away your server infrastructure (see the GIF below). However, if serverless does not work for your use-case it will be very frustrating.

Serverless-throw away your server infrastructure!

Benefit and Cost

Unfortunately, its not always clear whether serverless is going to work for your use-case until you go down the rabbit hole. Kent C. Dodds says it well:

Be mindful of your abstraction. The universal truth is that the better you understand your abstraction, the more effective you will be at using it. Every abstraction has a cost.

So, you must ask yourself two very important questions: What is the benefit of this abstraction? And what is the cost of this abstraction? Until you understand those questions serverless may or may not be beneficial for your use-case. However, it’s kind of a paradox because you need to use serverless to be able to understand its cost and benefit (but hopefully I can help).

Let’s try to understand the benefits of serverless:

• None to little server infrastructure
• No maintenance
• No server or dev-ops team
• Global deployments and scaling for free
• You rarely work with your server infrastructure

Now, let’s understand the costs of serverless:

• Vendor dependent
• When the server doesn’t work its hard to understand why its not working
• Limited to its capabilities
• You rarely work with your server infrastructure and so you don’t get time to fully understand it

Aha! Once again we are left with unclear choices. Therefore, there is no universal answer to whether serverless is going to work for your use-case. It’s going to be based on a case by case basis. Although, my general advice is to try it on a side-project like I did to better understand the “serverless abstraction”!

2— Setup Next.js

If you got this far you read the introduction and are ready to try building a serverless React app. You understand the pros and cons of serverless as well as the benefits and costs of it. If not, you should go back and read the introduction because it’s the main value of this blog post. Also, if at any point you get lost, I have setup a Github repository with my code.

Okay enough talk, let’s get your serverless React app setup. The prerequisite to this is that you have npm installed.

Step 1

First things first, make a directory in a terminal for all your code. For this example we will call it article-serverless-zeit:

mkdir article-serverless-zeit
cd article-serverless-zeit

Step 2

Next (pun intended) we initialize an npm project like so:

npm init -y

Step 3

And install React and Next.js:

npm install --save next react react-dom

Step 4

Add a script to your package.json like this:

{
"scripts" : {
"dev" : "next",
"build" : "next build",
"start" : "next start"
 }
}

Step 5

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.

So, create a file called ./pages/index.js inside your project and populate it with the following content:

function Home() {
return <div>Welcome to Next.js!</div>;
}

export  default Home;

And then simply run npm run dev and go to http://localhost:3000. Wow that was easy!

3 — Setup ZEIT Now

Next, let’s deploy the React app using ZEIT Now which makes deploying serverless apps easy.

Step 1

Firstly, install the now CLI with npm:

npm i -g now

Step 2

Once finished login like so (if you don’t have an account create one here):

now login

Step 3

Create a file called ./next.config.js to use as our entry point for the build, and to configure that the build should be a collection of serverless lambdas:

module.exports = {
 target: 'serverless'
}

Step 4

Then define a build step in a ./now.json configuration file:

{
"version" : 2,
"builds" : [{ "src" : "next.config.js", "use" : "@now/next" }]
}

Step 5

Its recommended to add a .nowignore to avoid issues and make uploading faster:

.next
node_modules

Step 6

And finally we can deploy! Like so:

now

Once that finishes you will get a link in your terminal (like this one) and that’s it. Wow that was the easiest deployment ever!

4 — Conclusion

I hope this guide helped you decide whether serverless is right for you and helped you setup your serverless React app. If you would like to go further I encourage you to read the Next.js and ZEIT Now documentation.

5 — Who to ask for help

• If you have any questions about ZEIT Now and Next.js, post your question in the ZEIT chat community.
• Lastly, give me a follow on Twitter and tweet or DM me any questions. I tend to be very active on Twitter.

Looking forward to more articles about serverless? Follow Adrian Carolli on Twitter to keep updated. He works as a React developer at G2i, a hiring platform run by engineers that matches you with pre-vetted React, React Native, GraphQL, and native iOS/Android focused engineers you can trust.

---