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 11: Different Deployment Platforms

In the previous chapters, we saw how Next.js works, how to optimize it for SEO, how to deal with performance, how to adopt UI frameworks, and how to fetch data on both the client and server sides, eventually being able to create a fantastic web application. But then, we have a problem: how should we ship it to production? There are many different hosting providers, cloud platforms, and even Platform as a Service (PaaS) solutions out there; how do we pick one?

In this chapter, we will see how to choose the right deployment platform.

We will look at the following in detail: