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.

Related Content you might be interested in

Small book image
Real-World Next.js
Michele Riva
Feb, 2022 | 366 pages
Small book image
Build Applications with Meteor
Dobrin Ganev
May, 2017 | 388 pages
Small book image
React Cookbook
Carlos Santana Roldaacuten
Aug, 2018 | 580 pages
Table of Contents (9 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Introduction to Server-Side Rendering and Next.js
Introduction to Server-Side Rendering and Next.js
What is a single-page app?
Introduction to React
Why single-page apps suffer performance issues
Server side rendering
How to do server-side rendering with React
Summary
2
Next.js fundamentals
Next.js fundamentals
Installation of Next.js
Running Next.js in developer mode
Creating your first Next.js page
Running a Next.js production build
Making Next.js routing
Dynamic routing
Making Next.js routing masks – SEO-friendly URLs
Dynamic Component Loading (aka Lazy Components)
Adding styles to an application – CSS in JS
Adding media content – images, video, and audio
Adding interactive graphs and charts
Summary
3
Next.js Configuration
Next.js Configuration
Special pages
How to make custom configurations
Configuring Webpack
Configuring Babel
Summary
4
Next.js Data Flow
Next.js Data Flow
Nuances of fetching data on the client and on the server
Loading data from a remote server using vanilla Next.js
Using Redux with Next.js
Using GraphQL with Next.js to fetch data
Using the Apollo framework with Next.js to fetch data
Summary
5
Application Life Cycle Handlers and Business Logic
Application Life Cycle Handlers and Business Logic
Authentication
Access Control List, Roles, and Permissions
Business Rules Engine
Internationalization and Localization
Error handling
Caching
Analytics
Summary
6
Continuous Integration
Continuous Integration
What is automated deployment?
Writing unit tests for Next.js apps
Writing end-to-end tests for Next.js apps
Setting up CI for Next.js: Travis, Gitlab, and so on
Setting up cloud coverage statistics
Commit hooks
Summary
7
Containers
Containers
What is a container for a Next.js app?
Creating a Docker container for Next.js
Deploying to Heroku
Deploying to Now.sh
Summary
8
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Next.js Configuration

We have already touched on this topic slightly in the previous chapter, but this time let's dive a bit deeper into it.

Although Next.js provides lots and lots of perks out of the box, sometimes it is required to add some extra stuff, just like before, for CSS and image support.

Next.js, especially the latest version, offers a good amount of tools to customize the build and add lots of uncommon things.

In this chapter, we will learn about:

  • Special pages
  • How to make custom configurations
  • How to customize Webpack; for example, how to add TypeScript support
  • How to configure Babel
Previous Section
End of Section 1
Next Section