Search courses ranked by devsSee how

1 recommendation
1recommend

Learn Next.js

Bob Ziroll
Bob Ziroll
Scrimba
Scrimba
Recommended

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

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

Duration

4 hours 18 minutes

Format

video

Certificate

Included

Pricing

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

3:10

A Minimal Next.js Setup

5:17

Challenge: create a new Next.js app from scratch!

4:09

Adding a new page to our site

3:05

File-based routing in Next.js

4:29

Understanding create-next-app

3:51

Running create-next-app

3:03

Scrimba's "Runner"

2:54

create-next-app files walkthrough

3:13

PrintForge Challenge Setup

3:46

Challenge - PrintForge Home Page

5:19

Challenge - PrintForge About Page

3:45

Nested Routes

4:42

Layouts part 1

4:48

Layouts part 2

4:39

Challenge - Add Header to PrintForge

3:07

Optimizing Fonts

9:09

Optimizing Images

9:34

Links in Next.js

4:21

Challenge - Add Links to Navbar

3:10

Aside: TypeScript Organization in PrintForge

3:38

Aside: Client vs. Server Components

6:08

Challenge - Create the Models List Page

4:39

Dynamic Routes

9:39

Model Detail Page

4:54

Section 1 Recap

2:32

Notice something missing?

Help us improve this course information for the community

Suggest an edit
Loading reviews...