VIRTUAL CODE

NEXT JS
WITH PROJECT
 Prerequisites for this video VIRTUAL CODE

• HTML & CSS

• Java Script
• React Js
• Mongo DB
 VIRTUAL CODE

NEXT JS
LEVEL 1
INTRODUCTION TO NEXT JS
 INTRODUCTION TO NEXT JS VIRTUAL CODE

WHAT IS NEXT JS ?
• [Link] is a React-based open-source web framework that enables developers
to build fast, scalable, and SEO-friendly web applications with features like
server-side rendering (SSR), static site generation (SSG), API routes, and built-in
optimization for performance and routing.

• ✨ In short: It’s React, but with superpowers like SSR, SSG, routing, and full-stack
capabilities.
 VIRTUAL CODE

NEXT JS
LEVEL 2
App Router
 App Router VIRTUAL CODE

Introduction to App Router -

• [Link] uses file-system routing, which means the routes in your
application are determined by how you structure your files.
INTRODUCTION TO NEXT JS VIRTUAL CODE
 App Router VIRTUAL CODE

Nested Routes-
 App Router VIRTUAL CODE

Dynamic Routes-
 App Router VIRTUAL CODE

Dynamic Route Segment-

- A Dynamic Segment can be created by wrapping a folder's
name in square brackets: [folderName]. For example, a blog
could include the following
route app/blog/[slug]/[Link] where [slug] is the Dynamic
Segment for blog posts.

- Since the params prop is a promise. You must

use async/await or React's use function to access the values.
 App Router VIRTUAL CODE

Catch-all Segments
Dynamic Segments can be extended to catch-all subsequent
segments by adding an ellipsis inside the
brackets [...folderName].
For example, app/shop/[...slug]/[Link] will
match /shop/clothes, but
also /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.
 App Router VIRTUAL CODE

Optional Catch-all Segments

Catch-all Segments can be made optional by including the
parameter in double square brackets: [[...folderName]].
For example, app/shop/[[...slug]]/[Link] will also match /shop,
in addition
to /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-
shirts.
The difference between catch-all and optional catch-
all segments is that with optional, the route without the
parameter is also matched (/shop in the example above).
 App Router VIRTUAL CODE

Optional Catch-all Segments

 App Router VIRTUAL CODE

Routes Group -
 App Router VIRTUAL CODE

Parallel Routes -
 App Router VIRTUAL CODE

Parallel Routes -
App Router VIRTUAL CODE
App Router VIRTUAL CODE
App Router VIRTUAL CODE

Note -

In next js , every page is server component so

if you want to use hooks ( useState…. etc) ,
you have to write ‘use client’ at the top of
the page.
 VIRTUAL CODE

NEXT JS
LEVEL 3
Navigation , Image & Font in Next JS
 Navigation , Image & Font in Next JS VIRTUAL CODE

Navigation in Next JS -
There are two methods of Navigation in Next JS
Navigation , Image & Font in Next JS VIRTUAL CODE
Navigation , Image & Font in Next JS VIRTUAL CODE
Navigation , Image & Font in Next JS VIRTUAL CODE
 Navigation , Image & Font in Next JS VIRTUAL CODE

Image Optimization -
Automatically resizes, compresses, and serves images in modern
formats (like WebP/AVIF) for faster loading and better performance.
 Navigation , Image & Font in Next JS VIRTUAL CODE

Font Optimization -
Reduces font file size by including only needed characters (subsets) and
preloading them for faster page rendering and minimal layout shifts.
 Practice Project 1 VIRTUAL CODE

Build a simple Travel Guide website using next JS -

 Practice Project 1 VIRTUAL CODE

Build a simple Travel Guide website using next JS -

 Practice Project 1 VIRTUAL CODE

Build a simple Travel Guide website using next JS -

 Practice Project 1 VIRTUAL CODE

Build a simple Travel Guide website using next JS -

 VIRTUAL CODE

NEXT JS
LEVEL 4
Typescript Tutorial
 Typescript Tutorial VIRTUAL CODE

What is TypeScript ?
• TypeScript is a strongly typed, object-oriented, compiled programming language
developed by Microsoft.

• It is a superset of JavaScript, meaning that all valid JavaScript code is also valid
TypeScript code.

• The primary addition TypeScript brings to JavaScript is static typing, allowing

