Next.js by Example from Udemy

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

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

What's inside

Learning objectives

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

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

Syllabus

Introduction

App vs Pages Router

Required Tools

Updates and Corrections

[app] Routing and Layouts

Project Overview

Creating a Next.js Project

Home Page

Source Code

TypeScript

Page Routes

Exercise: Add More Pages

Nested Layouts

[app] Rendering and Navigation

Prerendering

React Server Components

Dev vs Production Server

Link Component

Prefetching

Layout and Navigation

Exercise: Review Links

[app] Styling

Styling Solutions

Installing Tailwind CSS

Layout Styling

Color Palette

Heading Component

Import Alias

[app] Assets and Fonts

Static Assets

Image Cards

Font Optimization

Custom Tailwind Font

Exercise: Custom Default Font

Responsive Design

[app] Loading Data

Reading Files

Rendering Markdown

Tailwind CSS Typography

Front Matter

Data Layer Separation

Dynamic Routes

Listing Files

Rendering Arrays

Static Generation for Dynamic Routes

Exercise: Featured Review

[app] Metadata

Title and Meta Tags

Title Template

Dynamic Metadata

Icon and Metadata Files

[app] Client Components

Share Link Button

Client Components

Component State

Nested Client Components

Heroicons

[app] Deployment

Deployment Options

Deploying to Vercel

Static Export

Static Hosting

Self-Hosting

[app] Headless CMS

Project Phase 2

Starting Code

Strapi Overview

Preloaded CMS Instance

Fetch API

Strapi API Parameters

Get Reviews From CMS - Step 1

Get Reviews From CMS - Step 2

Get Review From CMS - Step 1

Get Review From CMS - Step 2

Refactoring: Fetch Reviews

Get Slugs From CMS

Static Build with CMS Data

[app] Image Optimization

ESLint

Next Image Component

Image Conversion

Lazy Loading and Priority

Exercise: Home Images

Subtitles

Alternative Image Loaders

[app] Dynamic Rendering and Revalidation

Dynamic Params

Dynamic Rendering

Page Not Found

Background Revalidation

Fetch Cache and Revalidation

Webhook Route Handler

On-Demand Revalidation

Rendering Strategies Comparison

[app] Pagination

Query String Parameters

Pagination with Strapi

Page Count

Exercise: Pagination Bar

Search Params and Dynamic Rendering

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Discusses newer versions of technologies but still uses outdated software libraries (versions from 2022 or older)

Builds on foundational knowledge and skills, making it suitable for intermediate learners

Demonstrates real-world applications by integrating with third-party tools and APIs

Incorporates industry-standard tools and frameworks, such as Tailwind CSS and Vercel

Includes practical exercises and examples that reinforce learning

May require learners to purchase additional software or services to complete the course

Reviews summary

Next.js course for beginners

According to students, Next.js by Example is a great course for beginners who want to learn about Next.js. Learners particularly enjoy the easy-to-understand explanations, engaging assignments, and well-structured format. One student even said, "I've found the topics easy to remember so far." However, some students have mentioned that they would like to see more advanced lessons in the future.

Course content is well-organized and easy to follow.

"I like the way the course is set up."

"Well-structured. Thank you Sal."

"very interesting, easy to follow, easy to understand. Very enjoyable thank you!"

Concepts are explained in a simple and easy-to-understand manner.

"good easy to understand"

"easy to understand and lots of examples"

"It was great course for beginners. simple to follow"

Course is suitable for complete beginners.

"Loved the course. It was easy to learn as I am beginner"

"Easy to understand for beginners."

"I am a total beginner and the explanations are great to understand the tarot clearly!"

Course may not be suitable for experienced learners.

"The course is good, profound knowledge. I hope it gets more advance when I follow with the rest."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js by Example with these activities:

Build a small static Next.js website with basic routing and styling

Show steps

Build a small website to practice the basics of Next.js, including routing and styling.

Show steps

Create a new Next.js project
Create a simple layout for your website
Add some pages to your website
Style your website with CSS

Review HTML5

Show steps

Reviewing HTML5 elements and syntax will ensure that you have the strong foundation required to succeed in this course.

Browse courses on HTML5

Show steps

Review the HTML5 specification
Practice creating HTML5 elements and documents

Review CSS3

Show steps

You will need to be able to style Next·js components. Reviewing CSS3 will bring you up to speed.

Browse courses on CSS3

Show steps

Review the CSS3 specification
Practice creating CSS3 selectors
Practice applying CSS3 styles to HTML elements

Seven other activities

Expand to see all activities and additional details

Show all ten activities

Fetch data from a remote API in a Next.js application

Show steps

Practice fetching data from a remote API in a Next.js application.

Show steps

Install the necessary dependencies
Create a fetch function to get the data
Use the fetch function in a React component
Display the data in your component

Follow tutorials on Next·js routing

Show steps

Go through tutorials to understand how routing works in Next·js.

Show steps

Find a tutorial on Next·js routing
Follow the tutorial steps
Create a Next·js project and implement the routing

Practice building Next·js apps

Show steps

Practice building Next·js apps to solidify your understanding of the framework.

Browse courses on React

Show steps

Create a new Next·js project
Add pages and components to your project
Implement routing in your project
Style your project with CSS
Deploy your project

Implement server-side rendering in a Next.js application

Show steps

Practice implementing server-side rendering in a Next.js application.

Show steps

Install the necessary dependencies
Create a custom server
Configure the server-side rendering
Test your server-side rendering

Create a simple full-stack Next.js application with a database

Show steps

Practice creating a simple full-stack Next.js application with a database.

Show steps

Install the necessary dependencies
Create a database schema
Create a REST API
Consume the REST API in a Next.js application

