A quick introduction to Next.js

Next.js, a React framework that leveled up the game of React from just front-end to Fullstack.

If you haven't developed with Next.js yet, lemme tell you that you should be. Why? Because you can do hella lot things here more than a plain 'ol React App (you'll later see why).

But to give you a hint, Next.js allows you to build a website or webapp in different ways. You can: serve statically generated files like HTML in a CDN, in-demand or per-request server-side rendering of HTML, and heck, you can even build an API with Next.js! Can you imagine building an API within React?

But anyways, let's take a quick look on Next.js as a Fullstack framework.

Next.js as a FullStack solution

Unlike React.js, which is pure front end, Next.js is fullstack.

Just like what I said on the introduction, you can build websites using 3 different approaches in web development: serve static files, send server generated sites, or even build an API.

But how do you know which approach to use at what scenario?

My tip (and Next.js documentation tip):

Static Site - If a page on your site is not always changing. Meaning, it's the same regardless of who requested it or at what time (i.e. about page, or log in page, or sign up page, etc.). That also means the page can be generated on build time and cached on a CDN, which is the fastest way for our website to be served and the cheapest to host (you can even host it for free, like in GitHub pages).

Server Side Rendering - If a page often change, or always change, or if it depends the user requesting it, (i.e. user account, news feed, etc.), then that is when you use Server Side rendering.

API - This is not actually specified by Next.js Documentation as alternative approach, but if you're client side app needs to query the database, then do that in the backend and expose this endpoint for the client. This might be used by client side rendered page. But you can also do other backend services like send POST request to save a data on the database and again, expose this endpoint. You can define your API with a syntax almost similar to an express API.

Among the choices, Next.js Documentation stressed out to choose static site whenever possible, given it's speed and being low-cost. SSR is slower than static ones because it runs on a server and can be expensive.

But whatever approach you want or need in your app, Next.js have a support for that.

Before we move to the next part, let me point out that Next.js is not an 'end all be all' solution, because for example, Next.js have no native support to things like Real Time Video Chat. But no worries, Next.js is a JAMstack solution. The 'A' in JAMstack is API, and we can use a third-party API as a solution for such needs (an example would be Agora).

Ok, but how do we compare Next.js with React besides Next being fullstack?

Next.js vs React

A question I have when I started learning Next.js is "Is Next.js another wild javascript module released in the JavacSript Jungle?"

Turns out the answer is both yes and no.

In fact, Next.js is not actually different from React, because Next.js is a React framework and yeah, it's like coming from the lineage of React.

The additional features of Next.js to React are what makes it cool and popular among JavaScript folks.

First off, Next.js deals with the common problems in a React App, like SEO and optimization. Additional to that are the in-built support for things like routing and css (including Sass).

So yeah, those are just some things to mention about the pros of Next.js.

Create Next App

Before I forget to mention, starting a brand new Next.js app is quite similar to React which can be done by firing an npx create-next-app <app-name> on your terminal, just like the good 'ol React. Again, instead of create-react-app, you see it's create-next-app.

So yeah, this will create a folder named after the one you specified and build the Next.js folder structure, install it's dependencies, and add some boilerplate code (again, just like React, but tailored in the needs of a Next App).

You can try that out yourself and check the Documentation if you're feeling lost.

Next.js seems quite good right? But...

Should you ditch React for Next.js?

Woah, that's a strong question!

My takes on this would be bias, but I think, not completely (because hey, you're still using react). Before thinking about fully adopting Next.js, you have to consider that it's still a growing market, and if you're a typical dev, you hold a job (or wants to, like me, I'm available for a position if you want to reach out...😏), the job market is again on the side of React. The reasons are up to you, but Next.js is still a pretty darn choice for new and future projects.

But personally, I believe Next.js is the future of React and Web Development itself. We're on the advent of yet another revolution in tech, the JAMstack, and Next.js is in perfect position for this event. And if you have an upcoming project, consider Next.js, and discover the advantages it will present you. Or maybe you're just starting out, take my word for it, try Next.js.

To be honest, I myself adopted Next.js and I haven't used create-react-app for a while now, and so far, I have no doubt with my choice.

But whatever your condition was, your choice depends on you (but I still recommend Next.js, because come on! Why should I write this if that's not the point right? Just kidding...... Try Next.js)

Hopefully this article helped you to get up to speed with 'What the heck is Next.js'.

If you want further readings, you can check out their Documentation or follow me up here where I'll be posting more Next.js blogs.

Btw, Follow me on Twitter!