Learn Next.js For Free with These Resources
Tags: webdev, nextjs, react, javascript
Published: 2021-03-29 05:08:34

Hello friends, yesterday I have shared [React resources](https://dev.to/hulyakarakaya/ultimate-react-resources-obl) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616989965349/plIFDx83B.gif)

If you would like to read the benefits of  Next.js in detail, check out this [blog post](https://dev.to/thatanjan/13-reasons-why-you-should-use-nextjs-4kgd).

## 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](https://twitter.com/colbyfayock), [Cassidy Williams from Netlify](https://twitter.com/cassidoo), [Lee Robinson from Vercel](https://twitter.com/leeerob); if you would like to learn more you can purchase a Udemy course, I saw that [Academind by Maximilian Schwarzmüller](https://www.udemy.com/course/nextjs-react-the-complete-guide/#instructor-1) 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:


![source.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1616993253461/tYopPw0i9e.gif)



1.[Next.js Official Website](https://nextjs.org/docs)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616990708004/sdsXI-tNl.png)

2.[Mastering Next.js by Lee Robinson](https://masteringnextjs.com/)

Lee Robinson is a developer, writer, and creator. He works at ▲Vercel as a Solutions Architect. He has a [youtube channel](https://www.youtube.com/user/MaStaleee), you should check it out to learn more about Next.js.


![Screen Shot 2021-03-28 at 9.04.42 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616990697105/ZNA4w_crJ.png)

3.[Awesome Next.js](https://github.com/unicodeveloper/awesome-nextjs)

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

![Screen Shot 2021-03-28 at 9.08.14 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616990904900/FOSS7OMyG.png)

4.[Awesome Open Source](https://awesomeopensource.com/projects/nextjs)

The Top 288 Next.js Open Source Projects.

![Screen Shot 2021-03-28 at 9.10.16 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616991027749/4eFmZKVy_.png)

5.[The Next.js Handbook by Flavio Copes](https://www.freecodecamp.org/news/the-next-js-handbook/)

![Screen Shot 2021-03-28 at 9.11.43 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616991113060/SYeT2-jvW.png)


6.[Next Examples](https://nextexamples.vercel.app/)

Explore all the official Next.js examples.

![Screen Shot 2021-03-28 at 9.12.43 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616991208400/oiB0h-jOQ.png)

7.[Colby Fayock's Full Stack Next.js Tutorial](https://www.youtube.com/watch?v=QjZIeA952jE&t=402s&ab_channel=ColbyFayock)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616991885324/PSO68D4RT.png)


8.[Net Ninja-Next.js Tutorials](https://www.youtube.com/watch?v=A63UxsQsEbU&list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw&ab_channel=TheNetNinja)


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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616991757063/2EyLzuzn8.png)
 
9.[Brad Traversy's New Next.js Tutorial](https://www.youtube.com/watch?v=mTz0GXj8NN0&ab_channel=TraversyMedia)


![Screen Shot 2021-03-28 at 9.25.21 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616991957384/SkoZH0G3_.png)

10.[Build a Fullstack App With Strapi and Next.js with Chris Sev](https://www.digitalocean.com/community/tech_talks/build-a-fullstack-app-with-strapi-and-next-js?utm_medium=email&utm_source=webinar&utm_campaign=invite&mkt_tok=eyJpIjoiTlRVM1lXSTVNVGs0TkRSbSIsInQiOiJSV1wvWFRLNmlXWWRjMUlGTlc2TTFhZFhZWTRuTjdhc3NON01rZ2RtWVwvN29FblpIMkYxR2pcL3JcL3ZSbmhPak5XcEJ3eVNBalFEaXVnWUpZbkd0ZlhWdTR5UkFVVzR2TVNOdVRcL2lLRTZGbEJ0aHZESEFcLzR1aEdJc003UDhxajdVKyJ9)

![Screen Shot 2021-03-28 at 9.28.49 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616992167094/Ff8p0CgwD.png)

11.[Next.js from the Ground Up by Cassidy Williams](https://explorers.netlify.com/learn/nextjs)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616992505421/TtZA2Pbns.png)

12.[Nextjs Fundamentals by Codedamn](https://codedamn.com/learn/nextjs-fundamentals)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616992691817/s0HEqWOJH.png)

13.[Next.js in 100 Seconds // Plus Full Beginner's Tutorial by Fireship](https://www.youtube.com/watch?v=Sklc_fQBmcs&t=173s&ab_channel=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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gvyuvw5cm8mwy4fk096.png)

## 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.](https://www.buymeacoffee.com/hulya)

<a href="https://www.buymeacoffee.com/hulya" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="40" width="170" ></a>


You can follow me on [Twitter](https://twitter.com/hulyakarkya) 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.