23 Crazy Resources To Master NextJS in 2024
Tags: nextjs, react, webdev, javascript
Published: 2023-12-18 09:43:02


Hey there NextJS fans, have you been struggling to take your NextJS skills to the next level? Whether you're just getting started with Next or have been building apps for a while, keeping up with all the latest resources can feel totally overwhelming. 

Don't worry, I've got you covered. I've compiled this list of the 23 craziest Github repos, video courses, blog posts and other resources that will turn you into a NextJS master.

Sound good? Then let's dive in and start mastering NextJS! 

### nextjs/docs

![](https://res.cloudinary.com/rahulism/image/upload/v1702819307/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_16_ijfjgf.png )

[Next.js documentation](https://nextjs.org/docs): Your go-to resource for mastering the art of building fast, scalable, and delightful web applications with React.

### SWR 

![](https://res.cloudinary.com/rahulism/image/upload/v1702819300/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_15_uxdev7.png )

[SWR](https://swr.vercel.app/) is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

### Mastering NextJS

<iframe width="560" height="315" src="https://www.youtube.com/embed/uQeidE2LA1s?si=kbML1n9HxQOYM51M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

[Mastering NextJS](https://masteringnextjs.com/) is a free video course for building static and server-side rendered applications with Next.js and React. Course created by leerob.io. 

### tanstack/react-table

![]( https://res.cloudinary.com/rahulism/image/upload/v1702819185/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_14_zywg2j.png)

[TanStack's React Table](https://github.com/tanstack/react-table): Empowering your React applications with a flexible and efficient data-driven table solution for seamless user experiences.

### Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL

<iframe width="560" height="315" src="https://www.youtube.com/embed/5miHyP6lExg?si=VcwzfT1Hw7HzA3rx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth. This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications.

### Next js 13 project - IMBb Clone - next js tailwind css project - nextjs project

<iframe width="560" height="315" src="https://www.youtube.com/embed/OHEMPreO09Q?si=QyjuGdAFf4o03b1U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  
This project is not just about building a movie database website. It's about learning the core concepts of web development. You'll learn about server-side and client-side components, and how to seamlessly integrate them to create a seamless user experience. And with a deep dive into different fetching techniques, you'll come out of this project a pro in Next.js and Tailwind CSS. 

This project teaches you not only about server-side and client-side components, but also about how to add loading effects and handle errors in Next.js. 

---
![_assets_categories_developer.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/08e0e558-e0bc-4246-b3d2-779f03ac98a2/11a6d765-2ec2-456c-bf58-ecbce686c372/_assets_categories_developer.png)

Hey Developer, I have compiled a list of 1200+ [Free Developer Resources](https://www.notion.so/Learnn-Materials-3d0b15279506423a876b6d2d893fce3e?pvs=21). You can become a full stack developer following the resources. Thanks for stopping by.

---

### kaminari

![kaminari]( https://res.cloudinary.com/rahulism/image/upload/v1702818600/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_13_clgan1.png)

[Kaminari](https://kaminari.vercel.app/) is a modern Next.js, Tailwind CSS and shadcn-ui boilerplate that includes all you need to build amazing projects. No need to spend time on configuring the basic needs of a project. I did that for you - Created by  [Virgil](https://obedd.vercel.app/)

### Dynamic CMS-driven Redirects with Next.js

![](https://echobind.com/_next/image?url=https%3A%2F%2Fcms.echobind.com%2Fassets%2F9d173bad-4238-48a5-8f29-fa719d5026da&w=828&q=75 )

Redirects send a request for one page to another page, and are crucial for maintaining good SEO. We can manage these with our own Next.js app and any CMS.

Read the article on [Echobind](https://echobind.com/post/dynamic-cms-driven-redirects). 

### Next.js Authentication - AuthJS / NextAuth for Role-Based Security

<iframe width="560" height="315" src="https://www.youtube.com/embed/MNm1XhDjX1s?si=nLALPeItf2HZbGth" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Learn how to use this tool to add authentication to Next.js 13.5. Dive into the world of role-based authentication and learn how to implement authentication on both server-rendered and client-rendered pages. 

Discover how to leverage out-of-the-box OAuth providers like Google and GitHub, and explore the process of creating your custom authentication provider using MongoDB. 

### Advanced Next.js Concepts

![](https://miro.medium.com/v2/resize:fit:786/format:webp/1*cjwgmnEHqoCa7U8SqKiU-A.png )

As a developer, you may have built a Next.js application using the basic concepts such as creating and navigating pages, handling data with getStaticProps and getServerSideProps, and styling with CSS…

Read the blog on [Medium](https://blog.devgenius.io/advanced-next-js-concepts-8439a8752597).  

### React2025

![]( https://res.cloudinary.com/rahulism/image/upload/v1702819484/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_17_pvoame.png)

Learn how to build and deploy a modern React application using the most popular open-source software.

### Master Next JS 13 - 2023 - For Busy Developers

![](https://img-b.udemycdn.com/course/750x422/5435084_3dce_2.jpg)

Accelerate Your Development Workflow and Harness the Power of Next.js 13 - The Ultimate Course for Busy Developers. 

Link to the [Udemy](https://www.udemy.com/course/master-next-js-for-busy-developers/) Course. 

### Typescript Docs

![]( https://res.cloudinary.com/rahulism/image/upload/v1702819918/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_18_aohwxk.png)

TypeScript is a statically typed superset of JavaScript that brings enhanced developer tooling, improved code maintainability, and reduced runtime errors, making it crucial to learn with Next.js for a more robust and scalable web development experience.

Read [Typescript Docs](https://www.typescriptlang.org/docs/). 

### Tailwind CSS

![]( https://res.cloudinary.com/rahulism/image/upload/v1702820053/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/frame_safari_dark_19_oxu1av.png)

[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that facilitates rapid and maintainable styling, and when paired with Next.js, it empowers developers to effortlessly create responsive, highly customizable user interfaces by seamlessly integrating utility classes into the component-driven structure of Next.js applications.

### Create Your Own Local Chatbot with Next.js, Ollama, and ModelFusion

![]( https://cdn.hashnode.com/res/hashnode/image/upload/v1702195935093/8955be57-30cd-472d-a680-d3a013615606.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)

In this blog post, we'll build a Next.js chatbot that runs on your computer. We'll use Ollama to serve the OpenHermes 2.5 Mistral LLM (large language model) locally, the Vercel AI SDK to handle stream forwarding and rendering, and ModelFusion.

Read the blog on [Hashnode](https://p42.hashnode.dev/create-your-own-local-chatbot-with-nextjs-ollama-and-modelfusion). 

### SEO in Next.js and Prismic

![](https://www.garymeehan.ie/og/articles/next-with-prismic.jpg)

We look at default SEO, page specific SEO, Open Graph tags and JSON-LD. Along with enriching these with Prismic.

Article by - Gary Meehan. read on his [blog](https://www.garymeehan.ie/articles/handling-seo-with-nextjs-and-prismic?ref=learnn.cc). 

### How to Create Dynamic API Routes in Next.js

![](https://www.freecodecamp.org/news/content/images/size/w2000/2023/11/Next.js-Dynamic-API-Routes.png )

Next.js is a React-based framework that enables developers to create full-stack web applications by extending the latest React features.  Next helps you add additional features and optimizations to your React apps like static site generation (SSG), server-side rendering (SSR), automatic code splitting and bundling, and dynamic API routes. 

Read the article on [FreeCodeCamp](https://www.freecodecamp.org/news/next-js-dynamic-api-routes/). 

### Bruno Antunes on YT

![]( https://res.cloudinary.com/rahulism/image/upload/v1702889256/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/Screenshot_2023-12-18_141652_u1y8wm.png)

Bruno, a front-end developer living in London, United Kingdom. He runs a YouTube channel where you can find awesome tutorials focused on front-end technologies like JavaScript, TypeScript, HTML, CSS, React, and Angular. Every now and then, he also dives into some of his favorite backend technologies, such as Node.js and C#.

[Youtube Channel](https://www.youtube.com/@BrunoAntunesPT). 

### Nitro 

![](https://github.com/williamluke4/Nitro/raw/master/nitro.gif)

An Example of a PWA using Nextjs, Material-UI, Typescript and Auth0 💗

Find it on [GitHub](https://github.com/williamluke4/nitro?ref=learnn.cc). 

### A Simple Portfolio made with Nextjs and Shadcn UI


![](https://camo.githubusercontent.com/2dbdfe2d7fcaa46a209ee8e4f4e0d9e104ced8d357c73551d7b6aadbeb92893a/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f75376571363868307576733678716777337971652e6a706567)

This portfolio, built with Next.js and ShadcnUI, features a sleek design using Tailwind CSS. With pages like about, projects, resume, and contact, it serves as an ideal starter template for showcasing web development skills.

Find it on [Github](https://github.com/taqui-786/Portfolio). 

### Next.js in 100 Seconds // Plus Full Beginner's Tutorial

<iframe width="560" height="315" src="https://www.youtube.com/embed/Sklc_fQBmcs?si=0NiX5EXwEupTARbP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

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. 

### The Next.js Handbook – Learn Next.js for Beginners

![](https://www.freecodecamp.org/news/content/images/size/w2000/2019/11/Group-1.png)

Flavio copes wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosystem.

Read it on [FreeCodeCamp](https://www.freecodecamp.org/news/the-next-js-handbook/?ref=learnn.cc). 

### next13-discord-clone 

![](https://res.cloudinary.com/rahulism/image/upload/v1702889628/Learnn%20Assets%20--%20Blog%20Images/23%20Crazy%20Resources%20To%20Master%20NextJS%20in%202024/263422931-14e25e4f-eb83-44dd-8b97-4f2666b89386.png_edi21j.png)

This is a repository for [Fullstack Discord Clone](https://github.com/AntonioErdeljac/next13-discord-clone): Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

Features:

-   Real-time messaging using Socket.io
-   Send attachments as messages using UploadThing
-   Delete & Edit messages in real time for all users
-   Create Text, Audio and Video call Channels
-   1:1 conversation between members
-   1:1 video calls between members
-   Member management (Kick, Role change Guest / Moderator)
-   Unique invite link generation & full working invite system
-   Infinite loading for messages in batches of 10 (tanstack/query)
-   Server creation and customization
-   Beautiful UI using TailwindCSS and ShadcnUI
-   Full responsivity and mobile UI
-   Light / Dark mode
-   Websocket fallback: Polling with alerts
-   ORM using Prisma
-   MySQL database using Planetscale
-   Authentication with Clerk

---

### Conclusion

So there you have it, 23 amazing resources to become a Next.js master by 2024. With a little bit of effort each week practicing and building projects, you'll be well on your way to becoming an expert in no time. 

Happy Building!

---

Thanks for reading. Let's stay connected! You can also follow me on [Twitter](http://twitter.com/rahul_wip), [Instagram](http://instagram.com/rahul_hsl), and [LinkedIn](https://www.linkedin.com/in/rahulbiz/). If you enjoyed this post, share it with your network and leave your thoughts below, and follow for more cool content. Also, you can always [Buy Me A Coffee](http://buymeacoffee.com/rahuldotbiz).