Next.js by Example

Described as “The React Framework for Production”, Next.js makes it easy to build highly optimized web applications in React.

This course will guide you through learning Next.js by developing two examples: a fully static website, and a hybrid (static + server–side rendered) app.

The first example, a personal blog website, will introduce you to fundamental Next.js concepts such as pre–rendering, file–system based routing, and hydration.

It will show you how to load data in pages that are statically generated at build time, and how to style your pages in global CSS files or with the styled–jsx library that provides component–scoped styles.

The Deployment section will present you all the options for running your application in production, from fully–managed serverless platforms like Vercel to configuring your own Linux servers.

The second example you will develop is a shop website. This will be a more complex application that loads its data from a Headless CMS (Strapi) and uses advanced Next.js features such as Incremental Static Regeneration to automatically reflect changes in the backend data.

It will show you how to enable TypeScript support in a Next.js project if you wish to do so. Using TypeScript is optional; all but one of the videos use plain JavaScript. But you will find the full TypeScript code for the shop example in a GitHub repository if you prefer TypeScript.