developers to define the types of variables, function parameters, and return
values.
 Typescript Tutorial VIRTUAL CODE

Basic Types -
 Typescript Tutorial VIRTUAL CODE

Arrays & Tuples -

Typescript Tutorial VIRTUAL CODE

Functions -
 Typescript Tutorial VIRTUAL CODE

Type Declaration & Type Inference -

 Typescript Tutorial VIRTUAL CODE

Type Aliases -
 Typescript Tutorial VIRTUAL CODE

Interfaces -
 Typescript Tutorial VIRTUAL CODE

Difference b/w Type & Interface -

 Typescript Tutorial VIRTUAL CODE

Union & Intersection -

 Typescript Tutorial VIRTUAL CODE

Generics -
 Typescript Tutorial VIRTUAL CODE

Global Declaration -
Typescript Tutorial VIRTUAL CODE

React with TS -
Typescript Tutorial VIRTUAL CODE
Typescript Tutorial VIRTUAL CODE
 VIRTUAL CODE

NEXT JS
LEVEL 5
API Routes In NEXT JS
API Routes in Next JS VIRTUAL CODE
API Routes in Next JS VIRTUAL CODE
API Routes in Next JS VIRTUAL CODE
API Routes in Next JS VIRTUAL CODE
 VIRTUAL CODE

NEXT JS
LEVEL 6
Data Fetching in NEXT JS
Data Fetching in NEXT JS VIRTUAL CODE
Data Fetching in NEXT JS VIRTUAL CODE
Data Fetching in NEXT JS VIRTUAL CODE
Data Fetching in NEXT JS VIRTUAL CODE
Data Fetching in NEXT JS VIRTUAL CODE
Data Fetching in NEXT JS VIRTUAL CODE
Data Fetching in NEXT JS VIRTUAL CODE
 Practice Project 2 VIRTUAL CODE

Build a Full Stack Next JS App in which –

- Use MongoDB Atlas

- Authentication Using Next Auth

- Image Upload Using Cloudinary

 Practice Project 2 VIRTUAL CODE

MongoDB Atlas

Important Note for Creating Model-

 Practice Project 2 VIRTUAL CODE

MongoDB Atlas
 Practice Project 2 VIRTUAL CODE

MongoDB Atlas
 Practice Project 2 VIRTUAL CODE

MongoDB Atlas
 Practice Project 2 VIRTUAL CODE

MongoDB Atlas

- How to Connect MongoDb in Next JS

 Practice Project 2 VIRTUAL CODE

- How to Connect MongoDb in Next JS

 Practice Project 2 VIRTUAL CODE

- How to Connect MongoDb in Next JS

 Practice Project 2 VIRTUAL CODE

- How to Connect MongoDb in Next JS

 Practice Project 2 VIRTUAL CODE

- How to Connect MongoDb in Next JS

 Practice Project 2 VIRTUAL CODE

- How to Connect MongoDb in Next JS

 Practice Project 2 VIRTUAL CODE

Authentication Using Next Auth

 Practice Project 2 VIRTUAL CODE

Authentication Using Next Auth

 Practice Project 2 VIRTUAL CODE

Authentication Using Next Auth

 Practice Project 2 VIRTUAL CODE

Authentication Using Next Auth

 Practice Project 2 VIRTUAL CODE

Authentication Using Next Auth

 Practice Project 2 VIRTUAL CODE

What we write in authOptions ?

 Practice Project 2 VIRTUAL CODE

What we write in authOptions ?

 Practice Project 2 VIRTUAL CODE

What we write in authOptions ?

 Practice Project 2 VIRTUAL CODE

1. Providers option
 Practice Project 2 VIRTUAL CODE

1. Providers option
Practice Project 2 VIRTUAL CODE
 Practice Project 2 VIRTUAL CODE

- JWT Callback
 Practice Project 2 VIRTUAL CODE

- JWT Callback
 Practice Project 2 VIRTUAL CODE

- session Callback
Practice Project 2 VIRTUAL CODE
Practice Project 2 VIRTUAL CODE
Practice Project 2 VIRTUAL CODE
Practice Project 2 VIRTUAL CODE
 Practice Project 2 VIRTUAL CODE

summary
 Practice Project 2 VIRTUAL CODE

summary