NextjsLogotypeNextjsLogotype
Select a display theme:

Start building with Next.js

Placeholder
React Foundations
Go from beginner to expert by learning the foundations of Next.js and building a fully functional application using the latest features.

Learn Next.js

Chapter 0:

Introduction

See all 15 chapters of App Router course

Build a full-stack dashboard

Learn Next.js by building a full web application, step by step.

nextjs-dashboard.vercel.app
  • Start with a templateSet up your environment with the Acme Next.js project template.
  • Build with componentsUse pre-styled components that follow Next.js conventions and patterns.
  • Add real dataConnect real application logic and data to bring a full dashboard to life.
  • Ready to shipFinish with a production-ready website and the knowledge to deploy your own.

What will I learn?

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.

IntroductionLearn how to build a full-stack web application with the free, Next.js Foundations course.
Getting StartedCreate a new Next.js application using the dashboard starter example and explore the project.
CSS StylingStyle your Next.js application with Tailwind and CSS modules.
Optimizing Fonts and ImagesOptimize fonts and images with the Next.js built-in components.
Creating Layouts and PagesCreate the dashboard routes and a shared layout that can be shared between multiple pages.
Navigating Between PagesLearn how to use the <Link> component to navigate between pages.
Setting Up Your DatabaseSetup a database for your application and seed it with initial data.
Fetching DataLearn about the different ways to fetch data in Next.js, and fetch data for your dashboard page using Server Components.
Static and Dynamic RenderingUnderstand how rendering works in Next.js, and make your dashboard app dynamic.
StreamingImprove your application's loading experience with streaming and loading skeletons.
Adding Search and PaginationAdd search and pagination to your dashboard application using Next.js APIs.
Mutating DataMutate data using React Server Actions, and revalidate the Next.js cache.
Handling ErrorsHandle errors gracefully with error.tsx and notFound.
Improving AccessibilityImplement server-side form validation and improve accessibility in your forms.
Adding AuthenticationAdd authentication to protect your dashboard routes using NextAuth.js, Server Actions, and Proxy.
Adding MetadataLearn how to add metadata to your Next.js application.
Next StepsNext.js Dashboard Course Conclusion
Placeholder

More courses

Keep learning with courses on the Pages Router and search engine optimization.

Next.js Pages RouterBuild a blog while learning routing, data fetching, and pre-rendering with the Pages Router.
SEOLearn how search engines work and improve your site with SEO and Core Web Vitals.

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

NextJsNextJs

Next.js Documentation

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

View the Documentation