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

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

Customizing the _app.js and _document.js Pages

Learn to customize page initialization and HTML tags and to extend the Document class with custom scripts.

There are certain cases where we need to take control over page initialization so that every time we render a page, Next.js will need to run certain operations before sending the resulting HTML to the client. To do that, the framework allows us to create two new files, called _app.js and _document.js, inside our pages/ directory.

The `_app.js` page

By default, Next.js ships with the following pages/_app.js file:

Get hands-on with 1300+ tech skills courses.