Introduction to Next.js

Get introduced to Next.js and its project directory structure.

We'll cover the following

What is Next.js?

Next.js is a framework for developing production-ready React applications. It provides many features to make a developer’s life easier. Lets take a look at some of the advantages that Next.js provides.

Next.js features

  • File-system based routing: Next.js provides an out-of-the-box functionality to handle the routes of a web application. Unlike React, where we have to use third-party libraries to handle routes and add code every time a new route has to be added, Next.js handles routes automatically.

  • Pre-rendering: Next.js generates the HTML before the page has to be loaded; in other words, it creates the page during build time and has it ready to be served whenever a user might request it. This provides better performance and search engine optimization for our web applications. This is the major reason Next.js is a good fit for Jamstack applications, because they can be built and kept on a CDN for fast delivery.

  • Server-side rendering: There are cases where the page can’t be rendered before the request, for example, if the page requires data from the request. For these cases, Next.js can generate React components on the server rather than the client.

  • Separate development and production environments: Next.js comes with a system that develops and builds applications separately. This allows the developer to focus more on the code rather than the configuration.

Let’s get started with the basics of Next.js. First and foremost, we need to know how to create a Next.js application.

Creating a Next.js application

Next.js applications can be created automatically by using the following command in the terminal: 

npx create-next-app@latest my-first-app

The npx command comes with the Node Package Manager, allowing us to execute npm packages without installing them first. The create-next-app@latest is a command line interface (CLI) tool that creates a Next.js application that we can start working on. This command creates a directory and names it my-first-app. This directory will contain all the files and folders required to develop and run a Next.js application.

Note: By default, the npx create-next-app@latest command sets up a JavaScript project. However, we can also set it up to use TypeScript instead. To set it up, we add the —-typescript or —-ts flag.

Our command should then look like this: npx create-next-app@latest my-first-app —-typescript.

Now let’s take a look at what the created application looks like.

Next.js application and project structure

The code provided below is the default version of the application that the npx create-next-app@latest command creates for us:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}
A boilerplate Next.js application created using the create-next-app command

First, let’s discuss the files and folders in our project directory and what they do:

  • /styles: This folder contains all of our .css files, which means that it contains all the styles we use in the application. This folder is just for better organization, because the style files can also be placed in other places inside the project.

  • /public: This folder contains all the public resources that the application will require. It can include resources such as logos, images, icons, etc.

  • /pages: This is the most important folder in a Next.js application, and is where we’ll be doing most of our work. It contains all the pages that our application has. The index.js file in this folder will be the root or the / route of our web application. However, the _app.js file is the entry point for a Next.js application. This means that the compiler first loads the _app.js file, and that file returns the pages of our application. The _app.js file is compiled first and it automatically loads the index.js file as the / route.

  • package.json: This file contains all the information about the project. This includes basic information about the project, such as the name and version. It also includes the scripts we can use for different tasks and the project’s dependencies. In our case, the dependencies are react, react-dom, and next.

  • pacakge-lock.json: This file contains information about the project, including the exact tree that was generated so that the subsequent installs have the same tree. This file ensures that the environment of the project remains the same wherever it’s run.

  • next.config.js: This file is the Next.js configuration file. It’s a regular Node.js module that can be used to keep environment variables, base paths, custom headers and much more.