Forem: Himanay Khajuria

🔐 Complete Guide to NextAuth in Next.js (Simple Explanation)

Himanay Khajuria — Tue, 24 Mar 2026 14:58:23 +0000

When we build a full stack app, we need a way for users to login and stay logged in.

This is called authentication.

In this blog we will understand how to use NextAuth in Next.js in a very simple way 😊

🚀 What is NextAuth

NextAuth is a library that helps us:

✔ Login users

✔ Manage sessions

✔ Protect pages

👉 Example

User enters email and password

App checks database

If correct → user is logged in ✅

📦 Step 1 Install NextAuth

Run this command:

npm install next-auth@4

🔐 Step 2 Add Secret Key

Create or open .env file

NEXTAUTH_SECRET=mySuperSecretKey123

👉 This is used to secure login sessions

🧠 Step 3 Add TypeScript Support

Create file:

next-auth.d.ts

Add:

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
    } & DefaultSession["user"];
  }
}

👉 Now we can use:

session.user.id

⚙️ Step 4 Create Auth Configuration

Create file:

lib/auth.ts

import CredentialsProvider from "next-auth/providers/credentials";
import { connectToDatabase } from "./db";
import User from "@/models/User";
import bcrypt from "bcryptjs";

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error("Missing email or passsword");
        }

        try {
          await connectToDatabase();
          const user = await User.findOne({ email: credentials.email });

          if (!user) {
            throw new Error("No user found with this");
          }

          const isValid = await bcrypt.compare(
            credentials.password,
            user.password
          );

          if (!isValid) {
            throw new Error("invalid password");
          }

          return {
            id: user._id.toString(),
            email: user.email,
          };
        } catch (error) {
          console.error("Auth error: ", error);
          throw error;
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }: { token: any; user?: any }) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }: { session: any; token: any }) {
      if (session.user) {
        session.user.id = token.id as string;
      }
      return session;
    },
  },
  pages: {
    signIn: "/login",
    error: "/login",
  },
  session: {
    strategy: "jwt" as const,
    maxAge: 30 * 24 * 60 * 60,
  },
  secret: process.env.NEXTAUTH_SECRET,
};

This file contains all login logic.

🔑 Step 5 Credentials Provider

CredentialsProvider({
  name: "Credentials",

👉 This tells NextAuth:

💬 “I will login users using email and password”

🔍 Step 6 Authorize Function (Main Logic)

async authorize(credentials)

👉 This runs when user tries to login

🧪 Example Input

{
 "email": "test@gmail.com",
 "password": "123456"
}

🧠 What happens inside authorize

1️⃣ Check input

if (!credentials?.email || !credentials?.password)

👉 If missing → error

2️⃣ Connect database

await connectToDatabase();

👉 Connects to MongoDB

3️⃣ Find user

const user = await User.findOne({ email: credentials.email });

👉 Check if user exists

4️⃣ If user not found

throw new Error("No user found")

5️⃣ Compare password

bcrypt.compare(credentials.password, user.password)

👉 Checks password safely 🔒

6️⃣ If correct

return {
  id: user._id.toString(),
  email: user.email,
};

👉 Login success 🎉

🔄 Step 7 JWT Callback

async jwt({ token, user })

👉 Runs after login

token.id = user.id;

👉 Saves user id in token

👤 Step 8 Session Callback

async session({ session, token })

session.user.id = token.id;

👉 Now you can access:

session.user.id

📄 Step 9 Custom Pages

pages: {
  signIn: "/login",
  error: "/login",
}

👉 Redirects user to login page

⏳ Step 10 Session Setup

session: {
  strategy: "jwt",
  maxAge: 30 * 24 * 60 * 60,
}

👉 User stays logged in for 30 days

🔌 Step 11 Create API Route

Path:

app/api/auth/[...nextauth]/route.ts

Code:

import { authOptions } from "@/lib/auth";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

👉 This handles all auth requests

🛡 Step 12 Middleware (Protect Routes)

Create file:

middleware.ts

import withAuth from "next-auth/middleware";
import { NextResponse } from "next/server";

export default withAuth(
    function middleware(){
        return NextResponse.next()
    },
    {
        callbacks: {
            authorized: ({token, req}) => {
                const {pathname} = req.nextUrl;

                // allow auth related routes
                if(
                    pathname.startsWith("/api/auth") ||
                    pathname === "/login" ||
                    pathname === "/register"
                ) {
                    return true
                }

                //public routes
                if(pathname === "/" || pathname.startsWith("/api/videos")){
                    return true
                }

                return !!token
            }
        }
    }
)

export const config = {
    matcher: ["/((?!_next/static|_next/image|favicon.ico|public/).*)"],
};

🧠 What middleware does

👉 Runs on every request

👉 Checks if user is logged in

✅ Allow public routes

if (
  pathname.startsWith("/api/auth") ||
  pathname === "/login" ||
  pathname === "/register"
)

👉 These routes are open

🌍 Public pages

if (pathname === "/" || pathname.startsWith("/api/videos"))

👉 Anyone can access

🔒 Protect other routes

return !!token

👉 Only logged in users allowed

🧪 Example Flow

👉 User opens:

/dashboard

✔ If logged in → access

❌ If not → redirect to login

⚙️ Matcher Config

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|public/).*)"],
};

👉 Middleware runs on all important routes

🎯 Final Flow (Easy Understanding)

👉 User enters email and password

➡️ authorize() runs

➡️ database check

➡️ password match

➡️ token created

➡️ session created

➡️ user logged in

📦 Example Stored User

{
 "email": "test@gmail.com",
 "password": "$2a$10$hashedpassword"
}

🎉 Final Summary

In this setup we learned:

✔ How login works

✔ How NextAuth handles authentication

✔ How to connect database

✔ How to protect routes

✔ How to manage session

🚀 Final Thought

NextAuth makes authentication simple.

Instead of building everything from scratch, you can:

👉 focus on logic

👉 keep your app secure

👉 build faster

Happy coding 💻✨

Register a User and Test API using Postman in Next.js with MongoDB

Himanay Khajuria — Thu, 12 Mar 2026 13:32:13 +0000

When building a full stack application, one common feature is user registration.

This means allowing users to create an account using email and password.

In this blog we will understand how to:

✔ Create a register API in Next.js

✔ Connect the API with MongoDB database

✔ Save a user in the database

✔ Test the API using Postman

This example uses Next.js App Router, MongoDB and Mongoose.

📁 Project API Structure

In a Next.js App Router project the API route can look like this:

app
 └ api
   └ auth
     └ register
       └ route.ts

This creates the API endpoint:

http://localhost:3000/api/auth/register

⚙️ Register API Code

Below is the API used to register a user.

import { NextRequest, NextResponse } from "next/server";
import { connectToDatabase } from "@/lib/db";
import User from "@/models/User";

export async function POST(request: NextRequest) {
  try {
    const { email, password } = await request.json();

    if (!email || !password) {
      return NextResponse.json(
        { error: "Email and password are required" },
        { status: 400 },
      );
    }

    await connectToDatabase();

    const existingUser = await User.findOne({ email });

    if (existingUser) {
      return NextResponse.json(
        { error: "Email is already registered" },
        { status: 400 },
      );
    }

    await User.create({
      email,
      password,
    });

    return NextResponse.json(
      { message: "User registered successfully" },
      { status: 201 },
    );
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to register User" },
      { status: 500 },
    );
  }
}

