Practical Next. js for E-Commerce: Create e-Commerce Sites with the Next. js Framework

Leverage the power of Next.js to quickly produce efficient e-commerce sites. This project-oriented book will simplify the process of setting up a starter e-commerce site using Next.js from start to finish, creating a usable e-commerce offer with little more than a text editor or free software. It will equip you with a starting toolset you can use to develop future projects, incorporate into your existing workflow, and help you to take your websites to the next level, reducing reliance on tools that are bloated, prone to being hacked, and not the most efficient. Practical Next.js for E-Commerce is an excellent resource for getting started creating and manipulating e-commerce sites using a static site generator approach. It takes the view that you don’t have to create something complex and unwieldy; you can build something quickly, then extend it using the power of the API or plugins over time, without sacrificing speed or features. What You Will Learn• Implement e-commerce sites using Next.js• Explore some of the options for architecting an e-commerce site using this framework• Work through a project from start to finish, understanding what can be achieved using Next.js, and where other tools may need to be brought into play Who This Book Is ForWeb developers and designers who are interested in learning how to implement the Next.js framework in an e-commerce capacity. About the authorAlex Libby is a front-end web developer and seasoned computer book author from England. His passion for all things open source dates back to the days of his degree studies when he first came across web development and he has been hooked ever since. When he isn’t busy developing new features or fixing website bugs for his day job, Alex enjoys tinkering with different open-source libraries to see how they work. He has spent a stint maintaining the jQuery Tools library and enjoys writing about open source technologies, principally for front-end UI development. Table of Contents About the Author About the Technical Reviewer Acknowledgments Introduction Part I: In the Beginning Chapter 1: Getting Started Why Should We Use Next.js for E-Commerce Sites? Selling the Benefits of Using Next.js Setting the Scene Preparing the Environment Creating the Base Site Understanding the Changes Made Exploring the Site Understanding What Tools We Need Summary Part II: Building Our Shop Chapter 2: Laying the Foundations Displaying the Site Architecture Updating the Main Index Page Understanding What Happened Altering the Site Layout Breaking Apart the Code Changes Adding a Navigation Menu Exploring the Code in Detail Updating the Header Dissecting the Code Creating the Remaining Pages Breaking Apart the Code Changes Adding a Footer Exploring the Code Changes Made Summary Chapter 3: Adding Products Architecting the Data Dealing with Security and Authentication Concerns Getting Started with Sanity Installing Sanity Creating Our Data Store Exploring the Changes in Detail Configuring the Data Store Breaking Apart the Code Changes Adding Products to the Store Hooking Sanity into Our Project Exploring the Code Changes Creating Pages with Dynamic Data Getting Familiar with Sanity API Displaying Product Listing in the Shop Breaking Apart the Code Creating the Individual Product Page Understanding What Has Changed Exploring the Changes Made Adding Additional Product Details Breaking Apart the Code Summary Chapter 4: Checkout and Order Processing Breaking Apart the Process Dealing with Security Finishing the Buttons Understanding the Changes Made Persisting Data Through the Process Exploring What Happened Constructing the Cart Breaking Apart the Code Changes Adding a Minicart Exploring the Code Changes Refactoring the Cart Breaking Apart the Code Changes Making More Changes: A Postscript Integrating a Payment Provider Understanding What Happened Testing the Checkout Process Summary Chapter 5: Styling the Site Exploring the Options Taking the Mobile-First Approach Designing the Theme Applying the Changes Understanding What Has Changed Taking Alternative Approaches Using CSS Modules Breaking Apart the Changes Using Sass Breaking Apart the Code Changes Could We Use Sass Variables? Taking Things Further Summary Part III: Wrapping Things Up Chapter 6: Adapting for Mobile Setting the Scene Checking Mobile Checking Tablet in Portrait Mode Checking Tablet in Landscape Mode Tidying Up Mobile Design Understanding What Has Changed Should We Go Horizontal? Adapting for Tablets Updating Portrait Mode Checking Landscape Mode Merging the Styles Summary Chapter 7: Finessing the Site Taking Stock Tidying Up the Codebase Exploring the Fixes Applied Tidying Up: A Postscript Customizing the Site Clearing the Sanity Token Warning Understanding the Significance of This Change Adding a Cancel Page for Stripe Understanding What Happened Animating Styles: Add to Cart Button Exploring What We Changed Animating Elements: Flip Tile Breaking the Changes Apart Updating the Product Reviews Understanding What Has Changed Summary Chapter 8: Implementing SEO The Importance of SEO Defining Our Strategy Adding Default SEO to Our Site Understanding What Happened Setting and Overriding Defaults Breaking Apart the Changes Updating Our Configuration Making Page Headings Dynamic Exploring the Code Changes Taking Things Further for SEO Using Lighthouse Assessing Desktop Performance Assessing Mobile Performance Responding to Issues Fixing the Issues Summary Chapter 9: Testing the Site Setting Expectations Choosing Our Testing Suite Installing Cypress Understanding the Changes Creating E2E Tests Understanding the Changes Made In the Spirit of Kaizen Adding More Tests Breaking Apart the Code Changes Testing the Components Adding Tests Exploring the Changes Made Understanding the Limits Preparing for CI Operation Summary Chapter 10: Deployment into Production Making Some Assumptions Working Through the Final Steps Preparing Our Host Analyzing Code Usage Reviewing the Changes Made Uploading to Our Host Understanding the Changes in Detail Running the Code Analysis Linking to Netlify Breaking Apart the Changes Using Environment Variables Adding a Domain Name Testing the Site Summary Part IV: Taking Things Further Chapter 11: Project: Adding International Support Setting the Scene Preparation Is Key Configuring Locale Support Exploring the Changes Made Adding Language Support Understanding the Changes Made Reconfiguring English Language Support Translating Content into Dutch Breaking Apart the Code Changes Applying the Translations Understanding What Happened Completing the Rest of the Files Breaking Apart the Changes Made Taking Things Further Summary Chapter 12: Project: Authenticating Access Setting the Scene Registering for a GitHub OAuth Account Exploring the Changes Made Installing and Configuring NextAuth Breaking Apart the Code Changes Displaying Login Options Exploring the Changes Made Adding Account Page Understanding What’s Changed Deploying Changes Taking Things Further Summary Index Leverage the power of Next.js to quickly produce efficient e-commerce sites. This project-oriented book will simplify the process of setting up a starter e-commerce site using Next.js from start to finish, creating a usable e-commerce offer with little more than a text editor or free software. It will equip you with a starting toolset you can use to develop future projects, incorporate into your existing workflow, and help you to take your websites to the next level, reducing reliance on tools that are bloated, prone to being hacked, and not the most efficient. Practical Next.js for E-Commerce is an excellent resource for getting started creating and manipulating e-commerce sites using a static site generator approach. It takes the view that you don’t have to create something complex and unwieldy; you can build something quickly, then extend it using the power of the API or plugins over time, without sacrificing speed or features. What You Will Learn Implement e-commerce sites using Next.js Explore some of the options for architecting an e-commerce site using this framework Work through a project from start to finish, understanding what can be achieved using Next.js, and where other tools may need to be brought into play Who This Book Is For Web developers and designers who are interested in learning how to implement the Next.js framework in an e-commerce capacity.