DEV Community

Cover image for Learn Next.js For Free with These Resources

Posted on • Originally published at

Learn Next.js For Free with These Resources

Hello friends, yesterday I have shared React resources and I think after learning React, Next.js may be the next step.

So, if you are not familiar with Next.js, I will start with:

  • what Next.js is
  • its advantages
  • where you can learn more about Next.js

What is Next.js?

Next.js is a full-stack framework for modern apps created by Vercel (formerly Zeit) that enables functionality such as server-side rendering(SSR) and static site generation(SSG).

Unlike a traditional React app where the entire application is loaded and rendered on the client, Next.js allows the first-page load to be rendered by the server, which is great for SEO & performance.

Its benefits

  • easy page routing
  • out-of-the-box Typescript
  • easy deployment
  • relatively easy to learn after learning React.js
  • built-in CSS support
  • multiple data fetching
  • file system routing
  • code splitting and bundling

source (1).gif

If you would like to read the benefits of Next.js in detail, check out this blog post.

Where to learn Next.js

So, if you are curious about Next.js, I have compiled free resources for you, don't think that if it's free, it is not so good or something, the resources are beginner-friendly and taught by very professional developers like Colby Fayock, Cassidy Williams from Netlify, Lee Robinson from Vercel; if you would like to learn more you can purchase a Udemy course, I saw that Academind by Maximilian Schwarzmüller just released the latest Next.js course, you can check it out.

If you would like to start with the free ones, here they are:


1.Next.js Official Website

Next.js website has very good documentation with example projects and blog posts, you should check it out. Another reason to check it out is Next.js is changing very fast and it will be good for you to keep up with it from the official docs.

Screen Shot 2021-03-28 at 9.04.32 PM.png

2.Mastering Next.js by Lee Robinson

Lee Robinson is a developer, writer, and creator. He works at ▲Vercel as a Solutions Architect. He has a youtube channel, you should check it out to learn more about Next.js.

Screen Shot 2021-03-28 at 9.04.42 PM.png

3.Awesome Next.js

A curated list of awesome resources: books, videos, articles about using Next.js.

Screen Shot 2021-03-28 at 9.08.14 PM.png

4.Awesome Open Source

The Top 288 Next.js Open Source Projects.

Screen Shot 2021-03-28 at 9.10.16 PM.png

5.The Next.js Handbook by Flavio Copes

Screen Shot 2021-03-28 at 9.11.43 PM.png

6.Next Examples

Explore all the official Next.js examples.

Screen Shot 2021-03-28 at 9.12.43 PM.png

7.Colby Fayock's Full Stack Next.js Tutorial

Learn how to take a new project from design to development in this crash course. We'll walk through the full stack of building a new web app including designing a new app, starting the app from scratch, building components, adding dynamic content with authenticated APIs, automating tests, and deploying the project to the web.

Screen Shot 2021-03-28 at 9.24.30 PM.png

8.Net Ninja-Next.js Tutorials

The Net Ninja has created a new Next.js series with 14 episodes. They are short and sweet, you will learn the basics of Next.js.

Screen Shot 2021-03-28 at 9.22.21 PM.png

9.Brad Traversy's New Next.js Tutorial

Screen Shot 2021-03-28 at 9.25.21 PM.png

10.Build a Fullstack App With Strapi and Next.js with Chris Sev

Screen Shot 2021-03-28 at 9.28.49 PM.png

11.Next.js from the Ground Up by Cassidy Williams

Join Cassidy as she guides through all the essentials for getting up and running with Next.js!

Screen Shot 2021-03-28 at 9.34.04 PM.png

12.Nextjs Fundamentals by Codedamn

Equip yourself with the core fundamentals of Next.js - the most popular choice for building server-side rendering applications with React.

Screen Shot 2021-03-28 at 9.37.15 PM.png

13.Next.js in 100 Seconds // Plus Full Beginner's Tutorial by Fireship

Learn the basics of Next.js in 100 Seconds! Then build your first server-rendered react app with a full Next.js beginner's tutorial.

Alt Text

Let's Connect 🤗

If you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.

Buy Me A Coffee

You can follow me on Twitter and we can connect with each other. Also, you can check out my other posts.

If you think, there are more free resources, share them in the comments, I would be happy to check them out.

Top comments (6)

ixartz profile image
Remi W.

Thanks! I have another suggestion to your list, a Free Next JS Landing Page Template and I think it could be great to add into your article.

andrewbaisden profile image
Andrew Baisden

A great list thanks.

bhatvikrant profile image
Vikrant Bhat

Great value!

hulyakarakaya profile image

Thank you 😊

hulyakarakaya profile image

Thanks for sharing Anjan, great blog post, especially the banner 🤩