Search courses ranked by devsStop wasting time. Search coding courses, tutorials, and books — ranked by developers who voted for themSee how→
Learn Next.js

Extra perks unlocked via skillcraft.ai link
Whether crafting your next side project or building the next big thing, Next.js makes it fun, fast, and easy to ship high-quality web applications. Next.js is a powerful React framework for building modern web applications. It combines blazing performance, flexible data fetching, and built-in optimizations. With features like server-side rendering (SSR), static site generation (SSG), API routes, and dynamic routing, Next.js makes it easier than ever to create sleek, scalable, and high-performing apps—without the headache. As with all Scrimba courses, we’ll be getting very hands-on with the code as we build a project called PrintForge—a site for browsing and sharing STL files which are used in 3D printing. This course covers everything you need to get started with Next.js. Whether you're a front-end developer looking to expand your skill set or a fullstack developer aiming to streamline your workflow, this course will enable you to build high-performance web apps that users (and search engines) love.
Instructor

Bob Ziroll
Head of Education at Scrimba. Passionate about learning and helping others achieve their career goals. Enjoys tennis, woodworking, and spending time with family.
Course details
4 hours 18 minutes
video
Included
Free
What you'll learn
Understand Next.js fundamentals
Create static pages and basic routing
Build nested routing structures
Implement client and server rendering concepts
Prerequisites
React.js fundamentals
JavaScript ES6+
HTML and CSS
Understanding of component-based architecture
Who this course is for
React developers wanting to learn Next.js
Frontend developers interested in full-stack capabilities
Developers building production React applications
Engineers wanting to improve SEO and performance
Curriculum
Next.js Intro
A Minimal Next.js Setup
Challenge: create a new Next.js app from scratch!
Adding a new page to our site
File-based routing in Next.js
Understanding create-next-app
Running create-next-app
Scrimba's "Runner"
create-next-app files walkthrough
PrintForge Challenge Setup
Challenge - PrintForge Home Page
Challenge - PrintForge About Page
Nested Routes
Layouts part 1
Layouts part 2
Challenge - Add Header to PrintForge
Optimizing Fonts
Optimizing Images
Links in Next.js
Challenge - Add Links to Navbar
Aside: TypeScript Organization in PrintForge
Aside: Client vs. Server Components
Challenge - Create the Models List Page
Dynamic Routes
Model Detail Page
Section 1 Recap
Notice something missing?
Help us improve this course information for the community