🧠 Understanding the Code Step by Step

1️⃣ Import Required Modules

import { NextRequest, NextResponse } from "next/server";
import { connectToDatabase } from "@/lib/db";
import User from "@/models/User";

These imports help us:

• handle HTTP requests

• connect to MongoDB

• access the User model

2️⃣ Create POST API Function

export async function POST(request: NextRequest)

This means the API will run when we send a POST request.

Example API URL

/api/auth/register

3️⃣ Read Data from Request

const { email, password } = await request.json();

This reads data sent from the client.

Example request body

{
 "email": "user@gmail.com",
 "password": "123456"
}

4️⃣ Validate Input Data

if (!email || !password)

If the user does not send email or password the API returns an error.

Example response

{
 "error": "Email and password are required"
}

Status code

400 Bad Request

5️⃣ Connect to MongoDB

await connectToDatabase();

This connects the application to the MongoDB database.

The connection uses the MongoDB Atlas connection string stored in:

.env.local

Example

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/reels-pro

6️⃣ Check if User Already Exists

const existingUser = await User.findOne({ email });

This checks if the email already exists in the database.

Example stored user

{
 email: "user@gmail.com",
 password: "hashedpassword"
}

If the email already exists the API returns an error.

Example response

{
 "error": "Email is already registered"
}

7️⃣ Create New User

If the user does not exist the API creates a new user.

await User.create({
 email,
 password,
});

The password is stored as a hashed password using bcrypt in the User model.

Example saved user in MongoDB

{
 _id: ObjectId("..."),
 email: "user@gmail.com",
 password: "$2a$10$FJH78S...",
 createdAt: "2025",
 updatedAt: "2025"
}

8️⃣ Send Success Response

return NextResponse.json(
 { message: "User registered successfully" },
 { status: 201 }
);

Status 201 means

Created successfully

🗄 MongoDB Atlas Setup

Before the API works you must connect your project to MongoDB Atlas.

Steps include

✔ create a cluster

✔ create a database user

✔ whitelist your IP address

✔ copy MongoDB connection string

Example connection string

mongodb+srv://username:password@cluster.mongodb.net/reels-pro

This connection string is stored inside

.env.local

📬 Testing the API with Postman

After creating the API we test it using Postman.

Open Postman and create a request.

Request Method

POST

API URL

http://localhost:3000/api/auth/register

Request Body

Select:

Body → raw → JSON

Example request

{
 "email": "test@gmail.com",
 "password": "123456"
}

Click Send.

✅ Successful Response

If everything works correctly Postman returns

{
 "message": "User registered successfully"
}

Status code

201 Created

📊 Check User in MongoDB Atlas

You can verify the saved user in MongoDB Atlas.

Steps

Open MongoDB Atlas dashboard
Click your cluster
Click Browse Collections
Open your database
Open the users collection

You will see a document like

{
 email: "test@gmail.com",
 password: "$2a$10$...",
 createdAt: "...",
 updatedAt: "..."
}

This means the API worked correctly.

🎯 Summary

In this project we learned how to:

✔ Create a register API in Next.js

✔ Connect the application to MongoDB Atlas

✔ Save user data in the database

✔ Test the API using Postman

This is an important step when building authentication systems in full stack applications.

✨ Building APIs and testing them with tools like Postman helps developers understand how the frontend, backend and database work together.

Happy coding 💻🚀

📦 Designing Models in Next.js using Mongoose

Himanay Khajuria — Mon, 09 Mar 2026 22:51:46 +0000

When we build a full stack Next.js application, we usually store data in a database.

But before saving data we must define how the data should look.

This structure is called a Model.

In this blog we will understand:

✔ What a model is

✔ Why models are important

✔ How to create models in Next.js using Mongoose

✔ Example models for User and Video

🧠 What is a Model

A model defines the structure of data stored in the database.

Think of it like a blueprint of data.

For example if we store users in a database we may want data like:

{
  email: "user@email.com",
  password: "123456"
}

Instead of storing random data we define rules like:

email must be required
password must be required
email must be unique

This is what a model does.

⚙️ Installing bcrypt for Password Security

When storing passwords we should never store plain text passwords.

We use bcrypt to convert the password into a hashed password.

Install the packages

npm i bcryptjs
npm i --save-dev @types/bcryptjs

✔ bcryptjs helps hash passwords

✔ @types/bcryptjs provides TypeScript support

👤 User Model in Next.js

Let us look at a simple User model.

import mongoose, { model, models, Schema } from "mongoose";
import bcrypt from "bcryptjs";

export interface IUser {
    email: string;
    password: string;
    _id?: mongoose.Types.ObjectId;
    createdAt?: Date;
    updatedAt?: Date
}

const userSchema = new Schema<IUser>(
    {
        email: {type: String, required: true, unique: true},
        password: {type: String, required: true},
    },
    {timestamps: true}
);

userSchema.pre("save", async function () {
    if (this.isModified("password")) {
        this.password = await bcrypt.hash(this.password, 10);
    }
});

const User = models?.User || model<IUser>("User", userSchema);

export default User;

🔍 Understanding the User Model

1️⃣ Import Required Packages

import mongoose, { model, models, Schema } from "mongoose";
import bcrypt from "bcryptjs";

Here we import

mongoose to create the schema
bcrypt to hash the password

2️⃣ Define User Interface

export interface IUser {
    email: string;
    password: string;
    _id?: mongoose.Types.ObjectId;
    createdAt?: Date;
    updatedAt?: Date
}

This is a TypeScript interface.

It defines the shape of user data.

Example user document

{
 email: "user@email.com",
 password: "hashedpassword"
}

_id, createdAt, updatedAt are optional.

3️⃣ Create User Schema

const userSchema = new Schema<IUser>(
{
 email: {type: String, required: true, unique: true},
 password: {type: String, required: true},
},
{timestamps: true}
);

This schema defines rules for the database.

Rules here

email
- must be a string
- must be unique
- required field
password
- must be a string
- required field

timestamps: true automatically adds

createdAt
updatedAt

🔐 Hash Password Before Saving

userSchema.pre("save", async function () {
 if (this.isModified("password")) {
   this.password = await bcrypt.hash(this.password, 10);
 }
});

This is called a Mongoose middleware.

Before saving the user

✔ it checks if the password changed

✔ then hashes the password

Example

Plain password

mypassword123

Stored password

$2a$10$KJH8H2JSJSHHJSJHJ

This makes the application secure.

4️⃣ Create the Model

const User = models?.User || model<IUser>("User", userSchema);

This line prevents model duplication in Next.js development.

Next.js reloads many times so we check

✔ if model already exists

✔ otherwise create a new one

🎬 Video Model Example

Now let us see another model for storing videos.

import mongoose, { model, models, Schema } from "mongoose";

export const VIDEO_DIMENSIONS = {
    width: 1080,
    height: 1920,
} as const

export interface IVideo {
  _id?: mongoose.Types.ObjectId;
  createdAt?: Date;
  updatedAt?: Date
  title: string;
  description: string;
  videoUrl: string;
  thumbnailUrl: string;
  controls?: boolean;
  transformation?: {
    height: number;
    width: number;
    quality?: number;
  };
}

