👉 You need to try NextJS for your next web app

<Andrew Rymaruk />
Nov 23 · 5 min read

NextJS is an awesome framework built by Zeit to create Web Applications. It has many great features and advantages, which can make NextJS your first choice for building your next web application.

The main features of NextJS. Look at that 👇

  • Server-Side Rendering

You can render React components on the server-side, before sending the HTML to the client.

  • Automatic Routing (Create Dynamic Pages)

Any URL is mapped to the filesystem, to files put in the pages folder, and you don't need any configuration (you have customization options of course).

  • Single File Components

Using styled-jsx, completely integrated as built by the same team, it's trivial to add styles scoped to the component.

  • Ecosystem Compatibility

Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.

  • Automatic Code Splitting

Pages are rendered with just the libraries and JavaScript that they need, no more. Instead of generating one single JavaScript file containing all the app code, the app is broken up automatically by Next.js in several different resources.

Next.js does that by analyzing the resources imported.

  • Prefetching

The Link component, used to link together different pages, supports a prefetch prop which automatically prefetches page resources (including code missing due to code splitting) in the background.

  • Static Exports

Static exports: with the next export you can export a fully static site from your application.

  • TypeScript Support

Next.js is written in TypeScript and as such comes with excellent TypeScript support :)

  • AMP pages

Yes! Next.js supports hybrid and AMP only pages (make sure you are using Next.js 8.1 or newer)

NextJS vs React

NextJS is the React framework. React is a library for building user interfaces. NextJS uses React, a framework for server-rendered React applications.

What NextJS does is it renders React apps on the server (SSR).

Two can’t really be compared, because NextJS wraps React, and they basically work together.

It provides a common structure that allows you to easily build a frontend React application and transparently handles server-side rendering for you.

How to install Next.js?

We can choose 2 routes now: using create-next-app or the classic approach which involves installing and setting up the NextJS app manually.

If you’re familiar with create-react-app, create-next-app is the same thing - except it creates a Next app instead of a React app.

npx create-next-app

The command asks for the app name, then creates a new folder for you, then downloads all the packages it needs (react, react-dom, next), as usual installs package.json.

and you can immediately run the sample app by running npm run dev

This is the recommended way to start a Next.js application, as it gives you structure and sample code to play with.

There’s more than just that default sample application.

Also, you can use any of the examples stored at https://github.com/zeit/next.js/tree/canary/examples using the --example option

The SSR really works

If we create a site using Next.js, the site pages are rendered on the server, which delivers HTML to the browser.

Let’s make sure.

Just view the source of the app. Using Chrome you can right-click anywhere on the page, and press View Page Source.

We don’t need to set up anything, server-side rendering is already working for us. No configuration unless it’s needed. Automatic hot-code reloading, error reporting, source maps, transpilation for older browsers.

Only JavaScript. Everything is a function

Every route within Next.js is simply an ES6 module that exports a function or class that extends from React.Component.

The advantage of this approach over similar models is that your entire system remains highly composable and testable.

For example, a component can be rendered directly, or be imported and rendered by another top-level component.

We’ve also made the decision to embrace CSS-in-JS.

Automatic server rendering and code splitting

Two tasks are most desirable:

  • Server-Side Rendering
  • Splitting your app’s build into smaller bundles

With Next.js, every component inside pages/ gets server-rendered automatically and their scripts inlined.

When a component is loaded dynamically through <Link prefetch /> or the router, we fetch a JSON based representation of the page which likewise contains its scripts.

This means that a certain page could have an extensive list of imports.

Data fetching is up to the developer

Server-rendering of static JSX is an important achievement, but real-world applications deal with dynamic data coming from different API calls and network requests.

Next.js makes a very important extension to the React’s Component contract: getInitialProps.

A page that fetches some data would look as follows

As you can see, the contract is very simple and unopinionated: getInitialProps must return a Promise that resolves to a `JavaScript` object, which then populates the component's props.

This makes Next.js play well with REST APIs, GraphQL and even global-state management libraries Redux.

Simple deployment

All it takes to deploy a Next.js app is to run next build followed by next start.

In my opinion, it strikes a good balance between flexibility and smart defaults, but it’s certainly not a solution to every problem.

JavaScript in Plain English

Learn the web's most important programming language.

<Andrew Rymaruk />

Written by

✅ CIW JavaScript Specialist 🚀I love JS programming and coffee ☕ I'm ready for the next challenge ;) http://rymaruk.com

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade