Book Image

Next.js Quick Start Guide

By : Kirill Konshin
Book Image

Next.js Quick Start Guide

By: Kirill Konshin

Overview of this book

Next.js is a powerful addition to the ever-growing and dynamic JavaScript world. Built on top of React, Webpack, and Babel, it is a minimalistic framework for server-rendered universal JavaScript applications. This book will show you the best practices for building sites using Next. js, enabling you to build SEO-friendly and superfast websites. This book will guide you from building a simple single page app to a scalable and reliable client-server infrastructure. You will explore code sharing between client and server, universal modules, and server-side rendering. The book will take you through the core Next.js concepts that everyone is talking about – hot reloading, code splitting, routing, server rendering, transpilation, CSS isolation, and more. You will learn ways of implementing them in order to create your own universal JavaScript application. You will walk through the building and deployment stages of your applications with the JSON API,customizing the confguration, error handling,data fetching, deploying to production, and authentication.
Table of Contents (9 chapters)

Using Redux with Next.js

The vast majority of traditional UI apps use the MVC pattern to organize state management. But in real-time client-side apps, this also quickly becomes a pain because models need to be synchronized, state is scattered, and there is no single source of truth. Different models can influence other models and the situation quickly gets out of hand. Another issue is bidirectional data flow between view and model (through the controller), where the view calls some controller method, which in turn calls a model method, which causes other models to update, then the updated state is passed back to the view.

In order to overcome this, the FLUX ideology was created. In this ideology, the direction of data/event propagation is constant; View does not communicate back and forth with the model. Instead, view issues Action and Dispatcher pick up those actions to update...