First Steps with NextJS

IT Tips & Insights: Learn the basics about the Next.js open-source web development framework, and how it relates to React.

By Matias Zatz, Software Engineer

What is Next.js?

Next.js defines itself as The React Framework for Production, which leads us to our first characteristic. Next.js was created by Vercel as a framework for React … but isn’t React a framework by itself?

As it says on its website, React is a JavaScript library for building user interfaces. React provides core functionality that focuses on building user interfaces while Next.js is built on top of React (and in the end on top of Node.js), enhancing its features and solving common problems that might need a third-party package (like routing or authentication), which makes building React apps easier.

Features of Next.js

Server-Side Rendering (SSR)

By default, React works with client-side rendering, meaning that each time the user requests a page they get an ‘empty’ HTML file with no content but the “root” element that React uses for rendering content. This might lead to some problems like the “flickering” state that some apps have while fetching data from an API. You may see a “Loading…” placeholder instead of the content, a process that only occurs when the client loads and executes the javascript code. Also if SEO matters to your app, client-side rendering makes it difficult for search engines crawlers to index it.

Next.js solves these issues with server-side rendering. This feature is the out-of-the-box default behavior for Next without any extra setup required by the developer. With SSR, the requested page is pre-rendered on the server before being served to the client. This solves flickering data problems by rendering all of the content on the client, which makes it available for search engines to crawl.

Routing

When talking about routing in any SPA (single page app) we actually don’t have any routes since the entire app is rendered in a single HTML file. However, we give the user the illusion of being redirected to different pages by having a component watching the browser URL and loading different components based on it while preventing the default behavior of sending a http request to the server.

React doesn’t have any router, so it needs a third-party package like React Router to enable routing, and this package needs to be set up with code when you want to add, modify or remove a route. On the other hand, Next.js comes with a file-based routing feature that defines pages and routes with files and folders, getting rid of extra configurations. It’s worth mentioning that despite this feature being based on the file & folder structure, Next.js supports nested and dynamic routes.

Full-Stack React Apps

Last but not least, this feature allows us to easily add backend code to our Next.js app and build our own Node.js API which works with our system files or reaches a database and stores data while remaining in one project. This makes Next.js a true full-stack framework for React as we can have our user interface and backend without having to build a standalone API.

Should I Choose Next.js Over React?

For starters, to use Next.js you should have some React knowledge beforehand, because in the end you are building a React app. Having said this, the choice is yours, and it should be based on the project type and its goals.

React is an excellent starting point, and you can expand its capabilities by adding tools such as Redux and React Router. Also, React has a bigger, well-established community that will help you solve almost any issue you may encounter. Still, Next.js is getting bigger everyday, and includes a lot of built-in features that will make your coding faster and easier.