Best Next.js tutorials for 2024 and beyond

By Ikius Team

19th December, 2023

It's no secret that businesses are always on the lookout for developers. Businesses need developers skilled in specific technologies, and with the rise of JavaScript, experience with frontend frameworks like Next.js is becoming increasingly important to nail a solid job.

If you're looking to become a developer or if you're looking to improve your skills, Next.js is a technology worth learning. But like any other tool, it's crucial to understand how to use it correctly to get the most out of it.

To help you out, I curated a list of novice-level, free Next.js tutorials you can follow along to go from zero to hero. It includes Next.js 14 tutorials, too, so it's pretty updated.

We'll start with the basics and work our way up to more complex topics so you can build your next-gen web applications using this amazing technology.

This post covers

In this post:

What is Next.js?

You probably know what Next.js is, but a brush-up doesn't hurt.

Next.js is a React framework that gives you building blocks to create web applications. Unlike React, which is a library for building user interfaces.

As a JavaScript framework, Next.js handles the tooling and configuration needed for a React app and provides additional structure, features, and optimizations for your web application.

Why use Next.js?

Great for SEO
Fast performance
Customizable URLs
Compatible with React
Solid community support

Next.js foundations | Next.js

This tutorial is the real deal. It can’t get more official than this. On this website, Vercel lies the foundations of Next.js, how to go from zero to hero, and how to create your first app step-by-step, starting with a JavaScript application, then migrating it to React and Next.js.

This website is a mandatory first stop if you don’t know much about the framework and need a first glance.

How Next.js works
Create your first app
Add dynamic routes
Next.js SEO

Next.js in 100 Seconds | Fireship

This course is the fastest first impression I could find. While it doesn’t teach you how to use NextJS, it sheds light on the main concepts behind this interesting JavaScript framework.

It has a 10-minute tutorial after the 100 seconds first glance that I recommend you follow along, as it teaches you how to use Next.js CLI and create your own components.

Use Next.js pages directory
Work with static generation
Create a React component
Use NextJS CLI
Work with server side rendering

Next.js Crash Course | Sonny Sangha

This is a long tutorial, y’all. I’d say it’s the longest, most comprehensive Next.js tutorial I’ve found so far. 16 condensed hours of pure power and education.

While it can be a bit too much to chew, if you pace yourself, you’ll get a deep dive into Next.js, which will give you the tools and the knowledge to build not one but five types of apps using our favorite JavaScript framework.

I liked this course because of how comprehensive it is and because it shows you how to use NextJS with Sanity, one of my favorite CMS and an all-time favorite here at Ikius.

Get started with Sanity CMS
Add server side rendering to a Next.js app
Add components
Style components
Add Next.js Auth
Use Firebase with Next.js
Build a Medium, Facebook, Instagram, or Hulu clone

Next.js for beginners | FreeCodeCamp

I’m a big fan of FreeCodeCamp, and I’ve watched this course a few times at different points in my life, and it’s always been valuable. Kapehe from Sanity.io does a great job explaining the basics of NextJS and how to use it with Sanity Studio.

Another reason I find it interesting is that it shows you how to set up GitHub and Vercel to host and deploy your app, taking you from zero to hero in a couple of hours' time.

Use Node.js, VS Code, and the NextJS CLI
Set up Sanity Studio
Create a navigation bar in app.js
Make your first page template in index.js
Set up automatic deployment with Github and Vercel

Next.js tutorial for beginners | The Net Ninja

What I like about this tutorial is that it’s divided into small chunks. Small chapters, each with the information you need, allow me or you to pause and get coffee. This particular Next.js tutorial has 14 chapters roughly delineating the steps from setup to deployment.

This tutorial shows you how to build a list site using Next.js. While it’s fairly basic compared to other courses on the list, the courseload and the teacher’s voice and tone make it a very digestible, easy-to-follow tutorial.

Set up Next.js
Create links between pages
Add styles
Use images and metadata
Leverage dynamic routing

If this sounds like too much,
our agency can help you
implement Next.js

Team augmentation: Work with top Nordic talent

Tech stack selection: We help you select the best tools and framework for your project.

Digital transformation consulting: We guide you through the digital forest.

Advanced Next.js Course | codedamn

