Real-World Next.js

Michele Riva

• Publisher: Packt Publishing
• Year: 2022
• eBook ISBN: 9781801079877
• Edition: 1
• Topic: Design
• Subtopic: Web Programming

Learn how to use Next.js for building web apps without compromising performance, user experience, and developer happinessKey Features• Develop scalable web applications using Next.js• Use Next.js as a frontend for existing backends and e-commerce websites and understand how to implement it with any headless CMS• Deploy Next.js on different platforms, such as Vercel, DigitalOcean, and AWS, or on your own serverBook DescriptionNext.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.What you will learn• Get up to speed with Next.js essentials and learn how to build apps quickly• Understand how to create scalable Next.js architectures• Choose between different rendering strategies, such as client-side rendering (CSR), static site generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR)• Write unit tests and integration tests in your Next.js application• Discover the powerful routing system and Next.js' built-in components• Design and build modern architectures with Next.js using GraphCMS or any headless CMSWho this book is forThis book is for web developers who want to improve their React skills by building scalable and maintainable full-stack applications using the modern Next.js web framework. Intermediate-level knowledge of ES6+, React, Node.js, and REST is assumed.

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.js
• Chapter 2, Exploring Different Rendering Strategies
• Chapter 3, Next.js Basics and Built-In Components

Chapter 1: A Brief Introduction to Next.js

Next.js is an open source JavaScript web framework for React that ships with a rich set of features out of the box, such as server-side rendering, static site generation, and incremental static regeneration. These are just some of the many built-in components and plugins that make Next.js a framework ready for both enterprise-level applications and small websites.

This book aims to show you the full potential of this framework while building real-world applications and use cases, such as e-commerce websites and blogging platforms. You will learn the basics of Next.js, how to choose between different rendering strategies and deployment methodologies, and different tips and approaches for making your web application both scalable and maintainable.

In this chapter, we will cover the following topics:

• Introduction to the Next.js framework
• Comparing Next.js with other popular alternatives
• Differences between Next.js and client-side React
• Anatomy of a default Next.js project
• How to develop Next.js applications using TypeScript
• How to customize both Babel and webpack configurations

Technical requirements

To get started with Next.js, you need to install a couple of dependencies on your machine.

First of all, you need to install Node.js and npm. Please refer to this blog post if you need a detailed guide for installing them: https://www.nodejsdesignpatterns.com/blog/5-ways-to-install-node-js.

If you don't want to install Node.js on your local machine, some online platforms will let you follow the code examples in this book using an online IDE for free, such as https://codesandbox.io and https://repl.it.

Once you have both Node.js and npm installed (or you're using an online environment), you'll only need to follow the instructions displayed in each section of this book for installing the required project-specific dependencies using npm.

You can find complete code examples on GitHub under the following repository: https://github.com/PacktPublishing/Real-World-Next.js. Feel free to fork, clone, and edit this repository for any experimentation with Next.js.

Introducing Next.js

Web development has changed a lot over the last few years. Before the advent of modern JavaScript frameworks, creating dynamic web applications was complex, and it required many different libraries and configurations to make them work as expected.

Angular, React, Vue, and all the other frameworks have enabled the web to evolve very quickly, and brought with them some very innovative ideas to frontend web development.

React, in particular, was created by Jordan Walke at Facebook and was heavily influenced by the XHP Hack Library. XHP allowed Facebook's PHP and Hack developers to create reusable components for the frontend of their applications. The JavaScript library became open source in 2013 and forever changed how we build websites, web apps, native apps (with React Native later on), and even VR experiences (with React VR). As a result, React has quickly become one of the most loved and popular JavaScript libraries, with millions of websites using it in production for many different purposes.

There was just one problem: by default, React runs on the client side (meaning that it runs on the web browser), so a web application written entirely with that library could negatively affect Search Engine Optimization (SEO) and initial load performance, as it takes some time to be correctly rendered on screen. In fact, to display the complete web app, the browser had to download the entire application bundle, parse its content, then execute it and render the result in the browser, which could take up to a few seconds (with very large applications).

Many companies and developers started investigating how to pre-render the application on the server, letting the browser display the rendered React app as plain HTML, making it interactive as soon as the JavaScript bundle has been transferred to the client.

Then, Vercel came up with Next.js, which has turned out to be a game-changer.

Since its first release, the framework has provided many innovative features out of the box, such as automatic code-splitting, server-side rendering, file-based routing systems, route pre-fetching, and so on. Next.js showed how easy it should be to write universal web applications by allowing developers to write reusable code for both client and server sides and making very complex tasks (such as code-splitting and server-side rendering) effortless to implement.

Today, Next.js provides tons of new features out of the box, such as the following:

• Static site generation
• Incremental static generation
• Native TypeScript support
• Automatic polyfills
• Image optimization
• Support for internationalization
• Performance analytics

All this, along with many other great features that we'll look at in depth later on in this book.

Today, Next.js is used in production by top-level companies such as Netflix, Twitch, TikTok, Hulu, Nike, Uber, Elastic, and many others. If you're interested, you can read the complete list at https://nextjs.org/showcase.

Next.js showed how versatile React could be for building many different applications at any scale, and it's not surprising to see it in use by both big companies and small start-ups. By the way, it is not the only framework that lets you render JavaScript on the server side, as we'll see in the next section.

Comparing Next.js to other alternatives

As you may be wondering, Next.js is not the only player in the server-side rendered JavaScript world. However, alternatives might be considered depending on the final purpose of a project.

Gatsby

One popular alternative is Gatsby. You may want to consider this framework if you seek to build static websites. Unlike Next.js, Gatsby only supports static site generation and does it incredibly well. Every page is pre-rendered at build time and can be served on any Content Delivery Network (CDN) as a static asset, allowing the performance to be incredibly competitive compared to dynamically server-side rendered alternatives. The biggest downside of using Gatsby over Next.js is that you'll lose the ability o...

Table of contents

• Real-World Next.js
• Contributors
• About the author
• About the reviewers
• Preface
• Part 1: Introduction to Next.js
• Chapter 1: A Brief Introduction to Next.js
• Chapter 2: Exploring Different Rendering Strategies
• Chapter 3: Next.js Basics and Built-In Components
• Part 2: Hands-On Next.js
• Chapter 4: Organizing the Code Base and Fetching Data in Next.js
• Chapter 5: Managing Local and Global States in Next.js
• Chapter 6: CSS and Built-In Styling Methods
• Chapter 7: Using UI Frameworks
• Chapter 8: Using a Custom Server
• Chapter 9: Testing Next.js
• Chapter 10: Working with SEO and Managing Performance
• Chapter 11: Different Deployment Platforms
• Part 3: Next.js by Example
• Chapter 12: Managing Authentication and User Sessions
• Chapter 13: Building an E-Commerce Website with Next.js and GraphCMS
• Chapter 14: Example Projects and Next Steps for Learning More
• Other Books You May Enjoy