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 GraphQL with Next.js to fetch data

In this chapter, we will learn how to use basic GraphQL with the Relay framework. But first, let's briefly talk about why GraphQL was introduced and what issues it solves.

When dealing with REST APIs, it is quite common to make some subsequent requests, for example, to get some entities and then for those entities get more sub-entities. By definition, REST endpoints should only provide one type of entity, and any thing else should be fetched from other endpoints, either by following HATEOAS links or by manually creating sub-requests. This increases the amount of network traffic, which forces all clients to re-implement logic for which sub-entities should be fetched and how, and badly affects the overall user interface. Of course, we can break the rules and put nested entities right there inside the API endpoint, but what if we have...