Skip to content

Start building with Next.js

Go from beginner to expert by learning the foundations of Next.js and building a fully functional demo website that uses all the latest features.

Learn Next.js

Learn Next.js

16 chapters that take you from React to Next.js.

Placeholder

React Foundations

New to React? Learn the foundational concepts to help you go from JavaScript to React.

Next.js Pages Router

Learn how to build a static blog with the Pages Router.

How does the course work?

By building a full web application. Step by step.

Course explainer

Set up your local environment and initializing the "ACME" Next.js project template.

Use pre-styled components as part of each chapter that leverage Next.js conventions and patterns.

Hook up real application logic and data to bring a fully-fledged demo website to life.

At the end you’ll have a website that’s ready to ship and the knowledge to build and deploy your own.

Your progress will be synced as you complete chapters

Go at your own pace and pick up where you left off

Test your knowledge during each chapter

Take quick quizzes to see what you’ve learned

What will I learn?

Here’s everything that’s covered in the course.

Introduction

Learn how to build a full-stack web application with the free, Next.js Foundations course.
1

Getting Started

Create a new Next.js application using the dashboard starter example and explore the project.
2

CSS Styling

Style your Next.js application with Tailwind and CSS modules.
3

Optimizing Fonts and Images

Optimize fonts and images with the Next.js built-in components.
4

Creating Layouts and Pages

Create the dashboard routes and a shared layout that can be shared between multiple pages.
5

Navigating Between Pages

Learn how to use the <Link> component to navigate between pages.
6

Setting Up Your Database

Setup a database for your application and seed it with initial data.
7

Fetching Data

Learn about the different ways to fetch data in Next.js, and fetch data for your dashboard page using Server Components.
8

Static and Dynamic Rendering

Understand how rendering works in Next.js, and make your dashboard app dynamic.
9

Streaming

Improve your application's loading experience with streaming and loading skeletons.
10

Adding Search and Pagination

Add search and pagination to your dashboard application using Next.js APIs.
11

Mutating Data

Mutate data using React Server Actions, and revalidate the Next.js cache.
12

Handling Errors

Handle errors gracefully with error.tsx and notFound.
13

Improving Accessibility

Implement server-side form validation and improve accessibility in your forms.
14

Adding Authentication

Add authentication to protect your dashboard routes using NextAuth.js, Server Actions, and Proxy.
15

Adding Metadata

Learn how to add metadata to your Next.js application.
16

Next Steps

Next.js Dashboard Course Conclusion
Placeholder

Looking to go deeper?

Continue learning by using our guides.

View All Guides

How to build a fullstack app with Next.js, Prisma and Postgres

Build, Deployment & Git

Build a multi-tenant app with custom domains using Next.js

Build, Deployment & Git

Integrating Next.js and Contentful for your headless CMS

Databases & CMS

Building Ecommerce Sites with Next.js and Shopify

Databases & CMS

Using headless WordPress with Next.js and Vercel

Databases & CMS

Next.js Documentation

The complete resource for installing, running, building with, and deploying Next.js

View the Documentation