const videoSchema = new Schema<IVideo>(
{
 title: { type: String, required: true },
 description: { type: String, required: true },
 videoUrl: { type: String, required: true },
 thumbnailUrl: { type: String, required: true },
 controls: { type: Boolean, default: true },
 transformation: {
   height: { type: Number, default: VIDEO_DIMENSIONS.height },
   width: { type: Number, default: VIDEO_DIMENSIONS.width },
   quality: { type: Number, min: 1, max: 100 },
 },
},
{ timestamps: true },
);

const Video = models?.Video || model<IVideo>("Video", videoSchema);

export default Video;

🔍 Understanding the Video Model

📹 Video Information

The video model stores data like

title
description
video URL
thumbnail URL

Example document

{
 title: "Nextjs Tutorial",
 description: "Learn Nextjs basics",
 videoUrl: "https://example.com/video.mp4",
 thumbnailUrl: "https://example.com/thumb.jpg"
}

🎛 Video Controls

controls: { type: Boolean, default: true }

This controls the video player controls.

Example

true → play pause controls visible
false → controls hidden

📐 Video Transformation

transformation: {
 height: { type: Number, default: VIDEO_DIMENSIONS.height },
 width: { type: Number, default: VIDEO_DIMENSIONS.width },
 quality: { type: Number, min: 1, max: 100 },
}

This object controls

video width
video height
video quality

Example

transformation: {
 width: 1080,
 height: 1920,
 quality: 80
}

🧩 Why Models are Important

Models help us

✔ keep data structured

✔ validate data before saving

✔ prevent invalid data

✔ make database queries easier

Without models a database can become messy and difficult to manage.

📁 Typical Folder Structure

Many Next.js projects keep models like this

/models
   User.ts
   Video.ts
/lib
   db.ts

This keeps the project clean and organized.

📚 Summary

In this blog we learned

✔ what a model is

✔ how to design models using Mongoose

✔ how to create a User model

✔ how to secure passwords using bcrypt

✔ how to create a Video model

Designing good models is an important step when building full stack applications with Next.js and MongoDB.

Happy Coding 👩🏻‍💻
Keep building and keep learning.....

Database Connection in Next.js using Mongoose 📓⚡

Himanay Khajuria — Fri, 06 Mar 2026 12:55:23 +0000

When we build a web application, we usually need a place to store data. This data can be users, blog posts, images or comments. For this we use a database.

In many Next.js projects, developers use MongoDB as the database and Mongoose as the tool to connect with it.

In this blog we will learn how to create a database connection in Next.js using a simple example.

🍃 What is MongoDB

MongoDB is a NoSQL database. It stores data in a flexible format called documents.

These documents look very similar to JavaScript objects, which makes it easy to work with JavaScript frameworks like Next.js.

✨ Example

{
  name: "Himanay",
  role: "Frontend Developer",
  country: "Sweden"
}

Because the structure looks like a JavaScript object, developers can easily read, update and manage data.

🧠 What is Mongoose

Mongoose is a library that helps Node.js connect with MongoDB. It also helps manage database data easily.

👉 Mongoose helps us to

Connect to the database
Create models
Read data
Write data
Update and delete data

📦 Install Mongoose

Run this command in your project

npm install mongoose

📁 Step 1 Create Database Connection File

In a Next.js project, we usually create a file called db.ts.

This file handles the database connection so it can be reused in different parts of the application.

📌 Example `db.ts`

import mongoose from "mongoose";

const MONGODB_URI = process.env.MONGODB_URI!;

if (!MONGODB_URI) {
    throw new Error("Please define mongodb uri in env file");
}

let cached = global.mongoose;

if(!cached){
    cached = global.mongoose = {conn: null, promise: null};
}

export async function connectToDatabase(){
    if(cached.conn){
        return cached.conn;
    }

    if (!cached.promise) {
      const opts = {
        bufferCommands: true,
        maxPoolSize: 10,
      };

      cached.promise = mongoose
        .connect(MONGODB_URI, opts)
        .then(() => mongoose.connection);
    }

    try {
        cached.conn = await cached.promise;
    } catch (error) {
        cached.promise = null;
        throw error;
    }

    return cached.conn;
}

📋 Understanding the Code Step by Step

1️⃣ Import Mongoose

First we import mongoose so we can connect to MongoDB.

import mongoose from "mongoose";

2️⃣ Read the MongoDB Connection URL

Next we read the MongoDB URI from environment variables.

const MONGODB_URI = process.env.MONGODB_URI!;

📄 Example `.env.local`

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/blogdb

✔ This keeps database credentials secure.

3️⃣ Check if the URI exists

If the MongoDB URI is missing the application will throw an error.

if (!MONGODB_URI) {
    throw new Error("Please define mongodb uri in env file");
}

This prevents the app from running with a missing database configuration.

4️⃣ Create a Cached Connection

Next we create a cached connection.

This is important because Next.js reloads the server many times during development.

let cached = global.mongoose;

If the connection does not exist we initialize it.

if(!cached){
    cached = global.mongoose = {conn: null, promise: null};
}

📦 This object stores

conn → active database connection
promise → pending database connection

This helps reuse the connection instead of creating new ones repeatedly.

5️⃣ Create the Database Connection

Now we create the actual connection.

cached.promise = mongoose
  .connect(MONGODB_URI, opts)
  .then(() => mongoose.connection);

⚙️ Options used

bufferCommands: true
- queues commands before the connection is ready
maxPoolSize: 10
- limits the number of database connections

6️⃣ Save the Connection

Once the connection is ready we store it.

cached.conn = await cached.promise;

Now the application will reuse the same connection instead of creating a new one.

7️⃣ Return the Database Connection

Finally the function returns the connection.

return cached.conn;

This allows other parts of the application to use the database.

🧩 TypeScript Global Types File

Next we create a file called types.d.ts.

This helps TypeScript understand the global mongoose variable.

Example

import { Connection } from "mongoose"

declare global {
    var mongoose: {
        conn: Connection | null
        promise: Promise<Connection> | null
    }
}

export {};

✔ This prevents TypeScript errors and defines the structure of the cached object.

🔌 How to Use the Connection

Now we can use the connection anywhere in the project.

Example in an API route

import { connectToDatabase } from "@/lib/db";

export async function GET() {

  await connectToDatabase();

  return Response.json({
    message: "Database connected successfully"
  });

}

When the API runs

Connect to MongoDB
Reuse existing connection if available
Return the API response

📝 Example in a Blog Project

Imagine we are building a blog platform.

A blog document in MongoDB may look like this

{
  title: "Learning Next.js",
  content: "Database connection in Nextjs blog",
  author: "Himanay"
}

Using the database connection, we can

✔ Save blog posts
✔ Fetch blog posts
✔ Update blog posts
✔ Delete blog posts

⚡ Why Connection Caching is Important

❌ Without caching

Many database connections open
Database becomes slow
Server may crash

✅ With caching

One connection reused
Faster API requests
Better performance

📚 Summary

In this blog we learned

What MongoDB is
What Mongoose does
How to create a database connection in Next.js
Why caching connections is important
How TypeScript global types help

