Here I explain the features of Next.js and a few reminders to myself when building with it.

What is Next.js?

Next.js is a framework which sits on top of ReactJS. Taking advantage of SSR (server side rendering); this framework has made it easier to structure react applications, making them more efficent and easier to handle.

SSR

SSR stands for server side rendering. The server deals with all things required with the processing of JavaScript for rendering pages, this increases efficency within the application and ensures page rendering is a lot faster than in a normal ReactJS application.

How Does SSR Work?

You have a client and a server. The client deals with what you can see; everything on the web browser. The server is a bit more abstract, it deals with the data in a way that isn’t seen by the web browser. The client sends a request to the server for this data. These requests can be a GET request; in which you’re requesting some data that is on the server. You may make a request to POST some data, this means you are sending data to the server. Other requests include PUT, DELETE etc.

In the case of Next.js, the data is stored on the server. The client makes a request to the server and recieves a HTML page. The opposite of SSR is CSR (client-side rendering). For context, in CSR you would be requesting each component from the server.

Setting Up a Next.js App

npm create-next-app <app-name>

Structure

There are numerous wys to set up a Next.js application. This guide takes you through a standard next.js app. When you spin up a Next.js app, you will see you have a pages folder, a public folder and a styles folder. This structure isn’t too dissimilar to a ReactJS application however there are a few differences which make routing, links and creating pages a lot easier.

Creating components within the pages folder will automatically create a route for given component.

The public folder is similar to create-react-app, it includes a fav icon.

Routing/Pages

As mentioned previously, if you create a component under the pages folder, this will automatically create a route for that component. You can also create nested routes too by creating sub-components within the pages folder.

Example of nested routes:

Pages
index.js
  Person
    name.js

In the example above, the route would be /Person/name

Note that index.js is the root route and comes with create-next-app. You can also create a index.js in nested routes; for example in the Person folder you could have multiple components and to specify the /Person route, you would do this through the following example below:

Pages
index.js
  Person
    index.js
    name.js

Next.js also enables you to be able to handle dynamic routes. The example below demonstrates this:

Pages
index.js
  Person
    index.js
    [name.js]

The dynamic route of name.js would be /Person/[name]

Okay that covers routes but what about linking these pages within components? In a standard HTML file, you would use a href tag. In a React app you’re likely to use link via react-dom-router.

In Next.js, the two are sort of combined. Here is an example of a link: <Link href="/person">Person</Link>

Here is a basic example of linking with next.js apps:

import Link from "next/link";

const Index = () => (
  <div>
    <Link href="/about">
      <a>About</a>
    </Link>
  </div>
);

export default Index;

Data Handling

Example (via TypeScript):

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
}

Styling

The styling folder within the create-next-app includes two files, globals.css and Home.module.css. Stylesheets are linked like subcomponents.

import styles from "../styles/Home.module.css";

<h1 className={styles.title}>
  Welcome!
</h1>

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
}

Simple Code Sandbox Example