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: Using UI Frameworks

Take a look at the concepts that we are going to discuss in this chapter.

We'll cover the following

Introduction

Introduction

In the previous chapter, we saw how Next.js can improve our productivity by giving us many valid alternatives for writing CSS without the need to install and configure many different external packages.

Still, there are cases where we may want to use prebuilt UI libraries to take advantage of their components, themes, and built-in features so that we don’t have to build them from scratch and to take advantage of a vast community that can help us when any problem occurs.

Get hands-on with 1400+ tech skills courses.