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

Part 3: Next.js by Example

In this part, we will write some production-grade apps using all the methods and strategies we've explored in the past chapters. We will manage production-ready authentication, consume GraphQL APIs, and integrate Stripe, a payment service.

We will also see the next steps for becoming even more confident with Next.js by developing some example apps and learning how to stay up to date regarding this fast-evolving framework.

This section comprises the following chapters: