Back To Course Home

Building Dynamic Web Applications with Next.js

0% completed

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

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

Overview: Different Deployment Platforms

Learn how to use the right deployment platform.

We'll cover the following

Introduction

Introduction

Previously, we saw how Next.js works, how to optimize it for SEO, how to deal with performance, how to adopt UI frameworks, and how to fetch data on both the client and server sides, eventually being able to create a fantastic web application. But then, we have a problem: how should we ship it to production? There are many different hosting providers, cloud platforms, and even Platform as a Service (PaaS) solutions out there. How do we pick one?

Get hands-on with 1200+ tech skills courses.