Overview: Hands-On Next.js.

Introduction

Next.js initially became popular thanks to its ability to make it easy to render React pages on the server instead of the client only. However, to render specific components, we often need some data coming from external sources, such as APIs and databases.

We’ll first see how to organize our folder structure because this will be the determinant for keeping the Next.js data flow neat when managing the application state, and then we’ll see how to integrate external REST and GraphQL APIs, both on the client and server side. As our application grows, its complexity will inevitably increase, and we need to be prepared for this since the bootstrapping phase of the project.

As soon as we implement new features, we’ll need to add new components, utilities, styles, and pages. For that reason, we’ll take a closer look at organizing our components on the basis of the atomic design principles, utility functions, and styles and how to make our code base ready for handling the application state quickly and neatly.