This setup is commonly used in modern Next.js full stack projects.

The database can store

👤 Users
📝 Blog posts
🖼 Image metadata

🚀 Final Thought

Learning how to create a database connection is one of the first steps in building a full stack Next.js application.

Once the connection works correctly you can start building authentication, blog systems, dashboards and APIs.

Keep learning and keep building projects 💻

📦What is Redux?

Himanay Khajuria — Thu, 12 Feb 2026 23:05:14 +0000

If you are learning frontend development, especially with React, you may hear about Redux. At first, it sounds confusing. But don’t worry 😊 I will explain it in very simple words.

🤔 Why Do We Need Redux?

Imagine you are building a React app.

You have:

A Login component 🔐
A Profile component 👤
A Cart component 🛒
A Navbar component 📌

Now suppose the user logs in. Many components need to know:

Is the user logged in?
What is the user name?
What is inside the cart?

If we pass data from one component to another again and again, it becomes messy 😵

This is called prop drilling.

So we need one central place to store all important data.

That is where Redux comes in 🏪

🏪 What is Redux?

Redux is a state management library.

In simple words:

👉 Redux helps us store and manage data for the whole application in one place.

Think of Redux like a big storage box 📦

All components can take data from it and also update it.

🧠 Important Concepts in Redux

There are 3 main parts you need to understand:

Store 🏬
Action 📢
Reducer 🔁

Let’s understand each one with a simple example.

🏬 1. Store (The Big Storage)

The store is where all the data lives.

Example state:

    {
      count: 0
    }

This is called state.

Think of store like:

A warehouse 📦
A bank locker 🏦
A memory box 🧠

All data is saved here.

📢 2. Action (What You Want To Do)

An action tells Redux:

👉 "Hey, I want to change something!"

Example action:

    {
      type: "INCREMENT"
    }

This means:
Increase the count value.

Actions are simple JavaScript objects.

You can imagine action like:

Placing an order in restaurant 🍽️
Clicking a button 🖱️
Sending a message 💬

🔁 3. Reducer (The Decision Maker)

Reducer decides:

👉 How the state should change.

Example reducer:

    function counterReducer(state = { count: 0 }, action) {
      if (action.type === "INCREMENT") {
        return { count: state.count + 1 }
      }
      return state
    }

So:

Action says: "Increase"
Reducer says: "Okay, I will add 1"
Store updates the value

Reducer is like:

A chef 👨‍🍳 who prepares food based on order
A machine ⚙️ that processes input and gives output

🔄 How Redux Works (Step by Step)

Let’s say you click a button to increase count:

1️⃣ You click button 🖱️

2️⃣ Action is sent 📢

3️⃣ Reducer receives action 🔁

4️⃣ Store updates data 🏬

5️⃣ UI updates automatically 🎉

This flow is always in one direction.

This is called one way data flow.

🛒 Real Life Example (Shopping Cart)

Imagine you add product to cart:

You click "Add to Cart" 🛍️
Action: { type: "ADD_ITEM" } 📢
Reducer adds item to cart 🔁
Store updates cart 🏬
Cart icon shows new number 🔢

Simple and clean 😄

💡 Why Redux is Useful?

Redux helps:

✅ Manage large application state

✅ Avoid prop drilling

✅ Keep data predictable

✅ Debug easily

✅ Maintain clean structure

It is very helpful in big projects where many components share data.

⚠️ Is Redux Always Needed?

No ❌

For small apps:
React useState or useContext is enough 👍

Redux is useful when:

App is big
Many components share same data
State logic becomes complex

🆕 What is Redux Toolkit?

Today we mostly use Redux Toolkit.

It makes Redux:

Easier 😊
Cleaner ✨
Less code 🧹

Redux Toolkit is the modern way to use Redux.

🎯 Final Thoughts

Redux is just a tool to manage data in one place.

Remember this simple idea:

🧠 Store = Data

📢 Action = What to do

🔁 Reducer = How to change

🏬 Redux = Central manager

At first it may look difficult. But once you practice with small examples like counter app 🧮 or todo app 📝, you will understand it better.

Keep building projects for learning 💻

That is the best way to master Redux 🚀

🌐Server Side Rendering and Client Side Rendering in Next.js

Himanay Khajuria — Fri, 14 Nov 2025 13:18:13 +0000

✨ Introduction

Next.js gives you power to use Server Side Rendering (SSR) and Client Side Rendering (CSR) in the same project.

SSR gives fast ready pages. CSR gives interactive UI.

This blog explains both in a simple project using TypeScript.

🖥️ What is SSR

SSR means the server prepares HTML before sending the page.

This gives

⚡ Fast first load
🔍 Better SEO
📄 Ready content on first paint

Use SSR for content like posts products or anything you want visible right away.

🧩 What is CSR

CSR means the browser updates parts of the page after load.

Use CSR for

🎛️ Buttons
🧮 Counters
✏️ Forms
🔄 Updating UI in real time

🏗️ How Next.js decides

All components in App Router are server components by default
Add use client at the top to make it a client component
Client components can use hooks like useState
Server components cannot use hooks
Client components cannot import server components
Use use server for server only logic like database work

🤝 When to use what

Situation	Use
SEO and ready content	SSR
Interactive UI	CSR
Secrets or DB	Server code
Static pages	SSG

🛠️ Small Next.js Project Example

We build one page

Server component fetches posts
Client component shows a counter

📂 Folder structure

my-next-app/
  app/
    page.tsx
    components/
      PostsList.tsx
      Counter.tsx
    actions.ts
  package.json
  tsconfig.json

📄 1. Server Component Page

File: app/page.tsx

import PostsList from './components/PostsList'
import Counter from './components/Counter'

export default async function Page() {
  return (
    <main>
      <h1>Server and Client Rendering Demo</h1>
      <PostsList />
      <hr />
      <Counter />
    </main>
  )
}

💡 Explanation

This file is a Server Component
It loads data on the server
It imports a client component and renders both together
HTML for posts is ready before load

📄 2. Server Component for SSR

File: app/components/PostsList.tsx

async function fetchPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  return res.json()
}

