Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Real-World Next.js
Real-World Next.js

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

eBook
$24.99 $35.99
Paperback
$43.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Colour book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
Table of content icon View table of contents Preview book icon Preview Book

Real-World Next.js

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.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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 server

Description

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.

Who is this book for?

This 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.

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 CMS
Estimated delivery fee Deliver to Argentina

Standard delivery 10 - 13 business days

$12.95

Premium delivery 3 - 6 business days

$40.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Feb 28, 2022
Length: 366 pages
Edition : 1st
Language : English
ISBN-13 : 9781801073493
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Colour book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
Estimated delivery fee Deliver to Argentina

Standard delivery 10 - 13 business days

$12.95

Premium delivery 3 - 6 business days

$40.95
(Includes tracking information)

Product Details

Publication date : Feb 28, 2022
Length: 366 pages
Edition : 1st
Language : English
ISBN-13 : 9781801073493
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 131.97
React Projects
$38.99
Full-Stack Web Development with GraphQL and React
$48.99
Real-World Next.js
$43.99
Total $ 131.97 Stars icon

Table of Contents

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

Customer reviews

Most Recent
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.2
(11 Ratings)
5 star 63.6%
4 star 9.1%
3 star 18.2%
2 star 0%
1 star 9.1%
Filter icon Filter
Most Recent

Filter reviews by




weworkbetter Nov 09, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
In a nutshell this book is a perfect starting point into the world of production-grade full stack web development especially using Nextjs.The focus of this book is the application performance and the developer experience. The author writes about it in great detail with a lot of enthusiasm, full of conviction, solid understanding and great hands-on experience in Nextjs.Just like Nextjs framework targets the entire life cycle of building the production grade web applications, the author walks the readers through the entire life cycle of building web applications. Along the way, he shares a lot of valuable advice and great directions, again it is all based on his own experience as a proven Nextjs developer.Please do not expect this book alone will give everything to study full stack development, rather it must be seen as a perfect guide which walks the reader through the whole developmental life cycle in great breadth and length. One must also follow the pointers and additional references given in it.Notes:There are some inactive urls given in the book, this must be tackled by the readers by their own individual commitment which is the only additional effort to be traded to make use of this great compilation.This book is based on the page router, and the latest is the app router. However, to me the whole point is in the rendering strategies in Nextjs which is independent of the two routers.Thanks and RegardsWeDoTheBest4You
Amazon Verified review Amazon
Michael D. Sep 26, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
It's hit-or-miss with technical books, so I was pleasantly surprised that this book backfilled the gaps in my knowledge of Next.js without going overboard and trying to cram every possible Next.js topic into one book. Probably like most developers approaching this book, I'm already seasoned with using React, most other topics related to frontend development, and am comfortable with both consuming and writing APIs. I got (more) into using Next.js in the past year, and had looked up enough info in their docs to get things done, but knowing full well that even though I was getting things to work, I probably wasn't doing it in the "best practices" way with respect to Next.js. I was basically taking my React knowledge and just creating components in a Next.js framework without really leveraging Next.js as a server-side rendering tool. So if that's you too, I'm not going to judge! The book talks about the must-knows of server-side rendering, static site rendering, folder structures, and moves into testing, hosting environments, and example sites that could be built with Next.js. Judging the book on just that content, I give it 5 stars. I know other reviewers mentioned that the API that is mentioned in the book isn't working or wasn't working. I didn't find myself needing to do anything with the book's code and/or API as I was just using the book to backfill knowledge and look at the printed code examples to reinforce a topic. My review is based on the structure and content of the book, but yeah, I can see that a book that alludes to an API, but the API isn't working, could be a deal breaker. I'm still giving the book the full 5 stars as it served my needs and I improved from having invested time and money in it.
Amazon Verified review Amazon
Simon Dec 06, 2022
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Some examples don't line up with what's in the text forcing you to close the gaps yourself. Additionally, examples that call URLs that don't exist anymore. Some of the examples use tags that are deprecated as well. Super disappointing to find out this book is this severely out of date after getting through a third of it.
Amazon Verified review Amazon
Marcelo Oct 07, 2022
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Every line in this books delivers a lot of value. Thought opinionated about how to structure your applications around the framework, the author gives clear insights into the reasoning behind each of his decisions. Provides a deep analysis on different rendering strategies and how to solve recurring problems in commercial applications that might get you ahead of time when working on similar projects.
Amazon Verified review Amazon
George Oct 02, 2022
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Could be a great book, but I will not suggest buying it unless these links are fixed, as you simply would not be able to follow the guides.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela