Next.js is for server-rendered react apps. It has automatic code splitting, simple page-based routing, built-in CSS support and hot reloading. Every component file in the pages folder is treated as a page.
Apollo Client used to fetch data using GraphQL.
GraphQL only return the data requested. Data only served from a single end-point. Lots of companies use it. GraphQL makes tasks more complex and there are possible performance issues that would not occur using REST with a web cache.
Tailwind CSS added to Next.js
Picsum API random photo is displayed
Latest Next/Image optimisation used so image downloaded as Webp format and automatically sized. This is a major advantage over non-optimised Images.
Converted to Progressive Web App (PWA).
Custom Document file ./pages/_document.js created to override and extend default Document. It injects meta tags into every page
Apollo Client v3 caching GraphQL client to UI components can fetch data via GraphQL. More documentation here.
Picsum API image. No API key required, image size can be specified in url
💾 Setup
npm run codegen to run codegen to generate output to generated/index.tsx
npm run dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
npm run build builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
💻 Code Examples
withApollo function to return instance of Apollo client