export default async function PostsList() {
  const posts = await fetchPosts()

  return (
    <ul>
      {posts.slice(0, 5).map(post => (
        <li key={post.id}>
          <strong>{post.title}</strong>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  )
}

💡 Explanation

No use client means it is server only
Data is fetched directly on the server
Fast and SEO friendly
The browser receives the ready HTML

📄 3. Client Component for CSR

File: app/components/Counter.tsx

'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Add</button>
    </div>
  )
}

💡 Explanation

use client tells Next.js this runs in the browser
It uses useState so it must run on the client
The UI updates without page reload

📄 4. Server Only Logic

File: app/actions.ts

'use server'

export async function addPost(data: { title: string; body: string }) {
  // safe server side logic
  return { ok: true }
}

💡 Explanation

Code stays on the server
Good for DB or secret work
Never sent to the browser

📄 5. Pages Router SSR Example (optional)

File: pages/index.tsx

import type { GetServerSideProps } from 'next'
import { useState } from 'react'

export default function Home({ posts }) {
  const [count, setCount] = useState(0)

  return (
    <main>
      <h1>SSR with Pages Router</h1>
      <ul>
        {posts.map(p => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
      <p>Local count {count}</p>
      <button onClick={() => setCount(v => v + 1)}>Add</button>
    </main>
  )
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()
  return { props: { posts: posts.slice(0, 5) } }
}

💡 Explanation

getServerSideProps runs on every request
Server returns the posts as props
UI state still works with client hooks

🧭 How to separate code correctly

✔ Server code

Use for API calls
Use for DB logic
No hooks
Can fetch data safely

✔ Client code

For UI events
For interactive features
Needs use client

✔ Import rules

Server can import client
Client cannot import server

📝 Checklist

Need SEO? ⭐ Server
Need state or events? ⭐ Client
Using secrets? ⭐ Server
Want fast UI updates? ⭐ Client

🚶 Step by step workflow

Create a Next.js app
Build server component for data
Build client component for UI
Combine them inside page
Test SSR by turning off JS
Test CSR by clicking the counter
Improve step by step

❓ FAQ

Q. Can server components use hooks?

No

Q. Can client components fetch data?

Yes

Q. Does server code ship to browser?

No

🎉 Final Thoughts

Next.js makes it simple to mix SSR and CSR in one project
Use SSR for speed and SEO
Use CSR for interaction
Keep your code clean and split server and client logic
You will build faster and better apps this way

What is NextAuth?

Himanay Khajuria — Thu, 30 Oct 2025 11:53:02 +0000

What is NextAuth and how to use it with Next.js and TypeScript

This beginner friendly guide explains what NextAuth is and shows how to set it up step-by-step in a Next.js + TypeScript project.

We will create a simple app that lets users sign in and sign out using GitHub OAuth.

1. What is NextAuth?

NextAuth.js is an authentication library made for Next.js.

It helps you add login systems easily without writing complex backend logic.

✅ Supports many providers: GitHub, Google, Facebook, etc.

✅ Handles sessions automatically

✅ Works with or without a database

✅ Easy to protect pages and APIs

2. Project overview

We will create a simple project with:

A home page (/)
A protected page (/protected)
GitHub login using NextAuth
Navbar with sign in / sign out buttons

Folder structure:

my-nextauth-app/
├─ .env.local
├─ next.config.js
├─ package.json
├─ tsconfig.json
├─ pages/
│  ├─ api/
│  │  └─ auth/
│  │     └─ [...nextauth].ts
│  ├─ _app.tsx
│  ├─ index.tsx
│  └─ protected.tsx
└─ components/
   └─ Navbar.tsx

3. Create a Next.js TypeScript project

Open your terminal and run:

npx create-next-app@latest my-nextauth-app --typescript
cd my-nextauth-app

4. Install NextAuth

Run this command:

npm install next-auth

5. Setup environment variables

Create a file .env.local in your project root and add:

GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_random_secret_key

You can get GITHUB_ID and GITHUB_SECRET by creating an OAuth App on GitHub:

Go to GitHub → Settings → Developer Settings → OAuth Apps
Create a new app
Set the Authorization callback URL to http://localhost:3000/api/auth/callback/github

6. Add NextAuth API route

Now, create a new file pages/api/auth/[...nextauth].ts and add this code:

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import type { NextAuthOptions } from "next-auth";

export const authOptions: NextAuthOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID || "",
      clientSecret: process.env.GITHUB_SECRET || "",
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, account, profile }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      if (profile) {
        token.login = (profile as any).login; // Add GitHub username
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken as string;
      (session.user as any).login = token.login;
      return session;
    },
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

7. Wrap the app with SessionProvider

In pages/_app.tsx, wrap your app with SessionProvider so that session data is available everywhere:

import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

8. Create Navbar component

Create a new file components/Navbar.tsx:

import { useSession, signIn, signOut } from "next-auth/react";

export default function Navbar() {
  const { data: session, status } = useSession();

  return (
    <nav
      style={{
        padding: "12px",
        borderBottom: "1px solid #ddd",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <span style={{ fontWeight: "bold" }}>My App</span>

      {status === "loading" ? (
        <span>Loading...</span>
      ) : session ? (
        <div>
          <span style={{ marginRight: 12 }}>
            Signed in as {session.user?.name || (session.user as any).login}
          </span>
          <button onClick={() => signOut()}>Sign out</button>
        </div>
      ) : (
        <button onClick={() => signIn("github")}>Sign in with GitHub</button>
      )}
    </nav>
  );
}

9. Create Home page

Open pages/index.tsx and add this:

import Navbar from "../components/Navbar";
import Link from "next/link";
import { useSession } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();

  return (
    <div>
      <Navbar />
      <main style={{ padding: "16px" }}>
        <h1>Welcome to NextAuth Example</h1>
        {session ? (
          <>
            <p>Hello {session.user?.name || (session.user as any).login} 👋</p>
            <p>
              Go to your <Link href="/protected">Protected Page</Link>
            </p>
          </>
        ) : (
          <>
            <p>You are not signed in yet.</p>
            <p>Click “Sign in with GitHub” to continue.</p>
          </>
        )}
      </main>
    </div>
  );
}

10. Create Protected page (client-side)

Create pages/protected.tsx:

import Navbar from "../components/Navbar";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Protected() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/");
    }
  }, [status, router]);

  if (status === "loading") {
    return (
      <>
        <Navbar />
        <main style={{ padding: "16px" }}>Loading...</main>
      </>
    );
  }

  return (
    <>
      <Navbar />
      <main style={{ padding: "16px" }}>
        <h1>Protected Page</h1>
        <p>This page is only for signed-in users.</p>
        <p>Welcome {session?.user?.name || (session?.user as any).login}</p>
      </main>
    </>
  );
}

11. Create Server-side Protected page (optional)

If you want to protect a page on the server side, create pages/ssr-protected.tsx:

import Navbar from "../components/Navbar";
import { getSession } from "next-auth/react";
import type { GetServerSideProps } from "next";

export default function SSRProtected({ session }: any) {
  return (
    <>
      <Navbar />
      <main style={{ padding: "16px" }}>
        <h1>Server Side Protected Page</h1>
        <p>Hello {session.user?.name || session.user?.login}</p>
      </main>
    </>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: { session },
  };
};

12. How the authentication flow works

The user clicks Sign in with GitHub.
NextAuth redirects the user to GitHub OAuth.
GitHub asks the user to authorize your app.
GitHub sends the user back to your app with a token.
NextAuth creates a session for the user.
You can access user data using useSession() anywhere.

13. Common issues and fixes

❌ GitHub login fails

✅ Check your GITHUB_ID, GITHUB_SECRET, and callback URL.

❌ NEXTAUTH_SECRET missing

✅ Add NEXTAUTH_SECRET to your .env.local file.

❌ Callback URL mismatch

✅ Make sure the callback URL in GitHub matches

http://localhost:3000/api/auth/callback/github.

14. Summary

NextAuth makes authentication easy in Next.js.
Supports multiple providers like GitHub, Google, etc.
Works both with and without databases.
Simple hooks: useSession, signIn, signOut.
Pages can be protected on the client or server side.

15. Quick setup steps

