Introduction Guide to Next.js

#nextjs #react #beginners

Next.js is a React framework that ships with all the features you need for production. It gives you the best developer experience because it comes with several functionalities that would have been installed and handled on your own in a "vanilla" React app. In this guide, I will introduce you to Next.js by first explaining what Next is and why use such a tool, and then create a basic app with it.

This article is part of a series about Next.js. So feel free to subscribe to my newsletter to receive the next article in your inbox, if you find value on it.

If you're interested in learning Next.js in a comprehensive way, I highly recommend this bestseller course.

Let's dive in.

What is Next.js?

Next.js is a framework built with React, Node.js, Babel, and Webpack. It comes by default with handy features that are not available in a "vanilla" React App.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js allows you to export your website statically to HTML or render it on the server. It splits your code automatically, which makes your bundle size small and your app fast, because, in the end, only the JavaScript needed will be loading on the browser.

Next.js enables routing in your app by using the file-system-based routing. It will automatically use files located on the pages folder as a route, meaning that you even do not need to add an extra library to build a Multi-pages app with Next.

The Next.js framework provides a straightforward solution to build your API using API routes. You can build your entire API with GraphQL, Express, or your favorite framework and then connect it to a database using API routes. Next.js treats files under the pages/api directory as API endpoints.

Unlike React, Next has built-in support for Styled JSX, Sass, CSS modules, and more, which make Next.js app easy to style.

Creating a Next app

A Next.js app can be created manually or with Create Next App. We will go for the latter because it is the recommended way, and it will set up everything automatically for us.

So, open you your command-line interface (CLI) and run this following command:

  npx create-next-app my-app

Once the project is created, let's now explore the file structure:

File structure

├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md

As I mentioned earlier, Next.js uses the file system to enable routing in the app. Here, the index.js file is the Home page of the project. If you add a new file in the pages folder, it will be treated as a route.

Create Next App comes by default with the api folder, meaning that the hello.js file is an API endpoint. If you hit the API route http://localhost:3000/api/hello, you will get a response from the server.

Next.js uses the App component to initialize pages. The _app.js file allows you to override the default behavior of the component. If you have global styles or data that need to be sharing across your components, put them here. By the way, the underscore symbol (_) tells Next.js to not using the file as a route.

With this in place, we can now preview the project by running this command on the terminal: