Real-World Next.js E-Book

Michele Riva

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 354

Veröffentlichungsjahr: 2022

Beschreibung

Next.js is a scalable and high-performance React.js framework for modern web development and provides a large set of features, such as hybrid rendering, route prefetching, automatic image optimization, and internationalization, out of the box. If you are looking to create a blog, an e-commerce website, or a simple website, this book will show you how you can use the multipurpose Next.js framework to create an impressive user experience.
Starting with the basics of Next.js, the book demonstrates how the framework can help you reach your development goals. You'll realize how versatile Next.js is as you build real-world applications with step-by-step explanations. This Next.js book will guide you in choosing the right rendering methodology for your website, securing it, and deploying it to different providers, all while focusing on performance and developer happiness.
By the end of the book, you'll be able to design, build, and deploy modern architectures using Next.js with any headless CMS or data source.

Leseprobe

Real-World Next.js

Build scalable, high-performance, and modern web applications using Next.js, the React framework for production

Michele Riva

BIRMINGHAM—MUMBAI

Real-World Next.js

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Aamir Ahmed

Content Development Editor: Feza Shaikh

Technical Editor: Simran Udasi

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Roshan Kawale

Marketing Coordinator: Anamika Singh

First published: January 2022

Production reference: 1310122

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-349-3

www.packt.com

I want to dedicate this book to Alice. It wouldn't have been possible without your patience, support, and love

- Michele Riva

Contributors

About the author

Michele Riva is a passionate and experienced software architect and Google Developer Expert from Milan, Italy. Over the years, he has contributed to many open source projects from big companies and foundations in many different programming languages and paradigms, including Haskell, Elixir, Go, and TypeScript. He has also written dozens of public domain articles on a broad range of topics and given many talks at international conferences and meetups.

While writing this book, he worked as a senior software engineer in the architecture team of ViacomCBS, building a multi-tenant Node.js application at the heart of their streaming websites and networks.

Currently, he's employed as a senior software architect at NearForm.

About the reviewers

Alberto Schiabel (@jkomyno) is a software engineer from Venice who sold his first apps in his teenage years. He obtained a master's degree in computer science from the University of Padua and has collaborated with other universities in Europe. Alberto has worked in several product and consulting software companies, but he has also worked as a freelancer and start-up cofounder. He enjoys mentoring colleagues and learning something new every day. Alberto discovered Node.js and React.js in 2015 and has worked with these technologies ever since, also as an open source maintainer. He's now primarily interested in distributed backend architectures and strongly typed functional programming, but he's amazed by the beauty of Next.js nonetheless.

Christian Sarnataro is a software engineer with more than 15 years of experience in web development. He is always trying to keep up to date with the latest technologies and best practices with a specific focus, in the last few years, on frontend development.

He is currently a senior SW engineer at Arduino, an open source hardware and software company well known for its electronic prototyping and IoT platforms.

In the past, he has worked for mid-to-large companies as a web architect, mobile developer, and teacher.

Table of Contents

Preface

Part 1: Introduction to Next.js

Chapter 1: A Brief Introduction to Next.js

Technical requirements

Introducing Next.js

Comparing Next.js to other alternatives

Gatsby

Razzle

Nuxt.js

Angular Universal

So, why Next.js?

Moving from React to Next.js

Getting started with Next.js

Default project structure

TypeScript integration

Custom Babel and webpack configuration

Summary

Chapter 2: Exploring Different Rendering Strategies

Technical requirements

Server-side rendering (SSR)

Client-side rendering (CSR)

Using the React.useEffect hook

Using the process.browser variable

Using dynamic component loading

Static site generation

Summary

Chapter 3: Next.js Basics and Built-In Components

Technical requirements

Routing system

Using route variables inside our pages

Using route variables inside components

Client-side navigation

Serving static assets

Next.js' automatic image optimization

Running automatic image optimization on external services

Handling metadata

Grouping common meta tags

Customizing _app.js and _document.js pages

The _app.js page

The _document.js page

Part 2: Hands-On Next.js

Chapter 4: Organizing the Code Base and Fetching Data in Next.js

Technical requirements

Organizing the folder structure

Organizing the components

Organizing utilities

Organizing static assets

Organizing styles

Lib files

Data fetching

Fetching data on the server side

Consuming REST APIs on the server side

Fetching data on the client side

Consuming REST APIs on the client side

Consuming GraphQL APIs

Summary

Chapter 5: Managing Local and Global States in Next.js

Technical requirements

Local state management

Global state management

Using the Context APIs

Using Redux

Summary

Chapter 6: CSS and Built-In Styling Methods

Technical requirements

Exploring and using Styled JSX

CSS modules

Integrating SASS with Next.js

Summary

