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

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

Summary: Hands-On Next.js

Review what we've learned about fetching data and using GraphQL with Next.js.

We'll cover the following

Recap

Recap

In this chapter, we’ve taken a look at two crucial topics when talking about Next.js:

Organizing the project structure
The different ways of fetching data

Even if these two topics seem unrelated, being able to logically separate components and utilities, and fetching data in different ways, are essential skills.

Get hands-on with 1200+ tech skills courses.