Skip to content

Learn Next.js

Welcome to the Next.js App Router course! In this free interactive course, you'll learn the main features of Next.js by building a full-stack web application.

What we'll be building

Screenshots of the dashboard project showing desktop and mobile versions.

For this course, we'll be building a simplified version of the financial dashboard that has:

  • A public home page.
  • A login page.
  • Dashboard pages that are protected by authentication.
  • The ability for users to add, edit, and delete invoices.

The dashboard will also have an accompanying database, which you'll set up in a later chapter.

By the end of the course, you'll have the essential skills needed to start building full-stack Next.js applications.

Overview

Here's an overview of features you'll learn about in this course:

  • Styling: The different ways to style your application in Next.js.
  • Optimizations: How to optimize images, links, and fonts.
  • Routing: How to create nested layouts and pages using file-system routing.
  • Data Fetching: How to set up a database on Vercel, and best practices for fetching and streaming.
  • Search and Pagination: How to implement search and pagination using URL Search Params.
  • Mutating Data: How to mutate data using React Server Actions, and revalidate the Next.js cache.
  • Error Handling: How to handle general and 404 not found errors.
  • Form Validation and Accessibility: How to do server-side form validation and tips for improving accessibility.
  • Authentication: How to add authentication to your application using NextAuth.js and Middleware.
  • Metadata: How to add metadata and prepare your application for social sharing.

Prerequisite knowledge

This course assumes you have a basic understanding of React and JavaScript. If you're new to React, we recommend going through our React Foundations course first to learn the fundamentals of React, such as components, props, state, and hooks, and newer features like Server Components and Suspense.

System requirements

Before you start this course, make sure your system meets the following requirements:

  • Node.js 18.17.0 or later installed. Download here.
  • Operating systems: macOS, Windows (including WSL), or Linux.

In addition, you'll also need a GitHub Account and a Vercel Account.

Join the conversation

If you have questions about this course or would like to provide feedback, you can ask our community on Discord or GitHub.

Ready to get started?

Now that you've been introduced to the course, let's dive in.

Next Up

1: Getting Started

Learn how to create a Next.js application and run your local development server.