Preface

Next.js is a scalable and high-performance React.js framework for modern web development. It provides a large set of features, such as hybrid rendering, route prefetching, automatic image optimization, and internationalization, out of the box.

Next.js is an exciting technology that can be used for many purposes. If you (or your company) want to create an e-commerce platform, a blog, or a simple website, with this book, you can learn how to do it without compromising on performance, user experience, or developer happiness. Starting from the basics of Next.js, you will understand how the framework can help you reach your goals, and you will realize how versatile Next.js is by building real-world applications with step-by-step explanations. You will learn how to choose the proper rendering methodology for your website, how to secure it, and how to deploy it to different providers. We'll always keep a focus on performance and developer happiness.

By the end of this book, you will be able to design, build, and deploy beautiful and modern architectures using Next.js with any headless CMS or data source.

Who this book is for

This book is for web developers who want to improve their React skills by building scalable and maintainable full-stack applications using a modern web framework – Next.js. Intermediate-level knowledge of ES6+, React, Node.js, and REST is assumed.

What this book covers

Chapter 1, A Brief Introduction to Next.js, serves as an introduction to the framework, showing how to set up a new project, customize its configurations, and (if needed) how to adopt TypeScript as the primary programming language for Next.js development.

Chapter 2, Exploring Different Rendering Strategies, dives into rendering methods, teaching the differences between server-side rendering, static site generation, incremental static regeneration, and more.

Chapter 3, Next.js Basics and Built-In Components, provides a complete explanation of the Next.js routing system and essential built-in components, focusing on search engine optimization and performance.

Chapter 4, Organizing the Code Base and Fetching Data in Next.js, covers some helpful tips about organizing a Next.js project and fetching data on both the server and client side.

Chapter 5, Managing Local and Global States in Next.js, introduces state management via React Context and Redux, teaching you how to handle local state (at the component level) and global state (application-wide).

Chapter 6, CSS and Built-In Styling Methods, introduces the basic styling methods built into Next.js, such as Styled JSX and CSS modules. It also shows how to enable the SASS preprocessor for local development and production builds.

Chapter 7, Using UI Frameworks, concludes the conversation around styling by introducing some modern UI frameworks, such as TailwindCSS, Chakra UI, and Headless UI.

Chapter 8, Using a Custom Server, explores the reasons why we might (and might not!) need a custom server for our Next.js applications. It also shows how to integrate Next.js with Express.js and Fastify, two of the most popular web frameworks for Node.js.

Chapter 9, Testing Next.js, introduces some unit and end-to-end testing best practices by adopting Cypress and react-testing-library.

Chapter 10, Working with SEO and Managing Performance, dives into SEO and performance enhancements by introducing useful tips and tricks for improving any Next.js application.

Chapter 11, Different Deployment Platforms, shows how to choose the right platform to host a Next.js app, depending on its features and many other aspects.

Chapter 12, Managing Authentication and User Session, describes how to manage user authentication securely by choosing the right authentication provider. It also shows how to integrate Auth0, a popular identity management platform, with any Next.js app.

Chapter 13, Building an E-Commerce Website with Next.js and GraphCMS, dives into creating a real-world Next.js e-commerce platform with Next.js, Chakra UI, and GraphCMS.

Chapter 14, Example Projects and Next Steps for Learning More, concludes the book by giving some valuable tips on how to proceed with learning the framework and provides some example projects to implement to acquire even more confidence with Next.js.

To get the most out of this book

To get the most out of this book, you can follow along by writing all the code examples displayed in the following chapters. If you find yourself stuck with an error, you can download all the working code examples from the book's GitHub repository.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Real-World-Next.js. If there's an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here:

https://static.packt-cdn.com/downloads/9781801073493_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "We're going to use Next.js' built-in getServerSideProps function to dynamically get the [name] variable from the URL and greet the user."

A block of code is set as follows:

export async function getServerSideProps({ params }) {  const { name } = params;  return {    props: {      name     }  } }function Greet(props) {  return (    <h1> Hello, {props.name}! </h1>  )}export default Greet;

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<Link href='/blog/2021-01-01/happy-new-year'>  Read post </Link><Link href='/blog/2021-03-05/match-update'>  Read post </Link><Link href='/blog/2021-04-23/i-love-nextjs'>  Read post </Link>

Any command-line input or output is written as follows:

echo "Hello, world!" >> ./public/index.txt

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "In fact, if we open the Google Chrome developer tools and go to Network, we can select the HTTP request for the endpoint above and see the authorization token in plain text under the Request Headers section."

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Real-World Next.js, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content..