AI Features
Log In
0% completed
All Lessons
Free Lessons (8)
Before We Begin
Who Is This Course For?
Exploring Next.js: A Brief Primer
Overview: Exploring Next.js
Introduction to Next.js
Comparing Next.js to Other Alternatives
Next.js Project Structure
TypeScript Integration
Summary: Exploring Next.js
Quiz: A Brief Introduction to Next.js
Exploring Different Rendering Strategies
Overview: Exploring Different Rendering Strategies
Server-Side Rendering (SSR)
Client-Side Rendering (CSR)
Static Site Generation
Summary: Exploring Different Rendering Strategies
Quiz: Exploring Different Rendering Strategies
Exercise: Dynamic Blog Display with Next.js
Solution: Dynamic Blog Display with Next.js
Next.js Basics and Built-In Components
Overview: Next.js Basics and Built-In Components
Routing System
Client-Side Navigation
Serving Static Assets
Handling Metadata
Grouping Common Meta Tags
Customizing the _app.js and _document.js Pages
Summary: Next.js Basics and Built-In Components
Quiz: Next.js Basics and Built-In Components
Hands-On Next.js
Overview: Hands-On Next.js.
Organizing the Folder Structure
Data Fetching
Fetching Data on the Client Side
Consuming GraphQL APIs
Summary: Hands-On Next.js
Quiz: Hands-On Next.js
Managing Local and Global States in Next.js
Overview: Managing Local and Global States in Next.js
Local vs. Global State Management
Using the Context APIs
Using Redux
Summary: Managing Local and Global States in Next.js
Quiz: Managing Local and Global States in Next.js
Exercise: Form Validation and Context Management
Solution: Form Validation and Context Management
CSS and Built-In Styles Methods
Overview: CSS and Built-In Styles Methods
Exploring and Using Styled JSX
CSS Modules
Integrating SASS with Next.js
Summary: CSS and Built-In Styles Methods
Quiz: CSS and Built-In Styles Methods
Exercise: Custom Styling Using Styled JSX
Solution: Custom Styling Using Styled JSX
Using UI Frameworks
Overview: Using UI Frameworks
Integrating Chakra UI with Next.js
Building an Employee Directory with Chakra UI and Next.js
Integrating TailwindCSS in Next.js
Integrating Headless UI with Next.js
Summary: Using UI Frameworks
Quiz: Using UI Frameworks
Exercise: Using UI Frameworks
Solution: Using UI Frameworks
Using a Custom Server
Overview: Using a Custom Server
Using a Custom Server
Using a Custom Express.js Server
Using a Custom Fastify Server
Summary: Using a Custom Server
Quiz: Using a Custom Server
Exercise: Building an Express.js Server
Solution: Building an Express.js Server
Testing Next.js
Overview: Testing Next.js
An Introduction to Testing
Running Unit and Integration Tests
End-to-End Testing with Cypress
Summary: Testing Next.js
Quiz: Testing Next.js
Exercise: Troubleshooting Next.js Components with Jest
Solution: Troubleshooting Next.js Components with Jest
Working with SEO and Managing Performance
Overview: Working With SEO and Managing Performance
SEO and Performance: An Introduction
Rendering Strategies from a Performance and SEO Perspective
Private Routes
Working with SEO
Summary: Working with SEO and Managing Performance
Quiz: Working with SEO and Managing Performance
Project
Next.js Internationalization: Building a Multilingual Blog App
Different Deployment Platforms
Overview: Different Deployment Platforms
A Brief Introduction to Different Deployment Platforms
Deploying to the Vercel Platform
Deploying a Static Site to a CDN
Deploying Next.js on Any Server
Summary: Different Deployment Platforms
Quiz: Different Deployment Platforms
Managing Authentication and User Sessions
Overview: Managing Authentication and User Sessions
A Brief Introduction to User Sessions and Authentication
Custom Authentication: The Good, the Bad, and the Ugly
Implementing Authentication Using Auth0
Summary: Managing Authentication and User Sessions
Quiz: Managing Authentication and User Sessions
Building an E-Commerce Website with Next.js and GraphCMS
Overview: Building an E-Commerce Website with Next.js and GraphCM
Creating E-Commerce Websites for the Modern Web
Setting up GraphCMS
Creating the Storefront, Cart, and Product Detail Pages
Processing Payments Using Stripe
Summary: Building an E-Commerce Website with Next.js and GraphCMS
Quiz: Building an E-Commerce Website with Next.js and GraphCMS
Mini Project
Create a Real-Time Chat Application in Next.js
Wrapping Up
Conclusion
Home
Courses
Building Dynamic Web Applications with Next.js
Exercise: Using UI Frameworks
Use what you've learned in this chapter to complete this coding exercise.
We'll cover the following...
Problem statement
Try it yourself
...