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

Quiz: Exploring Different Rendering Strategies

Test yourself on what you've learned in this chapter.

1

How can you enable server-side rendering in Next.js?

A)

By using the render method

B)

By using the getInitialProps method

C)

By using the componentDidMount method

D)

By using the useEffect hook

Question 1 of 60 attempted

Get hands-on with 1200+ tech skills courses.