Next.js by Example

Next.js by Example, available at $89.99, has an average rating of 4.62, with 248 lectures, 1 quizzes, based on 1194 reviews, and has 8391 subscribers.

You will learn about 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 the Prisma ORM Implement Authentication with Cookies and JSON Web Tokens This course is ideal for individuals who are React/Web developers who want to build static or full-stack web apps with Next·js It is particularly useful for React/Web developers who want to build static or full-stack web apps with Next·js.

Enroll now: Next.js by Example

Summary

Title: Next.js by Example

Price: $89.99

Average Rating: 4.62

Number of Lectures: 248

Number of Quizzes: 1

Number of Published Lectures: 246

Number of Published Quizzes: 1

Number of Curriculum Items: 249

Number of Published Curriculum Objects: 247

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will 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 the Prisma ORM

Implement Authentication with Cookies and JSON Web Tokens

Who Should Attend

React/Web developers who want to build static or full-stack web apps with Next·js

Target Audiences

React/Web developers who want to build static or full-stack web apps with Next·js

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 13 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.

Part I will show you how to use Next.js as a Static Site Generator, prerendering all your pages to static HTML, CSS, and JavaScript.

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.

It will then 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.

The final part adds Authentication, showing how to implement a typical Sign In flow using Cookies and JSON Web Tokens, store users’ data in a database table, and restrict content to authenticated users.

You can follow the example using either JavaScript or TypeScript. The full source code is provided, with an easy way to see the changes made in every lecture.

Course Curriculum

Chapter 1: Introduction

Lecture 1: App vs Pages Router

Lecture 2: Required Tools

Lecture 3: Updates and Support

Chapter 2: [app] Routing and Layouts

Lecture 1: Project Overview

Lecture 2: Creating a Next.js Project

Lecture 3: Home Page

Lecture 4: Source Code

Lecture 5: TypeScript

Lecture 6: Page Routes

Lecture 7: Exercise: Add More Pages

Lecture 8: Nested Layouts

Chapter 3: [app] Rendering and Navigation

Lecture 1: Prerendering

Lecture 2: React Server Components

Lecture 3: Dev vs Production Server

Lecture 4: Link Component

Lecture 5: Prefetching

Lecture 6: Layout and Navigation

Lecture 7: Exercise: Review Links

Chapter 4: [app] Styling

Lecture 1: Styling Solutions

Lecture 2: Installing Tailwind CSS

Lecture 3: Layout Styling

Lecture 4: Color Palette

Lecture 5: Heading Component

Lecture 6: Import Alias

Chapter 5: [app] Assets and Fonts

Lecture 1: Static Assets

Lecture 2: Image Cards

Lecture 3: Font Optimization

Lecture 4: Custom Tailwind Font

Lecture 5: Exercise: Custom Default Font

Lecture 6: Responsive Design

Chapter 6: [app] Loading Data

Lecture 1: Reading Files

Lecture 2: Rendering Markdown

Lecture 3: Tailwind CSS Typography

Lecture 4: Front Matter

Lecture 5: Data Layer Separation

Lecture 6: Dynamic Routes

Lecture 7: Listing Files

Lecture 8: Rendering Arrays

Lecture 9: Static Generation for Dynamic Routes

Lecture 10: Exercise: Featured Review

Chapter 7: [app] Metadata

Lecture 1: Title and Meta Tags

Lecture 2: Title Template

Lecture 3: Dynamic Metadata

Lecture 4: Icon and Metadata Files

Chapter 8: [app] Client Components

Lecture 1: Share Link Button

Lecture 2: Client Components

Lecture 3: Component State

Lecture 4: Nested Client Components

Lecture 5: Heroicons

Chapter 9: [app] Deployment

Lecture 1: Deployment Options

Lecture 2: Deploying to Vercel

Lecture 3: Static Export

Lecture 4: Static Hosting

Lecture 5: Self-Hosting

Chapter 10: [app] Headless CMS

Lecture 1: Project Phase 2

Lecture 2: Starting Code

Lecture 3: Strapi Overview

Lecture 4: Preloaded CMS Instance

Lecture 5: Fetch API

Lecture 6: Strapi API Parameters

Lecture 7: Get Reviews From CMS – Step 1

Lecture 8: Get Reviews From CMS – Step 2

Lecture 9: Get Review From CMS – Step 1

Lecture 10: Get Review From CMS – Step 2

Lecture 11: Refactoring: Fetch Reviews

Lecture 12: Get Slugs From CMS

Lecture 13: Static Build with CMS Data

Chapter 11: [app] Image Optimization

Lecture 1: ESLint

Lecture 2: Next Image Component

Lecture 3: Image Conversion

Lecture 4: Lazy Loading and Priority

Lecture 5: Exercise: Home Images

Lecture 6: Subtitles

Lecture 7: Alternative Image Loaders

Chapter 12: [app] Dynamic Rendering and Revalidation

Lecture 1: Dynamic Params

Lecture 2: Dynamic Rendering

Lecture 3: Page Not Found

Lecture 4: Background Revalidation

Lecture 5: Fetch Cache and Revalidation

Lecture 6: Webhook Route Handler

Lecture 7: On-Demand Revalidation

Lecture 8: Rendering Strategies Comparison

Chapter 13: [app] Pagination

Lecture 1: Query String Parameters

Lecture 2: Pagination with Strapi

Lecture 3: Page Count

Lecture 4: Exercise: Pagination Bar

Lecture 5: Search Params and Dynamic Rendering

Instructors

Mirko Nasato
Software Developer and Mentor

Rating Distribution

1 stars: 4 votes

2 stars: 6 votes

3 stars: 44 votes

4 stars: 292 votes

5 stars: 848 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!