HomeCoursesBuilding Dynamic Web Applications with Next.js

Intermediate

30h

Updated 5 months ago

Building Dynamic Web Applications with Next.js

Gain insights into building scalable full-stack apps with Next.js. Delve into unique features, UI frameworks, and testing strategies. Discover integrations with GraphQL API and Stripe.

Join 2.7 million developers at

Overview

Content

Reviews

This course is for web developers who want to improve their React skills by building scalable and maintainable full stack applications using a modern web framework—Next.js. Intermediate-level knowledge of ES6+, React, Node.js, and REST is required. In this course, you’ll start by covering the basics of Next.js, starting with what differentiates it from other frameworks, its unique features, and how to bootstrap a new project from scratch. Next, you’ll dive into writing some small Next.js apps. You will see how to make correct decisions when adopting UI frameworks, styling methods, testing strategies, and more. By the end of the course, you’ll learn about production-grade applications using the methods and strategies, along with some integrations with the GraphQL API and Stripe in the developed application.

This course is for web developers who want to improve their React skills by building scalable and maintainable full stack applic...Show More

WHAT YOU'LL LEARN

An understanding of Next.js fundamentals and how Next.js integrates with React

A working knowledge of Server-side Rendering (SSR) and Client-side Rendering (CSR)

The ability to effectively use UI frameworks and test Next.js applications

An understanding of the techniques to improve the performance of Next.js applications

An understanding of the approaches to styling Next.js applications, including CSS-in-JS libraries like styled-components and CSS Modules

An understanding of Next.js fundamentals and how Next.js integrates with React

Content

101 Lessons1 Project14 Quizzes

Before We Begin

1 Lessons

Get familiar with Next.js, its audience, and foundational concepts for dynamic web application development.

Who Is This Course For?

Exploring Next.js: A Brief Primer

7 Lessons

Look at key concepts like server-side rendering, static generation, and project structure in Next.js.

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

8 Lessons

Work your way through rendering strategies in Next.js, including SSR, CSR, and SSG for dynamic content.

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

9 Lessons

Break down the steps to mastering Next.js basics, routing, and image optimization.

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

7 Lessons

Solve problems in organizing and fetching data in Next.js applications.

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

8 Lessons

Tackle state management in Next.js using Context APIs and Redux for dynamic UI updates.

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

8 Lessons

Build on styling methods in Next.js with Styled JSX, CSS Modules, and SASS integration.

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

9 Lessons

Learn how to use Next.js with Chakra UI and TailwindCSS for efficient UI development.

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

8 Lessons

Walk through integrating Next.js with Express.js and Fastify for custom server setups.

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

10.

Testing Next.js

8 Lessons

Go hands-on with unit, integration, and end-to-end testing in Next.js applications.

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

11.

Working with SEO and Managing Performance

7 Lessons

Grasp the fundamentals of SEO, performance optimization, and rendering strategies in Next.js.

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

12.

Different Deployment Platforms

7 Lessons

Select the right deployment platform based on project needs for optimal performance.

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

13.

Managing Authentication and User Sessions

6 Lessons

Manage authentication and user sessions in Next.js for secure, efficient web applications.

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

14.

Building an E-Commerce Website with Next.js and GraphCMS

7 Lessons

Build a complete e-commerce site using Next.js, GraphCMS, and Stripe for seamless transactions.

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

Create a Real-Time Chat Application in Next.js

Project

15.

Wrapping Up

1 Lessons

Sharpen your skills in Next.js core features, best practices, and continuous learning.

Conclusion

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Packt

Developed by MAANG Engineers

Every Educative resource is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who’ve shipped production code at scale and taught the theory behind it. The goal is to get you hands-on with the skills you need to stay ahead in today's constantly evolving tech landscape. No videos, no fluff — just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Next.js - The ultimate way to build React apps

Gain insights into building ultra-fast React apps with Next.js. Delve into static optimization, SEO practices, and deploying a giphy search app using the giphy.com API.

5 h

intermediate

Course

Building a Jamstack Application with Next.js and Strapi CMS

Explore building performance-efficient web applications using Next.js and Strapi. Gain insights into creating static sites, user authentication, and integrating headless CMS in a Jamstack architecture.

8 h

beginner

Course

JavaScript in Detail: From Beginner to Advanced

Discover JavaScript fundamentals and advanced concepts, including OOP and asynchronous programming. Gain insights through projects and a final exam, enhancing your skills and portfolio.

12 h

beginner

Course

JavaScript Fundamentals Before Learning React

Gain insights into JavaScript ES6+, ternary operators, 'this' object, built-in functions, and core concepts like composability and immutability to ease your React learning journey.

3 h

beginner

Course

Simplifying JavaScript: A Handy Guide for Software Engineers

Gain insights into modern JavaScript, focusing on impactful syntax and practical usage. Discover essential language features and 51 valuable tips to enhance your productivity as a developer.

10 h

beginner

Course

Next.js - The ultimate way to build React apps

intermediate

5 hour

Course

Building a Jamstack Application with Next.js and Strapi CMS

beginner

8 hour

Course

JavaScript in Detail: From Beginner to Advanced