book

Real-World Next.js

by Michele Riva

February 2022

Intermediate to advanced

366 pages

6h 35m

English

Packt Publishing

Read now

Unlock full access

ContributorsAbout the authorAbout the reviewers
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touchShare Your Thoughts
Technical requirementsIntroducing Next.jsComparing Next.js to other alternativesGatsbyRazzleNuxt.jsAngular UniversalSo, why Next.js?Moving from React to Next.jsGetting started with Next.jsDefault project structureTypeScript integration Custom Babel and webpack configuration Summary
Technical requirementsServer-side rendering (SSR)Client-side rendering (CSR)Using the React.useEffect hookUsing the process.browser variableUsing dynamic component loadingStatic site generationSummary
Technical requirementsRouting systemUsing route variables inside our pagesUsing route variables inside componentsClient-side navigationServing static assetsNext.js' automatic image optimization Running automatic image optimization on external servicesHandling metadataGrouping common meta tagsCustomizing _app.js and _document.js pagesThe _app.js pageThe _document.js page
Technical requirementsOrganizing the folder structureOrganizing the componentsOrganizing utilitiesOrganizing static assetsOrganizing stylesLib filesData fetchingFetching data on the server sideConsuming REST APIs on the server sideFetching data on the client sideConsuming REST APIs on the client sideConsuming GraphQL APIsSummary
Technical requirementsLocal state managementGlobal state managementUsing the Context APIsUsing ReduxSummary
Technical requirementsExploring and using Styled JSXCSS modulesIntegrating SASS with Next.jsSummary

Technical requirementsAn introduction to UI librariesIntegrating Chakra UI in Next.jsBuilding an employee directory with Chakra UI and Next.jsConclusive words about Chakra UIIntegrating TailwindCSS in Next.jsIntegrating Headless UISummary
Technical requirementsAbout using a custom serverUsing a custom Express.js serverUsing a custom Fastify serverSummary
Technical requirementsAn introduction to testingRunning unit and integration testsEnd-to-end testing with CypressSummary
Technical requirementsSEO and performance – an introductionRendering strategies, from a performance and SEO perspectiveThe reasoning behind a real-world website exampleRendering the image detail pagePrivate routesA quick recap regarding our decisionsWorking with SEODealing with performanceSummary
Technical requirementsA brief introduction to different deployment platformsDeploying to the Vercel platformDeploying a static site to a CDNChoosing a CDNDeploying Next.js on any serverRunning Next.js in a Docker containerSummary
Technical requirementsA brief introduction to user sessions and authenticationUnderstanding JSON web tokensCustom authentication – the good, the bad, and the uglyImplementing authentication using Auth0Customizing Auth0Summary
Technical requirementsCreating e-commerce websites for the modern webSetting up GraphCMSCreating the storefront, cart, and product detail pagesProcessing payments using StripeSummary
One framework, endless possibilitiesReal-world applications for practicing with Next.jsStreaming websiteBlogging platformReal-time chat websiteNext stepsSummary
Other Books You May EnjoyPackt is searching for authors like you

Content preview from 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 ...