What is Next.js?

Next.js is an open-source JavaScript framework based on React. It is primarily used for developing web applications and static websites.

It offers various methods for page generation, including server-side rendering and static site generation. Additionally, by combining these methods, more detailed cache control can be implemented.

Next.js is a framework that combines ease of use with high performance, making it a popular choice among many developers.

It also works well with headless CMSs like microCMS, making it a frequently adopted framework in development that utilizes headless CMSs.

For more details, please visit the official Next.js website.

Building Methods

Next.js offers two types of building methods: App Router and Pages Router.

App Router

This is the latest building method available since Next.js version 13. Compared to the Pages Router, it allows for finer cache control and rendering control at the component and request levels, enabling the creation of higher-performance applications.
On the other hand, as a newer building method than the Pages Router, it has some drawbacks, such as a less developed surrounding ecosystem and being somewhat more complex in comparison to the Pages Router.

Pages Router

This is the traditional method of building with Next.js.
Since the construction method is relatively simple, it can be set up quickly. Additionally, there is a rich ecosystem of knowledge and libraries available for building with the Pages Router.
However, when creating a new application using Next.js, it is currently recommended to use the App Router. (Support for the Pages Router is still ongoing.)

In this tutorial, we will introduce how to build using both the App Router and the Pages Router.