Real-World Next.js

Real-World Next.js

by Michele Riva
Released February 2022
Publisher(s): Packt Publishing
ISBN: 9781801073493

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn how to use Next.js for building web apps without compromising performance, user experience, and developer happiness

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

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

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

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 the modern Next.js web framework. Intermediate-level knowledge of ES6+, React, Node.js, and REST is assumed.

Table of contents

  1. Real-World Next.js
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  6. Part 1: Introduction to Next.js
  7. Chapter 1: A Brief Introduction to Next.js
    1. Technical requirements
    2. Introducing Next.js
    3. Comparing Next.js to other alternatives
      1. Gatsby
      2. Razzle
      3. Nuxt.js
      4. Angular Universal
      5. So, why Next.js?
    4. Moving from React to Next.js
    5. Getting started with Next.js
      1. Default project structure
      2. TypeScript integration
      3. Custom Babel and webpack configuration
    6. Summary
  8. Chapter 2: Exploring Different Rendering Strategies
    1. Technical requirements
    2. Server-side rendering (SSR)
    3. Client-side rendering (CSR)
      1. Using the React.useEffect hook
      2. Using the process.browser variable
      3. Using dynamic component loading
    4. Static site generation
    5. Summary
  9. Chapter 3: Next.js Basics and Built-In Components
    1. Technical requirements
    2. Routing system
      1. Using route variables inside our pages
      2. Using route variables inside components
      3. Client-side navigation
    3. Serving static assets
      1. Next.js' automatic image optimization
      2. Running automatic image optimization on external services
    4. Handling metadata
      1. Grouping common meta tags
    5. Customizing _app.js and _document.js pages
      1. The _app.js page
      2. The _document.js page
  10. Part 2: Hands-On Next.js
  11. Chapter 4: Organizing the Code Base and Fetching Data in Next.js
    1. Technical requirements
    2. Organizing the folder structure
      1. Organizing the components
      2. Organizing utilities
      3. Organizing static assets
      4. Organizing styles
      5. Lib files
    3. Data fetching
      1. Fetching data on the server side
      2. Consuming REST APIs on the server side
      3. Fetching data on the client side
      4. Consuming REST APIs on the client side
      5. Consuming GraphQL APIs
    4. Summary
  12. Chapter 5: Managing Local and Global States in Next.js
    1. Technical requirements
    2. Local state management
    3. Global state management
      1. Using the Context APIs
      2. Using Redux
    4. Summary
  13. Chapter 6: CSS and Built-In Styling Methods
    1. Technical requirements
    2. Exploring and using Styled JSX
    3. CSS modules
    4. Integrating SASS with Next.js
    5. Summary
  14. Chapter 7: Using UI Frameworks
    1. Technical requirements
    2. An introduction to UI libraries
    3. Integrating Chakra UI in Next.js
      1. Building an employee directory with Chakra UI and Next.js
      2. Conclusive words about Chakra UI
    4. Integrating TailwindCSS in Next.js
    5. Integrating Headless UI
    6. Summary
  15. Chapter 8: Using a Custom Server
    1. Technical requirements
    2. About using a custom server
    3. Using a custom Express.js server
    4. Using a custom Fastify server
    5. Summary
  16. Chapter 9: Testing Next.js
    1. Technical requirements
    2. An introduction to testing
    3. Running unit and integration tests
    4. End-to-end testing with Cypress
    5. Summary
  17. Chapter 10: Working with SEO and Managing Performance
    1. Technical requirements
    2. SEO and performance – an introduction
    3. Rendering strategies, from a performance and SEO perspective
      1. The reasoning behind a real-world website example
      2. Rendering the image detail page
    4. Private routes
    5. A quick recap regarding our decisions
    6. Working with SEO
    7. Dealing with performance
    8. Summary
  18. Chapter 11: Different Deployment Platforms
    1. Technical requirements
    2. A brief introduction to different deployment platforms
    3. Deploying to the Vercel platform
    4. Deploying a static site to a CDN
    5. Choosing a CDN
    6. Deploying Next.js on any server
    7. Running Next.js in a Docker container
    8. Summary
  19. Part 3: Next.js by Example
  20. Chapter 12: Managing Authentication and User Sessions
    1. Technical requirements
    2. A brief introduction to user sessions and authentication
    3. Understanding JSON web tokens
    4. Custom authentication – the good, the bad, and the ugly
    5. Implementing authentication using Auth0
      1. Customizing Auth0
    6. Summary
  21. Chapter 13: Building an E-Commerce Website with Next.js and GraphCMS
    1. Technical requirements
    2. Creating e-commerce websites for the modern web
    3. Setting up GraphCMS
    4. Creating the storefront, cart, and product detail pages
    5. Processing payments using Stripe
    6. Summary
  22. Chapter 14: Example Projects and Next Steps for Learning More
    1. One framework, endless possibilities
    2. Real-world applications for practicing with Next.js
      1. Streaming website
      2. Blogging platform
      3. Real-time chat website
    3. Next steps
    4. Summary
    5. Why subscribe?
  23. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: Real-World Next.js
  • Author(s): Michele Riva
  • Release date: February 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801073493