Let's Build 10 NextJs Projects
Build 10 NextJs Projects with ShadCN, TailwindCSS, Fetch API, Axios
Updated on Apr, 2025
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:
NextJs is built on React, Turbopack, and Speedy Web Compiler (SWC).
In this course, we are going to build a range of applications such as:
- It has built in optimizations 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 and additional layer of security to your application because it's 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 roundtrip.
- 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).
In this course, we are going to build a range of applications such as:
- 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