Enough with the kid gloves. Let’s get to the advanced stuff. This is a two-hour tutorial that assumes you already know the fundamentals and that you can build a functional NextJS app.

In this course, you will learn how to use server side rendering, static site generation, dynamic routes, and data fetching to show content on your website. It also shows you how to set up content preview, which is something that can cause many novice developers a headache.

Set up static site generation
Enable content previews
Set up dynamic loading
Use server side rendering appropriately

How to Create a PWA With Next.js in 10 Minutes | James Q Quick

If you’ve been 5 minutes in the frontend development world, you probably know that James Q Quick is a household name when it comes to tutorials.

While this video is only 13 minutes long, it’s jam-packed with information about how to build a progressive web app that works as a native app.

Use NextJS CLI to run a PA starter
Understand what .gitignore is and why you should use it
Configure PWA manifest using Simicart
Configure your PWA in next.config.js

Next.js internationalization (i18n) | Patrick M

In this Next.js tutorial you will learn all about internationalization. Delivering localized content to your visitors is a must, especially if you live in countries with two or more official languages. Localized content ensures every possible visitor gets what they’re looking for.

In this Next.js course, you will learn how to translate your app to different languages, use different routing strategies, and automatic locale detection to translate an existing web application using next-translate. W

You’ll learn to:

Perform internationalized routing
Set up different locales

Next.js Image Optimization | Code Commerce

This video tutorial goes on image optimization, a sometimes overlooked feature of a NextJS application. NextJS offers great features right out of the box, especially for image optimization.

This 8-minute video shows how to take advantage of the image component, lazy loading images, optimize file sizes for better search engine optimization, and a beautiful UI.

You’ll learn to:

Use next/image component
Upload and transform images
Differentiate between a React component and a Next.js one

React SEO with Next.js | Colby Fayock

I have to be honest; Colby is an all-time favorite of mine. His videos are great, and he’s very easy to follow. The video is divided into chunks with micro lessons you can follow along.

In 12 minutes, you will learn a bunch of techniques about search engine optimization for Next.js and how to use React with Next.js as a framework to create SEO-driven pages and metadata.

Use Next.js preview mode
Create absolute imports and mobile path aliases
Handle redirects and rewrites

10 Next.js Tips You Might Not Know! | Lee Robinson

We’ve covered a lot of ground with the tutorials I’ve shown you, so let’s switch things around a bit with a video full of nice secret features of Next.js, courtesy of Lee Robinson, VP of Developer Experience at Vercel.

I’ll admit I didn’t know some of these tips, so I wanted to share them with you. This 8-minute video will show you great tidbits of information like how to use Preact, use Next.js for mobile apps, how to CRUD API routes, and more.

Use Next.js preview mode
Create absolute imports and mobile path aliases
Handle redirects and rewrites

Next.js 13 App Directory, React Server Components & More | Traversy Media

If you're already versed in Next.js 12, this crash course will boost you. This video has a complete crash course to NextJS version 13, and its new features, such as the app directory structure, routing, React Server Components vs client components, and layouts.

My knowledge of Next.js 13 was a bit iffy, but after this video, I can say I got more than I asked for. Watch it at your own pace, and don't try to sink your teeth too hard and too early into this one, or you'll be discouraged. However, if you're a pro, you'll find out many of these things still apply to Next 12.

Next.js 13 How to use App folder & Layouts | Tuomo Kankaanpää

Version 13 introduces new app folder routing, layouts, and server components. In this video Tuomo show you how to use the new app folder, layouts, and server components to build a simple but state-of-the-art application.

I've watched Tuomo's videos and even gotten private mentorship sessions with him and I got to say that he knows what he's talking about. If he helped me, I'm sure he can help you. Also, he's one of the most approachable tutorial makers I know; chances are, he will reply to your message.

Closing thoughts:

Next.js is a powerful framework that can help you build fast, efficient websites and applications. However, as with any other tool, learning how to use it correctly is essential to get the most out of it.

With the help of these tutorials and all the hands-on experience you can get, you’ll be ready to build a solid web application in no time. I’ll keep updating this guide with new content and newer videos, so it always stays current no matter when you’re reading it. Special thanks to the Next.js Reddit community r/nextjs for their help curating this list.

If you're looking for more information or want to dive deeper into Next.js, be sure to check out our other articles on the topic.

Contact us