npx create-next-app@latest my-nextauth-app --typescript
npm install next-auth
Add .env.local with GitHub credentials
Create pages/api/auth/[...nextauth].ts
Wrap your app with SessionProvider
Use signIn and signOut in your Navbar
Protect pages with useSession or getSession

🎉 You did it!

You now have a working Next.js + NextAuth + TypeScript project.

You can extend it by:

Adding Google login
Using Prisma or MongoDB for database sessions
Building a custom sign-in page
Managing user roles and permissions

🌟 Using Yup with Formik in Next.js 💡

Himanay Khajuria — Thu, 16 Oct 2025 10:37:50 +0000

Hello developers! 👋

In this post, you’ll learn how to validate forms in a Next.js project using Formik + Yup. This is a simple step-by-step guide specially written for beginners. Let’s go 🚀

💡 What are Formik and Yup?

👉 Formik → A small library that helps you manage form state, handle submission, and show errors easily in React and Next.js.

👉 Yup → A schema validation library used to check if the data entered by users is valid (like checking email format or if a field is empty).

💬 In simple words:

Formik handles the form → Yup checks if the values are correct.

Together they make form validation easy, fast, and clean. ✨

💭 Why use Formik + Yup?

Without Validation	With Formik + Yup
You write a lot of manual code for handling inputs and errors	Formik handles form values and errors automatically
Each field needs `if` checks for validation	Yup schema defines all rules in one clean place
Hard to maintain large forms	Validation logic stays simple and reusable

💻 Example → Login Form in Next.js

Here’s a simple login form that uses Formik and Yup.

You can paste this directly inside your Next.js app in pages/login.js or app/login/page.jsx.

"use client";
import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";

export default function LoginPage() {
  // ✅ Step 1: Create validation rules with Yup
  const validationSchema = Yup.object({
    email: Yup.string()
      .trim("Email cannot have spaces at start or end")
      .email("Invalid email format")
      .required("Email is required")
      .matches(
        /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/,
        "Please enter a valid email like demo@domain.com"
      ),
    password: Yup.string()
      .min(5, "Password must be at least 5 characters"),
      .required("Password is required"),
  });

  // ✅ Step 2: Use Formik hook
  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema,
    onSubmit: (values) => {
      console.log("Login credentials:", values);
      alert("Login successful 🎉");
    },
  });

  return (
    <div style={{ maxWidth: 400, margin: "50px auto", fontFamily: "Arial, sans-serif" }}>
      <h1 style={{ textAlign: "center" }}>🔐 Login</h1>

      <form onSubmit={formik.handleSubmit} noValidate>
        {/* Email Field */}
        <div style={{ marginBottom: 16 }}>
          <label htmlFor="email">Email:</label>
          <input
            id="email"
            name="email"
            type="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.email}
            style={{
              width: "100%",
              padding: "8px",
              marginTop: "4px",
              border: "1px solid #ccc",
              borderRadius: "5px",
            }}
            placeholder="Enter your email"
          />
          {formik.touched.email && formik.errors.email && (
            <div style={{ color: "red", fontSize: "13px" }}>
              {formik.errors.email}
            </div>
          )}
        </div>

        {/* Password Field */}
        <div style={{ marginBottom: 16 }}>
          <label htmlFor="password">Password:</label>
          <input
            id="password"
            name="password"
            type="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.password}
            style={{
              width: "100%",
              padding: "8px",
              marginTop: "4px",
              border: "1px solid #ccc",
              borderRadius: "5px",
            }}
            placeholder="Enter your password"
          />
          {formik.touched.password && formik.errors.password && (
            <div style={{ color: "red", fontSize: "13px" }}>
              {formik.errors.password}
            </div>
          )}
        </div>

        <button
          type="submit"
          disabled={formik.isSubmitting}
          style={{
            width: "100%",
            backgroundColor: "#0F13B9",
            color: "#fff",
            padding: "10px",
            border: "none",
            borderRadius: "5px",
            cursor: "pointer",
          }}
        >
          {formik.isSubmitting ? "Signing in..." : "Sign In"}
        </button>
      </form>
    </div>
  );
}

🧠 How it works (Step-by-Step)

1️⃣ Import needed packages → useFormik and Yup.

2️⃣ Create a Yup validation schema → defines email and password rules.

3️⃣ Initialize Formik with initial values and the schema.

4️⃣ Add form fields and connect them with Formik’s handlers.

5️⃣ Display validation errors using formik.touched and formik.errors.

6️⃣ On submit → if inputs pass validation → run your logic (like login API).

💡 Tip: Formik + Yup saves you from writing long if-else validation checks!

💬 Some Tips for Beginners

✅ Keep one Yup schema per form → easier to manage.

✅ Use onBlur → shows errors when the user leaves a field.

✅ Show clear and friendly error messages.

✅ Use formik.isSubmitting to disable the button while submitting.

✅ Try adding custom rules in Yup for stronger validation.

✨ Conclusion

Using Formik with Yup in your Next.js project is a smart way to build forms that are clean, easy to maintain and beginner-friendly.

It reduces boilerplate, handles validation smoothly and gives you full control 💻

Keep building, keep experimenting and enjoy coding! 🚀

📦 Understanding Props in React (Beginner-Friendly Guide)

Himanay Khajuria — Wed, 06 Aug 2025 10:59:25 +0000

If you're learning React, you might have seen the word "props" and wondered what it means. Don't worry! In this blog, we’ll understand props in the easiest way possible. Think of it like this:

🧠 What are Props?

👉 Props means properties.

👉 They are used to pass data from one component to another in React.

👉 Just like we pass ingredients to a recipe, we pass data (props) to a React component.

🧃 Simple Analogy: Juice Shop

Imagine you own a juice shop. When someone places an order, they tell you the flavor they want – like mango, orange, or apple. You then prepare the juice using that flavor.

In React, the juice shop is your component and the flavor is the prop.

🛠️ Simple Example: Passing a Name

Let’s create a small app that says hello to different people.

Step 1: Create a Welcome component:

src>components>Welcome.jsx

import React from 'react'

function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Welcome

Here:

👉 Welcome is a component

👉 It receives props as an argument

👉 We access the name using props.name

Step 2: Use Welcome component and pass props:

src>App.jsx

import React from 'react'

function App() {
  return (
    <div>
      <Welcome name="Himanay" />
      <Welcome name="Aarav" />
      <Welcome name="Emma" />
    </div>
  );
}

export default App

👉 We are using <Welcome /> three times

👉 Each time, we pass a different name

👉 props.name will be "Himanay", "Aarav", "Emma" in each one

Output:

Hello, Himanay!
Hello, Aarav!
Hello, Emma!

🎉 You just used props to pass data to a component!

📦 Little Complex Example: Passing an Object

Now let’s say we want to show a user’s profile with a name and an age.

Step 1: Create a Profile component:

src>components>Profile.jsx

import React from 'react'

function Profile(props) {
  return (
    <div>
      <h3>Name: {props.user.name}</h3>
      <p>Age: {props.user.age}</p>
    </div>
  );
}

export default Profile

👉 props.user is an object

👉 We use props.user.name and props.user.age to show the data

Step 2: Use the Profile component:

src>App.jsx

import React from 'react'

function App() {
  const user1 = { name: "Himanay", age: 28 };
  const user2 = { name: "Sophia", age: 22 };

  return (
    <div>
      <Profile user={user1} />
      <Profile user={user2} />
    </div>
  );
}

