Chapter 3: Next.js Basics and Built-In Components

Next.js is not only about server-side rendering. It provides some incredibly useful built-in components and functions that we can use to create performant, dynamic, and modern websites.

In this chapter, we're going to take a look at some concepts at the core of Next.js, such as routing systems, client-side navigation, serving optimized images, handling metadata, and more. These notions will be very beneficial once we move on to building some real-world applications with this framework.

We will also take a closer look at the _app.js and _document.js pages, which will allow us to customize our web app behavior in several ways.

In this chapter, we will cover the following topics:

• How the routing system works, both on the client and server sides
• How to optimize navigation between pages
• How Next.js serves static assets
• How to optimize image serving via automatic image optimization and the new Image component...

Technical requirements

To run the code examples in this chapter, you need to have both Node.js and npm installed on your local machine.

If you prefer, you can use an online IDE such as https://repl.it or https://codesandbox.io; they both support Next.js, and you don't need to install any dependency on your computer.

You can find the code for this chapter on the GitHub repository: https://github.com/PacktPublishing/Real-World-Next.js.

Routing system

If you're coming from client-side React, you might be familiar with libraries such as React Router, Reach Router, or Wouter. They allow you to create client-side routes only, meaning that all the pages will be created and rendered on the client side; no server-side rendering is involved.

Next.js uses a different approach: filesystem-based pages and routes. As seen in Chapter 2, Exploring Different Rendering Strategies, a default Next.js project ships with a pages/ directory. Every file inside that folder represents a new page/route for your application.

Therefore, when talking about a page, we refer to a React component exported from any of the .js, .jsx, .ts, or .tsx files inside the pages/ folder.

To make things a bit clearer, let's say that we want to create a simple website with just two pages; the first one will be the home page, while the second one will be a simple contact page. To do that, we will only need to create two new files inside our...

Serving static assets

Using the term static asset, we refer to all of those non-dynamic files, such as images, fonts, icons, compiled CSS, and JS files.

The easiest way to serve those assets is by using the default /public folder provided by Next.js. In fact, every file inside this folder will be considered and served as a static asset. We can prove that by creating a new file called index.txt and putting it inside the /public folder:

echo "Hello, world!" >> ./public/index.txt

If we now try to launch the server, when we go to http://localhost:3000/index.txt, we will see the text Hello, world! displayed in the browser.

In Chapter 4, Organizing the Code Base and Fetching Data in Next.js, we will take a closer look at organizing the public folder for serving common CSS and JS files, images, icons, and all the other types of static files.

Serving static assets is relatively easy. However, a specific type of file can critically affect your website performance...

Handling metadata

Correctly handling metadata is a crucial part of modern web development. To keep it simple, let's think about when we share a link on Facebook or Twitter. If we share the React website (https://reactjs.org) on Facebook, we will see the following card appear inside our post:

Figure 3.5 – Open Graph data of

To know which data should be displayed inside the card, Facebook uses a protocol called Open Graph (https://ogp.me). In order to give that information to any social network or website, we need to add some metadata to our pages.

So far, we haven't yet talked about how to set open graph data, HTML titles, or HTML meta tags dynamically. While a website could technically work even without that data, search engines would penalize your pages, as they would miss important information. The user experience could also be negatively affected as these meta tags would help the browser create an optimized experience for our users.

...

Customizing _app.js and _document.js pages

There are certain cases where you need to take control over page initialization, so that every time we render a page, Next.js will need to run certain operations before sending the resulting HTML to the client. To do that, the framework allows us to create two new files, called _app.js and _document.js, inside our pages/ directory.

The _app.js page

By default, Next.js ships with the following pages/_app.js file:

import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

As you can see, the function is just returning the Next.js page component (the Component prop) and its props (pageProps).

But now, let's say that we want to share a navigation bar between all the pages without manually importing that component on each page. We can start by creating the navbar inside components/Navbar.js:

import Link from 'next/link...

The rest of the chapter is locked

Customizing _app.js and _document.js pages

There are certain cases where you need to take control over page initialization, so that every time we render a page, Next.js will need to run certain operations before sending the resulting HTML to the client. To do that, the framework allows us to create two new files, called _app.js and _document.js, inside our pages/ directory.

The _app.js page

By default, Next.js ships with the following pages/_app.js file:

import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

As you can see, the function is just returning the Next.js page component (the Component prop) and its props (pageProps).

But now, let's say that we want to share a navigation bar between all the pages without manually importing that component on each page. We can start by creating the navbar inside components/Navbar.js:

import Link from 'next/link...