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.

Intermediate

101 Lessons

30h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Project

71 Playgrounds

14 Quizzes

This course includes

1 Project

71 Playgrounds

14 Quizzes

Course Overview

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...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

What You'll Learn

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

Course Content

Before We Begin

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

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

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

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

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.

CSS and Built-In Styles Methods

8 Lessons

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

Using UI Frameworks

9 Lessons

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

Using a Custom Server

8 Lessons

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

10.

Testing Next.js

8 Lessons

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

11.

Working with SEO and Managing Performance

7 Lessons

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

12.

Different Deployment Platforms

7 Lessons

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

13.

Managing Authentication and User Sessions

6 Lessons

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

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.

Create a Real-Time Chat Application in Next.js

Project

15.

Wrapping Up

1 Lesson

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

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

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!