Participate in a hackathon or coding challenge

Show steps

Test your skills and learn from others by participating in a hackathon or coding challenge.

Browse courses on React

Show steps

Find a hackathon or coding challenge that is relevant to Next·js
Form a team or work on your own
Develop a solution to the challenge
Submit your solution

Contribute to an open source Next·js project

Show steps

Contribute to an open source project to gain experience with Next·js and help the community.

Browse courses on Open Source

Show steps

Find an open source Next·js project
Identify an issue or feature that you can contribute to
Create a pull request with your changes

Career center

Learners who complete Next.js by Example will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers are responsible for developing and maintaining websites and web applications. This course provides a comprehensive introduction to Next.js, a powerful framework that enables developers to build scalable and high-performing web applications. By learning how to use Next.js, you will gain a strong foundation in web development and be well-equipped to work on a wide range of web projects. Additionally, the course covers topics such as data fetching, image optimization, and authentication, which are essential skills for modern Web Developers.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-end Developers specialize in designing and developing the user interface (UI) of websites and web applications. This course provides a detailed overview of Next.js, a popular framework for building dynamic and interactive web applications. By learning how to use Next.js, you will gain valuable skills that can enhance your ability to create engaging and user-friendly front-end experiences. Additionally, the course covers topics such as styling components with Tailwind CSS, integrating third-party UI components, and optimizing page loads, which are all essential skills for a successful Front-end Developer.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end development of web applications. This course provides a comprehensive overview of Next.js, a framework that can be used for both front-end and back-end development. By learning how to use Next.js, you will gain valuable skills that can enable you to work on all aspects of web application development. Additionally, the course covers topics such as database integration, form processing, and authentication, which are essential skills for Full-Stack Developers.

See salaries and explore the career path for Full-Stack Developer

React Developer

React Developers are highly skilled in using the React library to build user interfaces for web applications. This course provides a thorough introduction to Next.js, a framework that is specifically designed to work with React. By learning how to use Next.js, you will gain a deeper understanding of React and be able to develop more efficient and maintainable web applications. Additionally, the course covers topics such as styling components with Tailwind CSS, integrating third-party UI components, and optimizing page loads, which are valuable skills for React Developers.

See salaries and explore the career path for React Developer

Software Engineer

Software Engineers design, develop, and maintain software systems. This course provides a strong foundation in Next.js, a framework that is widely used in the software industry. By learning how to use Next.js, you will gain valuable skills that can make you a more competitive candidate for Software Engineer roles. Additionally, the course covers topics such as data fetching, image optimization, and authentication, which are common requirements in modern software systems.

See salaries and explore the career path for Software Engineer

Interaction Designer

Interaction Designers design the interactions between users and websites and web applications. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to design interactive and engaging experiences for users. Additionally, the course covers topics such as styling components with Tailwind CSS and integrating third-party UI components, which are common requirements for modern web applications.

See salaries and explore the career path for Interaction Designer

Information Architect

Information Architects design and organize the structure and content of websites and web applications. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to design them to be user-friendly and effective. Additionally, the course covers topics such as styling components with Tailwind CSS and integrating third-party UI components, which are common requirements for modern web applications.

See salaries and explore the career path for Information Architect

Content Strategist

Content Strategists plan and create content for websites and web applications. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to create content that is relevant and engaging for users. Additionally, the course covers topics such as integrating third-party UI components, which is a common requirement for modern web applications.

See salaries and explore the career path for Content Strategist

UI/UX Designer

UI/UX Designers are responsible for designing the user interface (UI) and user experience (UX) of websites and web applications. This course provides an overview of Next.js, a framework that enables developers to build interactive and user-friendly web applications. By learning how to use Next.js, you can gain a deeper understanding of how web applications are built and how to design more effective user interfaces. Additionally, the course covers topics such as styling components with Tailwind CSS and integrating third-party UI components, which are valuable skills for UI/UX Designers.

See salaries and explore the career path for UI/UX Designer

User Experience Researcher

User Experience Researchers study how users interact with websites and web applications. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to conduct user research to improve their usability. Additionally, the course covers topics such as styling components with Tailwind CSS and integrating third-party UI components, which are common requirements for modern web applications.

See salaries and explore the career path for User Experience Researcher

Technical Writer

Technical Writers create documentation and other materials to help users understand and use technical products. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a deeper understanding of how web applications are built and how to write clear and concise documentation for them. Additionally, the course covers topics such as styling components with Tailwind CSS and integrating third-party UI components, which are common requirements for modern web applications.

See salaries and explore the career path for Technical Writer

Business Analyst

Business Analysts work with businesses to identify and solve problems. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to use them to solve business problems. Additionally, the course covers topics such as data fetching and authentication, which are common requirements for modern web applications.

See salaries and explore the career path for Business Analyst

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make informed decisions. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to use data to improve their performance. Additionally, the course covers topics such as data fetching and image optimization, which are common requirements for modern web applications.

See salaries and explore the career path for Data Analyst

Product Manager

Product Managers are responsible for planning, developing, and launching products. This course provides an overview of Next.js, a framework that is commonly used to build web applications. By learning how to use Next.js, you can gain a better understanding of the technical side of product development and how to work with engineering teams to bring products to market. Additionally, the course covers topics such as data fetching, image optimization, and authentication, which are common requirements for modern web applications.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers plan and execute projects to achieve specific goals. This course provides an overview of Next.js, a framework that is used to build web applications. By learning how to use Next.js, you can gain a better understanding of how web applications are built and how to manage projects to deliver them on time and within budget. Additionally, the course covers topics such as data fetching and image optimization, which are common requirements for modern web applications.

See salaries and explore the career path for Project Manager