Find the perfect coding resourcesLearn more

Learn Next.js

ScrimbaScrimba
Recommended
Meet Your Instructor
Bob Ziroll avatar

Bob Ziroll

Instructor

Head of Education at Scrimba. Passionate about learning and helping others achieve their career goals. Enjoys tennis, woodworking, and spending time with family.

4h 18m

Completion

Certificate included

Format

Interactive coding

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

Create pages and layouts

Overview

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.

Table of Contents
1
Next.js Intro3:10
2
A Minimal Next.js Setup5:17
3
Challenge: create a new Next.js app from scratch!4:09
4
Adding a new page to our site3:05
5
File-based routing in Next.js4:29
6
Understanding create-next-app3:51
7
Running create-next-app3:03
8
Scrimba's "Runner"2:54
9
create-next-app files walkthrough3:13
10
PrintForge Challenge Setup3:46
11
Challenge - PrintForge Home Page5:19
12
Challenge - PrintForge About Page3:45
13
Nested Routes4:42
14
Layouts part 14:48
15
Layouts part 24:39
16
Challenge - Add Header to PrintForge3:07
17
Optimizing Fonts9:09
18
Optimizing Images9:34
19
Links in Next.js4:21
20
Challenge - Add Links to Navbar3:10
21
Aside: TypeScript Organization in PrintForge3:38
22
Aside: Client vs. Server Components6:08
23
Challenge - Create the Models List Page4:39
24
Dynamic Routes9:39
25
Model Detail Page4:54
26
Section 1 Recap2:32

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!