Introduction to Nextjs

Nextjs is an extension of the React framework with the goal to streamline the creation of single-page JavaScript applications by introducing various important features. These features all come together to lower the learning curve of creating complex React apps by doing the hardest work for you! Nextjs integrates seamlessly with your existing Node.js projects and Express apps. It also provide server side rendering to speed up those page loads. Right out of the box, the framework supports serverless builds which is fantastic for scalability. Most importantly, Next handles client side routing for you and in one of the easiest ways possible.

Check out the Nextjs github repo here.

Learn Nextjs

Next provides a fantastic learning experience on their site. They break down everything from the basics to the more complex. Sign up with your github account and get learning!

If you prefer a book to read about Next, check out Nextjs Quick Start Guide: Server-side rendering done right

Installation

To install Nextjs, use npx and create a next app like so:

installing next js with npx

npx is installed alongside npm 5.2+. For older versions of npm, you can install create-next-app using npm.

installing next js with npm 5.1 or lower

Nextjs Features

What are the key features Nextjs brings to the table? Let’s take a look:

  • Server side rendering
  • Client side routing
  • Exporting to a Static Site
  • Easy integration

Server Side Rendering

Nextjs is optimized for speed. When you create a Next app, you optimize pages by using server side rendering instead of having the client render everything. This speeds up every page load, especially on slower devices. Lower page load times means high conversions since fewer people are bouncing due to page load times.

next js graphic on server side rendering

Server side rendering also guarantees easier search engine indexing and social media previews. This is a great feature to have for anyone looking to optimize their SEO.

When we render pages on the server instead of the client, we can prefetch data and pages to reduce the number of reloads we need to do while viewing the site. Fewer reloads and calls to the server means lower latency and bandwidth which leads to a better mobile experience.

Client Side Routing

One of the most important and useful features of Next is its client side routing. This allows us to write pages and then deploy it without having to worry about the routing ourselves. This is done by creating all the necessary pages within the pages directory. Every component you create here is accessible via an HTML <a> tag wrapped in a Nextjs <Link> like so:

next js client side routing example

This will allow us to access the page via localhost:3000/about or from the index page, we can click the link and be directed to the about page. The best part is that since our link is wrapped in a Nextjs <Link> the page is pre-fetched from the server, leading to quicker load times since there’s no page loading.

We can also use this to pass params around in our queries. We can do this like so:

query params in next js

By adding ?title=${props.title} to our /post route, we can then pass the prop to the post page. All we need to do from here is create the post page and create a router to extract the params from the query.

getting query params in next js

The router object allows us to extract parameters from our query string and update our pages with that data. For example, we might have the above page and instead of having “This is the blog post content.” we query a database for that title’s content and return that. This means our entire blog runs in one single page and all we need to do that is two components.

Export to Static Site

Building a static site from a Nextjs project is as simple as two commands!

export next js app to static site

This allows you to use your Nextjs app on a CDN for low latency, no server load, and fast delivery. You can even deploy to places like S3 or Github Pages since it’s a static site. If you want to host your static site with S3 but don’t know how, I wrote an article about creating a static site using AWS S3 and Route53 which will get you up and running in no time.

Even though it’s a static site, with the powerful features that Nextjs provides like automatic code splitting, dynamic imports, and page prefetching, your site will feel more dynamic than static.

Easy Node.js and Express Integration

Nextjs is built on Node.js and is just an extension of it. This means that it integrates easily into your Node projects, especially your Express projects. To use Next with Express or your custom server, we need to make each endpoint resolve to a pages endpoint. Here is an example:

using next js with express or a custom server

This resolves /a to /pages/b and /b to /pages/a. I’m not entirely sure why you would want to do that exactly, but that is an official Nextjs example so we’ll go along with that.

What we’re doing is telling the app to use Nextjs instead but without changing much in the routing of the app. Next will handle the resolution to your pages folder.

Automatic Code Splitting

Nextjs natively comes with automatic code splitting to keep files sizes down by bundling the necessary code with each page. No unnecessary code means smaller page sizes. Smaller page sizes means faster load times, and who doesn’t like faster load times?

Who’s using Nextjs?

A surprising amount of enterprise teams are using Nextjs incuding:

And the list goes on and on. It definitely is a great time to learn Nextjs to stay ahead of the curve! The fastest way up to speed is by reading Nextjs Quick Start Guide: Server-side rendering done right or by heading over to Nextjs learning center

Before you go play around with Nextjs, check out this compilation of Full Stack developer extensions for VS Code which will help you write your app faster.

Stay up to date on my recent posts
Get the latest content first.
We respect your privacy.