export default App

🧠 We created two user objects and passed them as props

🧠 Inside the Profile component, we used that data to show profile info

Output:

Name: Himanay
Age: 28

Name: Sophia
Age: 22

🧼 Clean Tip: Destructuring Props

To make your code cleaner, you can also destructure props like this:

function Welcome({ name }) {
  return <h2>Hello, {name}!</h2>;
}

And:

function Profile({ user }) {
  return (
    <div>
      <h3>Name: {user.name}</h3>
      <p>Age: {user.age}</p>
    </div>
  );
}

👉 This helps avoid writing props. again and again.

🔁 Recap

✅ Props help us pass data from one component to another

✅ Props are read-only, we cannot change them inside the component

✅ You can pass strings, numbers, arrays, objects, even functions as props

✅ Use destructuring to write cleaner code

✅ Final Thoughts

Learning props is a big step in React. It helps you build reusable and dynamic components. Start small like we did here, and then build more complex UIs using the same idea.

If you understood this, give yourself a high five! 🖐️

Now go ahead and try making your own components using props in CodeAcademix or any React app.

Happy Coding! 💻✨

Written by Himanay Khajuria

⚛️ React Dynamic Routing with React Router (2025)

Himanay Khajuria — Thu, 24 Jul 2025 11:26:51 +0000

Want to show different pages based on URL in React? This blog teaches you how to build a mini blog app using dynamic routing in React using:

✅ React Router v6.22+

✅ Vite (fast React setup)

✅ :id parameter in routes

✅ useParams() to read from the URL

We’ll build:

🏠 A Home page showing blog post list
📄 A Blog Detail page using dynamic route /blog/:id

🛠 Step 1: Create React App using Vite

npm create vite@latest react-dynamic-routing -- --template react
cd react-dynamic-routing
npm install

▶️ This creates a React app with Vite (fast, modern way in 2025)

📦 Step 2: Install React Router

npm install react-router-dom

▶️ React Router allows us to create routes and navigation.

📁 Folder Structure

src/
├── App.jsx
├── main.jsx
├── data.js
└── pages/
    ├── Home.jsx
    └── BlogDetail.jsx

📚 Step 3: Add Blog Data (`data.js`)

// src/data.js
export const blogs = [
  { id: '1', title: '📘 React Basics', content: 'React is a JavaScript UI library.' },
  { id: '2', title: '💡 JSX Explained', content: 'JSX lets you write HTML in JS.' },
  { id: '3', title: '🧭 React Router', content: 'React Router helps in routing.' },
];

▶️ This is our dummy blog data.

🏠 Step 4: Home Page (`Home.jsx`)

// src/pages/Home.jsx
import React from 'react'
import { Link } from 'react-router-dom'
import { blogs } from '../data.js'

const Home = () => {
  return (
    <div>
      <h2>📰 All Blogs</h2>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>
            {/* Navigate to dynamic blog route */}
            <Link to={`/blog/${blog.id}`}>{blog.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default Home

▶️ This lists all blogs and links to /blog/:id

📄 Step 5: Blog Detail Page (`BlogDetail.jsx`)

// src/pages/BlogDetail.jsx
import React from 'react'
import { useParams } from 'react-router-dom'
import { blogs } from '../data.js'

const BlogDetail = () => {
  const { id } = useParams() // Get id from URL
  const blog = blogs.find((b) => b.id === id) // Find blog by id

  if (!blog) {
    return <h2>❌ Blog not found</h2>
  }

  return (
    <div>
      <h2>{blog.title}</h2>
      <p>{blog.content}</p>
    </div>
  )
}

export default BlogDetail

▶️ This page reads the blog id from the URL using useParams() and displays the matching blog.

🧭 Step 6: Define Routes (`App.jsx`)

// src/App.jsx
import React from 'react'
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider
} from 'react-router-dom'

import Home from './pages/Home.jsx'
import BlogDetail from './pages/BlogDetail.jsx'

// Define routes using latest React Router method
const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Home />} />             {/* Home page */}
      <Route path="/blog/:id" element={<BlogDetail />} /> {/* Dynamic blog detail */}
    </>
  )
)

const App = () => {
  return <RouterProvider router={router} />
}

export default App

▶️ We use createBrowserRouter and RouterProvider → latest clean syntax for routes.

🔌 Step 7: Mount React App (`main.jsx`)

// src/main.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css' // optional styling

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

▶️ This runs the app inside the HTML root element.

🚀 Run the App

npm run dev

Then visit:

➡️ / → List of blog posts

➡️ /blog/1 → Blog post 1

➡️ /blog/2 → Blog post 2

➡️ and so on...

✅ What You Learned

✨ In this tutorial, you learned:

How to set up React project with Vite
How to install and use React Router v6.22+
How to use dynamic routes like /blog/:id
How to read URL parameters using useParams()

🧠 Extra Ideas to Try

✅ Add a 404 "Page Not Found"

✅ Add Tailwind CSS for styling

✅ Use an API instead of local data

✅ Add loading indicator

🥳 That’s It!

You now understand dynamic routing in React the clean and modern way!

Happy coding! 💻🎉

🌐 React Router Beginner Guide - New Way to Setup 🧭

Himanay Khajuria — Tue, 08 Jul 2025 20:30:40 +0000

Welcome to this step-by-step guide to learn React Router (v6+) with simple code and deep explanation.

If you’re just starting with React and want to build multiple pages in a single app, this blog is perfect for you 👇

✅ What is React Router?

React Router is a library that helps you navigate between different pages in a React app ⇢ like Home, Products, About, or Contact ⇢ without refreshing the page.

This gives a smooth SPA (Single Page Application) experience.

So instead of loading a new HTML page each time, it updates just the content.

📂 Project Folder Structure

Before we begin, let’s understand the folder structure:

src/
├── assets/
│   └── hk_logo.png        # Logo image used in Navbar
├── components/
│   └── Navbar.jsx         # Top navigation bar
├── layout/
│   └── RootLayout.jsx     # Main layout wrapper (includes Navbar + Outlet)
├── pages/
│   ├── Home.jsx           # Home page
│   ├── Products.jsx       # Products page
│   ├── About.jsx          # About page
│   └── Contact.jsx        # Contact page
├── App.jsx                # Route configuration
└── main.jsx               # React app entry point
└── index.css             # React app global styles

🔧 STEP 1 ➤ Create the Navbar

👉 File: src/components/Navbar.jsx

import React from 'react'
// importing logo image from assets folder
import hk_logo from '../assets/hk_logo.png'
// importing Link component to create page links
import { Link } from 'react-router-dom'

const Navbar = () => {
  return (
    <div className='navbar'>
        {/* Display the logo */}
        <img src={hk_logo} alt="logo" width="100px" height="60" />

        {/* Navigation links */}
        <ul>
            <Link to="/"><li>Home</li></Link>
            <Link to="/products"><li>Products</li></Link>
            <Link to="/about"><li>About</li></Link>
            <Link to="/contact"><li>Contact</li></Link>
        </ul>

        {/* CTA button */}
        <button>Get Started</button>
    </div>
  )
}

export default Navbar

