Let's Build 10 NextJs Projects
Build 10 NextJs Projects with ShadCN, TailwindCSS, Fetch API, Axios
Updated on Oct, 2026
Language - English
Lectures -75
Duration -11.5 hours
Lifetime Access
Lifetime Access
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
NextJS is an open-source web development framework built by Vercel and built upon the React JavaScript library. It has become one of the most beloved frameworks for front-end and back-end web developers because it offers server-side rendering by default and static-site generation. Because it is a framework, NextJS handles a lot of nuances that React does not.
For example:
For example:
- It has built-in optimisations for images and fonts so that they don't cause a layout shift when your page loads.
- It uses React Suspense to enable dynamic HTML streaming from the server so that users can still interact with your website as more content is processed from the server.
- It uses React Server components by default, which are more secure when querying data from a database and which provide an additional layer of security to your application because its data is not saved on the client.
- NextJS allows us to make server components asynchronous. This allows us to use the async / await keywords when naming components in order to fetch data from a source.
- It allows for many CSS integrations, including CSS modules, frameworks and CSS-in-JS libraries such as Emotion.
- It has support for Incremental Static Generation (ISR), caching, and the newly introduced, but still experimental, Partial Prerendering (PPR).
- It has support for server actions, which are asynchronous functions that can be run in both the server and client to execute in one network round-trip.
- You can build your own API routes, such as for authentication and webhooks, thanks to its Route handlers.
- You can implement your own middleware.
- It uses a file-based routing system that allows for generating dynamic routes at build time and nesting routes.
- NextJS is built on React, Turbopack, and Speedy Web Compiler (SWC).
- 2 authentication applications using Clerk and Kinde.
- API projects
- Sanity CMS and NextJs
Goals
- Learn how to build any application using NextJS.
- Learn React Client and Server components.
- Learn Client-side and Server-side rendering.
- Learn NextJS's file-based routing, nested routes, route groups, and dynamic routing.
- Learn data fetching in both client-side and server-side components.
- Learn the usePathname and useRouter hooks.
- How to style a NextJS application.
- How to connect Sanity CMS with NextJS.
- How to create and use Environment variables in a .NextJs application
- Build an authentication app using Clerk and Kinde.
- Build interactive web apps from APIs.
Prerequisites
- Knowledge of how to structure a web app in HTML
- Knowledge of how to style a web app using CSS
- TailwindCSS is a good addition
- How to manipulate the DOM using JavaScript
- Some knowledge of how React works, and the virtual DOM.
Curriculum
Check out the detailed breakdown of what’s inside the course
Introduction
10 Lectures
-
Introduction and Overview of What We Will Build
02:12
02:12
-
Prerequisites
05:37
05:37
-
How to Create a NextJs Application
03:48
03:48
-
NextJs File Structure and VSCode Extensions I am Using
11:05
11:05
-
Reserved File Names
10:36
10:36
-
NextJs Routing and Layouts
09:12
09:12
-
Dependencies We Will Need
11:10
11:10
-
Github Template We Will Use for Projects
06:20
06:20
-
NextJs Metadata
10:01
10:01
-
Github Repository
00:38
00:38
Project 1 - Sanity CMS and NextJs
9 Lectures
Project 2 - Image Gallery Using the Unsplash API
4 Lectures
Project 3 - Pokedex
5 Lectures
Project 4- Clerk Authentication
5 Lectures
Project 5 - Kinde Authentication
5 Lectures
Project 6 - Food Recipe App
5 Lectures
Project 7 - Link Sharing App
10 Lectures
Project 8 - SpaceX Web App
13 Lectures
Project 9 - Countries App
4 Lectures
Project 10 - Sports App
4 Lectures
Outro
1 Lectures
Instructor Details
Thomas Sankara
Front-end Web Developer, YouTuber, Coding InstructorThomas Sankara is a front-end web developer and popular YouTuber from Nairobi, Kenya.
Course Certificate
Use your certificate to make a career change or to advance in your current career.
Our students work
with the Best
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now