Next.js is a framework to help programmers build fast and modern web applications. Its main features are server-side rendering, easy routing, hot code reloading, automatic code splitting, prefetching of next pages and an easy deployment process. Next.js achieves these goals by being built on React and Node.
During this blog, we will discuss the architecture used by Next.js to achieve its goals. In our first post we will identify these goals in more detail and in later posts we will dive deep into the analysis of the project.
Traditionally, when browsers were much less capable than today, websites were mostly static with the logic being performed on the server. Back then, most websites served some HTML that was rendered using a templating language such as PHP, which would then be taken over on the client by a different codebase (powered by jQuery or similar).
In our previous essay, we introduced you to Next.js, a modern web framework for building React applications. We examined the vision of Next.js, analyzing the set of fundamental concepts and properties of the project and considering the project in its greater context. With this knowledge in mind, we can now try to understand this vision is realized through its architectural elements and relationships, and the principles of its design and evolution.
Two weeks ago, we took a stab at exploring and identifying the architectural elements and principles that underlie Next.js, a modern web framework for building React applications. Together these elements and principles realize the set of fundamental concepts and properties that form Next.js in its environment. If you haven’t done so yet, make sure to also read our first post on the vision of Next.js, in which we go more into depth into the foundations of its architecture.