Chapter 7: Using UI Frameworks

Technical requirements

An introduction to UI libraries

Integrating Chakra UI in Next.js

Building an employee directory with Chakra UI and Next.js

Conclusive words about Chakra UI

Integrating TailwindCSS in Next.js

Integrating Headless UI

Summary

Chapter 8: Using a Custom Server

Technical requirements

About using a custom server

Using a custom Express.js server

Using a custom Fastify server

Summary

Chapter 9: Testing Next.js

Technical requirements

An introduction to testing

Running unit and integration tests

End-to-end testing with Cypress

Summary

Chapter 10: Working with SEO and Managing Performance

Technical requirements

SEO and performance – an introduction

Rendering strategies, from a performance and SEO perspective

The reasoning behind a real-world website example

Rendering the image detail page

Private routes

A quick recap regarding our decisions

Working with SEO

Dealing with performance

Summary

Chapter 11: Different Deployment Platforms

Technical requirements

A brief introduction to different deployment platforms

Deploying to the Vercel platform

Deploying a static site to a CDN

Choosing a CDN

Deploying Next.js on any server

Running Next.js in a Docker container

Summary

Part 3: Next.js by Example

Chapter 12: Managing Authentication and User Sessions

Technical requirements

A brief introduction to user sessions and authentication

Understanding JSON web tokens

Custom authentication – the good, the bad, and the ugly

Implementing authentication using Auth0

Customizing Auth0

Summary

Chapter 13: Building an E-Commerce Website with Next.js and GraphCMS

Technical requirements

Creating e-commerce websites for the modern web

Setting up GraphCMS

Creating the storefront, cart, and product detail pages

Processing payments using Stripe

Summary

Chapter 14: Example Projects and Next Steps for Learning More

One framework, endless possibilities

Real-world applications for practicing with Next.js

Streaming website

Blogging platform

Real-time chat website

Next steps

Summary

Other Books You May Enjoy

Part 1: Introduction to Next.js

In this part, we will cover the basics of Next.js, starting with what differentiates it from other frameworks, its unique features, and how to bootstrap a new project from scratch.

This section comprises the following chapters:

Chapter 1, A Brief Introduction to Next.jsChapter 2, Exploring Different Rendering StrategiesChapter 3, Next.js Basics and Built-In Components

Chapter 2: Exploring Different Rendering Strategies

When talking about rendering strategies, we refer to how we serve a web page (or a web application) to a web browser. There are frameworks, such as Gatsby (as seen in the previous chapter), that are incredibly good at serving statically generated pages. Other frameworks will make it easy to create server-side rendered pages.

But Next.js brings those concepts to a whole new level, letting you decide which page should be rendered at build time and which should be served dynamically at runtime, regenerating the entire page for each request making certain parts of your applications incredibly dynamic. The framework also allows you to decide which components should exclusively be rendered on the client side, making your development experience extremely satisfying.

In this chapter, we'll have a closer look at:

How to dynamically render a page for each request using server-side renderingDifferent ways to render certain components on the client side onlyGenerating static pages at build timeHow to regenerate static pages in production using incremental static regeneration

Technical requirements

To run the code examples in this chapter, make sure you have Node.js and npm installed on your machine. As an alternative, you can use an online IDE such as https://repl.it or https://codesandbox.io.

You can find the code for this chapter in the GitHub repository: https://github.com/PacktPublishing/Real-World-Next.js.

Server-side rendering (SSR)

Even though server-side rendering (SSR) sounds like a new term in the developer's vocabulary, it is actually the most common way for serving web pages. If you think of languages such as PHP, Ruby, or Python, they all render the HTML on the server before sending it to the browser, which will make the markup dynamic once all the JavaScript contents have been loaded.

Well, Next.js does the same thing by dynamically rendering an HTML page on the server for each request, then sending it to the web browser. The framework will also inject its own scripts to make the server-side rendered pages dynamic in a process called hydration.

Imagine you're building a blog and you want to display all the articles written by a specific author on a single page. This can be a great use case for SSR: a user wants to access this page, so the server renders it and sends the resulting HTML to the client. At this point, the browser will download all the scripts requested by the page and hydrate the DOM, making it interactive without any kind of page refresh or glitch (you can read more about React hydration at https://reactjs.org/docs/react-dom.html#hydrate). From this point, thanks to React hydration, the web app can also become a single-page application (SPA), taking all the advantages of both client-side rendering (CSR) (as we'll see in the next section) and SSR.

Talking about the advantages of adopting a specific rendering strategy, SSR provides multiple benefits over the standard React CSR:

More secure web apps: Rendering a page on the server side means that activities such as managing cookies, calling private APIs, and data validation happen on the server, so we will never expose private data to the client.More compatible websites