✔️ hk_logo is an image file (you can add your own PNG or JPG inside /assets)

✔️ We use <Link to="..."> instead of <a href="..."> to avoid full page reload

✔️ Clicking a link updates the route and changes page content dynamically

🧱 STEP 2 ➤ Create Root Layout

👉 File: src/layout/RootLayout.jsx

The layout file wraps all pages inside the same structure.

We keep common parts like the Navbar at the top, and page content is loaded below it using <Outlet />.

import React from 'react'
// Importing Navbar that will show on every page
import Navbar from '../components/Navbar'
// Outlet is used to render matched route's child component
import { Outlet } from 'react-router-dom'

const RootLayout = () => {
  return (
    <div>
        <Navbar />

        {/* Page content goes here */}
        <div className='container'>
            <Outlet />
            {/* For example: Home.jsx will be shown when path is / */}
        </div>
    </div>
  )
}

export default RootLayout

🧠 Outlet works like a placeholder ⇢ it will render the matching route’s component (like Home, Products, etc.)

⚙️ STEP 3 ➤ Setup Routes in App.jsx

👉 File: src/App.jsx

Here we define all the routes and tell React which component to show on each URL.

import React from "react"
// Importing all the pages
import Home from "./pages/Home"
import Products from "./pages/Products"
import About from "./pages/About"
import Contact from "./pages/Contact"

// Importing layout
import RootLayout from "./layout/RootLayout"

// React Router imports
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider
} from "react-router-dom"

const App = () => {
  // Creating router with all route settings
  const router = createBrowserRouter(
    createRoutesFromElements(
      // Root route - it wraps all other routes with layout
      <Route path="/" element={<RootLayout />}>
        {/* index means base URL '/' */}
        <Route index element={<Home />} />
        <Route path="products" element={<Products />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    )
  )

  return (
    // Providing the router to the app
    <RouterProvider router={router} />
  )
}

export default App

🔹 createBrowserRouter is the modern way of defining routes

🔹 Route path matches the URL and shows the correct component

🔹 All these pages will be rendered inside RootLayout, which includes the Navbar

🚀 STEP 4 ➤ Setup Entry Point in main.jsx

👉 File: src/main.jsx

This is where React starts your app and renders everything into the browser.

import { createRoot } from 'react-dom/client'
// Importing global styles
import './index.css'
// Importing main App
import App from './App.jsx'

// Attaching App to root element in index.html
createRoot(document.getElementById('root')).render(
  <App />
)

🧠 This file is like the engine starter ⇢ it loads your app inside the <div id="root"></div> in public/index.html

🎨 STEP 5 ➤ Add Global Styles in index.css
👉 File: src/index.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- Navbar --- */
.navbar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 8%;
}

.navbar ul{
    padding: 10px 30px;
    border-radius: 30px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

.navbar ul li{
    display: inline-block;
    padding: 5px 10px;
    margin: 0 10px;
}

a.active {
    color:brown;
}

.navbar button{
    background: #000;
    color: #fff;
    padding: 12px 25px;
    border: 0;
    outline: 0;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}


/* --- Content Container --- */
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80vh;
}

.container h1{
    font-size: 70px;
    font-weight: 500;
}

✔️ index.css is already imported in main.jsx like this:

import './index.css'

🧪 Optional: Create Basic Page Components

Example: src/pages/Home.jsx

import React from 'react'

const Home = () => {
  return (
    <h1>Welcome to Home Page</h1>
  )
}

export default Home

Do the same for Products, About, and Contact pages.

🎯 Summary of What You Did:

🔹 Imported image and links in Navbar

🔹 Used Link to switch between pages without reload

🔹 Used Outlet inside RootLayout to render child routes

🔹 Used createBrowserRouter to define modern routes

🔹 Wrapped everything inside RouterProvider

🎁 Bonus Tip ➤ Add a 404 Page

To handle unmatched routes (like a broken URL), you can add:

<Route path="*" element={<NotFound />} />

✅ Make sure you create a NotFound.jsx file inside /pages folder

✅ Place this route at the bottom inside <Route> list

🖼 Sample Output

When you run this app and go to /about, you’ll see:

Top Navbar remains the same
Page content updates to About Page

💡 Final Thought

React Router is a very useful tool to navigate between pages without reloading the site.

Once you understand layout + routes + outlet, you can build full websites easily!

Keep building! You’re doing great 💪

🧠 Made with ❤️ by Himanay Khajuria

🔗 Follow for more beginner-friendly frontend content!

React Router

Himanay Khajuria — Tue, 08 Jul 2025 20:21:20 +0000

Forem: Himanay Khajuria

🔐 Complete Guide to NextAuth in Next.js (Simple Explanation)

🚀 What is NextAuth

📦 Step 1 Install NextAuth

🔐 Step 2 Add Secret Key

🧠 Step 3 Add TypeScript Support

⚙️ Step 4 Create Auth Configuration

🔑 Step 5 Credentials Provider

🔍 Step 6 Authorize Function (Main Logic)

🧪 Example Input

🧠 What happens inside authorize

1️⃣ Check input

2️⃣ Connect database

3️⃣ Find user

4️⃣ If user not found

5️⃣ Compare password

6️⃣ If correct

🔄 Step 7 JWT Callback

👤 Step 8 Session Callback

📄 Step 9 Custom Pages

⏳ Step 10 Session Setup

🔌 Step 11 Create API Route

🛡 Step 12 Middleware (Protect Routes)

🧠 What middleware does

✅ Allow public routes

🌍 Public pages

🔒 Protect other routes

🧪 Example Flow

⚙️ Matcher Config

🎯 Final Flow (Easy Understanding)

📦 Example Stored User

🎉 Final Summary

🚀 Final Thought

Register a User and Test API using Postman in Next.js with MongoDB

📁 Project API Structure

⚙️ Register API Code

🧠 Understanding the Code Step by Step

1️⃣ Import Required Modules

2️⃣ Create POST API Function

3️⃣ Read Data from Request

4️⃣ Validate Input Data

5️⃣ Connect to MongoDB

6️⃣ Check if User Already Exists

7️⃣ Create New User

8️⃣ Send Success Response

🗄 MongoDB Atlas Setup

📬 Testing the API with Postman

Request Method

API URL

Request Body

✅ Successful Response

📊 Check User in MongoDB Atlas

🎯 Summary

📦 Designing Models in Next.js using Mongoose

🧠 What is a Model

⚙️ Installing bcrypt for Password Security

👤 User Model in Next.js

🔍 Understanding the User Model

1️⃣ Import Required Packages

2️⃣ Define User Interface

3️⃣ Create User Schema

Rules here

🔐 Hash Password Before Saving

4️⃣ Create the Model

🎬 Video Model Example

🔍 Understanding the Video Model

📹 Video Information

🎛 Video Controls

📐 Video Transformation

🧩 Why Models are Important

📁 Typical Folder Structure

📚 Summary

Database Connection in Next.js using Mongoose 📓⚡

🍃 What is MongoDB

✨ Example

🧠 What is Mongoose

👉 Mongoose helps us to

📦 Install Mongoose

📁 Step 1 Create Database Connection File

📌 Example db.ts

📌 Example `db.ts`

📄 Example `.env.local`