Get Off the Ground with Next.js

Intro

Based on my experience of working with different frameworks in different programming languages, I can say that Developer Experience (DX) is very important when you want to get your creative programming solutions to life. When you get excited by your new project idea, you don’t want to spend hours configuring app bundling, code-splitting or server-side rendering for your new React project. That is where Next.js framework comes in handy to reduce the amount of boilerplate you write and let you focus on delivering real value to your users.

What is Next.js

Next.js is an open-source React framework that was first released in 2016 as a JavaScript toolchain with out-of-the-box functionality requiring no setup. Since that time, Next has become a popular production-ready framework with a huge community.

React vs. Next.js — What’s the Difference

You probably know that React is a library and not a framework, meaning that it needs some additional building blocks for developing production-grade apps. To name a few, a router component, an app bundler and a style engine. Next.js provides those missing pieces of the puzzle but still allows to fully utilize everything people love React for.

How to Create a Next.js App

To start with Next, make sure you have Node.js > 10 installed on your machine.

npx create-next-app first-nextjs-app
cd first-nextjs-app
yarn dev

Next.js App Folder Structure

Open the project folder in VSCode:

cd first-nextjs-app
code .

How to Install React Developer Tools

You know that Next.js is a React framework, so you can make development more pleasant by installing the React Developer Tools plugin for your browser. To do that follow your browser-specific link and press install For Chrome For Firefox
After installing the browser extension, the React Developer Tools icon will appear in your extensions bar and the corresponding Component tab will be added to your browser developer tools window.

How to Style React Components in Next.js

Next supports a few styling approaches out of the box, such as inline styles, standard CSS file includes and CSS modules.

Inline styles

<p style={{ color: 'red', fontWeight: "bold" }}>red text</p>

CSS file include

/* styles.css */
.red {
color: red;
}

/* component.jsx */
import "styles.css";

<div className="red">Red</div>

CSS Modules

To use CSS file as a module, name it *.module.css

/* component.module.css */
.red {
color: red;
}

/* component.jsx */
import classes from "component.module.css";

<div className={classes.red}>Red</div>
yarn add -D sass

Next.js Routing System

Scripts which are located in the pages/ folder of the app are converted into routes automatically. There are two types of routes in Next, such as page routes and API routes. Let’s try both of them.

Page routes

Create pages/time.js with the following content:

import React from 'react';export default function Time() {
return (
<div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: '100vh'
}}>
Time: {(new Date()).toLocaleTimeString()}
</div>
)
}

API routes

Create the time.js file in the pages/api/ folder:

export default function handler(req, res) {
res.status(200).json({
time: (new Date()).toLocaleTimeString() }
);
}
{"time":"8:43:48 AM"}

Next.js Application Configuration

There are two officially supported ways to store app configuration in Next, such as runtime configuration with next.config.js and build-time configuration with .env files.

Runtime configuration

The runtime configuration is primarily used for storing Next.js own settings. Even though it’s possible to use it for app settings too, it’s not recommended because the runtime configuration affects performance and prevents the page from being automatically statically optimized.

Built-in time configuration

In a simple case scenario, it’s enough to have a single .env.local configuration file for production and development environments with variables defined the following way:

# .env.local
APP_DOMAIN="example.com"
APP_URL="https://${APP_DOMAIN}/"
console.log(process.env.APP_URL);
NEXT_PUBLIC_APP_URL="https://example.com"

How to Implement Dynamic Imports in Next.js

Dynamic import() of JavaScript modules allows you to split bundled code into a few smaller chunks and load them on-demand (aka lazy-loading).

import("../lib/crypto").then(({encrypt}) => {
console.log(encrypt("PASSWORD"));
});
export default function DynamicComponent() {
return (
<div>Loaded dynamically</div>
)
}
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(
() => import('../components/DynamicComponent')
);

export default function Home() {
return (
<div>
<DynamicComponent />
</div>
)
}
const DynamicComponent = dynamic(
() => import('../components/DynamicComponent'),
{ ssr: false }
);

How to Deploy Next.js App

Static app

Next makes it easy to generate fully-static sites which can be hosted anywhere without the need for a Node engine.
All you need to do is add export command to your package.json scripts:

"scripts": {
"export": "next build && next export"
}
yarn export

Standalone app with PM2

Alternatively, you can keep your app dynamic and run it as a standalone Node.js app, for example on port 80:

next build && next start -p 80

Standalone app with Docker

If you enjoy using Docker for hosting your apps as many of us do, follow the with-docker example from the official examples. You will find a multi-stage Dockerfile there which is tuned for Next.js apps.

Serveless app

For those who build serverless apps, starting from version 8, Next supports a serverless deployment model where each page in the pages/ folder is converted into a standalone lambda function.
To enable the serverless mode in Next.js, add the serverless build target through your next.config.js:

// next.config.js
module.exports = {
target: 'serverless'
}

To Sum Up

As you may see, Next.js simplifies development of React apps and helps focusing on the most important things – your app logic and UI. It has everything which is necessary for building modern frontend-rich and API-powered apps. And because of its ability to generate static HTML sites, it’s also suitable for content-only projects, such as blogs and corporate sites.

Next Steps

Nothing works better than practice, so I recommend you come up with a simple project idea and get your hands dirty with Next to cement what you’ve already learned.

File system as a service for web and mobile apps