Next.js by Example
What you'll learn
- Develop web applications with Next·js
- Style components with Tailwind CSS
- Build fully static websites or full-stack applications
- Fetch data from a remote API such as a Headless CMS
- Integrate with an SQL database using Prisma
- Familiarity with React, including the useState and useEffect hooks
Update: the course now also covers Server Actions, made stable in Next.js v14 (released Oct. '23), in addition to the other App Router features stable since Next.js v13.4 (May '23). The first 11 hours explain the App Router, and the rest the older — but still supported — Pages Router.
Dubbed as “The React Framework for the Web”, Next.js makes it easy to build highly optimized web applications by server-side rendering React components.
This course will guide you through learning Next.js by developing a complete project step by step.
This will teach you fundamental Next.js concepts such as file-based Routing, Prerendering, React Server Components, the differences between Server and Client Components, and how to fetch data in Server Components.
It will also use the popular Tailwind CSS framework for styling, demonstrate how to embed Custom Fonts into your application, and how to make your pages more SEO-friendly with metadata.
The Deployment section will present you the various options for running your application in production, from using a fully-managed platform like Vercel to performing a Static Export that can be uploaded to any web server.
Part II will show you how to use Next.js as a Full-Stack Framework, enabling features such as Dynamic Rendering, Time-based Revalidation, and On-demand Revalidation.
It will use a Headless CMS — Strapi — to store data, and demonstrate how to call its REST API from the Next.js app, and the various options for updating the frontend pages when the data in the CMS changes.
It will also cover Image Optimization, showing how Next.js can convert and resize your images on-demand, and enable lazy-loading by the browser.
Finally, it will demonstrate how to integrate third-party UI components in your app, and when it can still make sense to use Client-Side Data Fetching.
Part III provides an example of Database Integration, using the Prisma Object/Relational Mapper and an SQL database. It then explains how to process form submissions with Server Actions, and how to optimize page loads use Streaming and Suspense.
Who this course is for:
- React/Web developers who want to build static or full-stack web apps with Next·js
Mirko has 20 years of experience developing software for a wide range of companies, from startups to large, high-profile organisations, more recently as Lead Developer and Architect.
He is familiar with a number of programming languages and the full application stack, from backend services to web and mobile apps. Mirko also holds a Postgraduate Diploma in Software Development from the Open University.
He is always keen to learn new technologies and enjoys teaching on Udemy because it gives him the opportunity to share his experience with thousands of other developers.
He runs his consultancy company, Encoded Knowledge Ltd, based in London, U.K.