DEV Community: Anik Deb Nath

WSL Ubuntu Storage Issue & Migration: C Drive to F Drive

Anik Deb Nath — Sun, 21 Jun 2026 19:58:29 +0000

WSL (Windows Subsystem for Linux) ব্যবহার করা ডেভেলপারদের জন্য খুবই জনপ্রিয়

কারণ এতে Windows-এর ভিতরেই Linux environment পাওয়া যায়। কিন্তু অনেক সময় একটা সমস্যা ধীরে ধীরে বড় হয়ে ওঠে — C drive-এর storage কমে যাওয়া।

আমি এখানে আমার নিজের WSL Ubuntu-কে C drive থেকে F drive-এ migrate করার পুরো অভিজ্ঞতা এবং সমাধানটা সাজিয়ে লিখছি, যাতে অন্যরাও সহজে করতে পারে।

সমস্যা কী ছিল?

WSL Ubuntu ব্যবহার করার সময় আমি লক্ষ্য করলাম C drive ধীরে ধীরে কমে যাচ্ছে।

আমার Linux home directory-তে ছিল:

Projects: ~3.3 GB
npm cache: ~940 MB
cache: ~720 MB
vscode-server: ~1.1 GB

👉 শুধু home directory-তেই প্রায় 6 GB+

এর বাইরে থাকে:

system packages
node_modules
future project builds
Docker (থাকলে আরও বেশি)

সব মিলিয়ে WSL খুব সহজেই 10–50 GB+ হয়ে যায়।

👉 সমস্যা: সবকিছু C drive-এ জমা হচ্ছিল।

আসল কারণ

WSL2 পুরো Linux filesystem একটি virtual disk file-এ রাখে:

ext4.vhdx

এই ফাইল সাধারণত থাকে:
C:\Users\AppData\Local\Packages

অর্থাৎ Linux-এ কাজ করলেও data আসলে C drive-এ জমে।

কেন এটা সমস্যা?

কারণ	ব্যাখ্যার
C drive সাধারণত system SSD হয়	limited space
Windows update, apps, cache সব মিলিয়ে space কমে যায়
WSL data grow করলে system slow বা low storage issue হতে পারে

সমাধান: WSL কে অন্য drive-এ migrate করা

আমি সিদ্ধান্ত নি了一样 Ubuntu-কে F drive-এ সরাবো।

Step 1: Available Drive চেক করা

PowerShell দিয়ে দেখলাম:

C: 32 GB free
F: 128 GB free

👉 সিদ্ধান্ত: F drive best option

Step 2: F drive-এ folder তৈরি

mkdir F:\WSL

Step 3: Ubuntu export করা

wsl --shutdown
wsl --export Ubuntu-24.04 F:\WSL\ubuntu-24.04-backup.tar

এটি পুরো Linux system-এর backup তৈরি করে (~8.9 GB)

Step 4: Old Ubuntu remove করা

wsl --unregister Ubuntu-24.04

👉 এতে C drive থেকে Ubuntu completely remove হয়

Step 5: F drive-এ import করা

wsl --import Ubuntu-24.04 F:\WSL\Ubuntu-24.04 F:\WSL\ubuntu-24.04-backup.tar --version 2

Step 6: Default distro set করা

wsl --set-default Ubuntu-24.04

Result: কী পরিবর্তন হলো?

আগে	এখন
Ubuntu filesystem → C drive	Ubuntu filesystem → F drive
WSL growth → C drive fill হচ্ছিল	সব future growth → F drive

বাস্তব লাভ

C drive অনেক free হলো
ভবিষ্যতের project growth F drive-এ যাবে
system stability improve হলো
large projects নিয়ে চিন্তা কমে গেল

কী পরিবর্তন হয়নি?

Node.js faster হয়নি
VS Code faster হয়নি
Linux performance change হয়নি

কারণ WSL speed depend করে filesystem + disk speed-এর ওপর, drive letter-এর ওপর না।

Final Insight

WSL ব্যবহার করার সময় সবচেয়ে বড় mistake হলো:

"সবকিছু C drive-এ রেখে দেওয়া"

সঠিক approach হলো:

OS → C drive
Development environment (WSL/Docker/Projects) → separate drive (D/F/E)

Conclusion

WSL migration কোনো risky কাজ না, বরং large-scale development setup-এর জন্য এটা একটা best practice।

আমার ক্ষেত্রে শুধু 8–10 GB না, ভবিষ্যতের অনেক GB growth এখন C drive থেকে সরানো গেল।

Result: cleaner system + safer development environment

Windows + WSL + Next.js Development Setup: Zero to Professional Environment

Anik Deb Nath — Sun, 21 Jun 2026 19:50:33 +0000

আজ আমি আমার Windows মেশিনে একটা স্মুথ ও মডার্ন ওয়েব ডেভেলপমেন্ট সেটআপ তৈরি করেছি

ব্যবহার করেছি Windows Subsystem for Linux (WSL), Node.js, pnpm আর Next.js।

পুরো প্রসেসটা খুবই সহজ এবং প্র্যাকটিক্যাল। যারা Windows এ থেকেও Linux-এর পাওয়ার চান, তাদের জন্য এই গাইডটা অনেক কাজে লাগবে। চলো ধাপে ধাপে দেখি।

Step 1: WSL ইনস্টল করা

প্রথমেই Windows-এ WSL চালু করলাম।

কমান্ড:

wsl --install

এরপর PowerShell অ্যাডমিন মোডে চালিয়ে Ubuntu ইনস্টল করলাম। WSL ইনস্টল হওয়ার পর Windows এর ভিতরেই একটা পূর্ণাঙ্গ Linux এনভায়রনমেন্ট পেয়ে গেলাম। এখন আমি Linux কমান্ড, টার্মিনাল এবং ডেভেলপমেন্ট টুলস সব স্বাভাবিকভাবে ব্যবহার করতে পারছি।

Step 2: Ubuntu সেটআপ

WSL ওপেন করে প্রথমে কয়েকটা বেসিক জিনিস সেট করলাম:

হোম ডিরেক্টরি চেক করা (/home/username)
projects ফোল্ডার তৈরি করা
সিস্টেম আপডেট করা (sudo apt update && sudo apt upgrade)

এখানে বুঝলাম, WSL আসলে আলাদা কোনো VM না — এটা Windows এর সাথে খুব ভালোভাবে ইন্টিগ্রেটেড। ফাইল অ্যাক্সেসও দ্রুত।

Step 3: Node.js ইনস্টল (nvm দিয়ে)

Node.js ইনস্টল করার জন্য nvm (Node Version Manager) ব্যবহার করলাম। এতে যেকোনো সময় ভার্সন চেঞ্জ করা সহজ।

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install --lts
nvm use --lts

node -v এবং npm -v চেক করে নিলাম।

Step 4: pnpm সেটআপ

npm এর বদলে pnpm ব্যবহার করছি কারণ:

অনেক দ্রুত প্যাকেজ ইনস্টল হয়
ডিস্ক স্পেস অনেক কম লাগে
ডিপেন্ডেন্সি ম্যানেজমেন্ট অনেক ভালো

Corepack দিয়ে সেট করলাম (Node.js এর সাথেই আসে):

corepack enable pnpm
pnpm --version

Step 5: Next.js প্রজেক্ট তৈরি

pnpm create next-app@latest my-project --typescript --tailwind --eslint --app
cd my-project
pnpm install

Step 6: pnpm Build Issue ফিক্স

ইনস্টলের সময় একটা সমস্যা হয়েছিল:

[ERR_PNPM_IGNORED_BUILDS]

সমাধান:

pnpm approve-builds

এরপর আবার pnpm install চালালাম। সবকিছু ঠিক হয়ে গেল।

Step 7: VS Code + WSL Integration

VS Code ইনস্টল করে WSL এক্সটেনশন যোগ করলাম। প্রজেক্ট ফোল্ডারে গিয়ে সিম্পলি টাইপ করলাম:

code .

অবাক করা ব্যাপার! VS Code Windows এ খুলল, কিন্তু সবকিছু WSL এর Linux এনভায়রনমেন্টে চলতে লাগল। VS Code Server অটোমেটিক্যালি ইনস্টল হয়ে গেল। এটাই সবচেয়ে শক্তিশালী অংশ।

Step 8: WSL বন্ধ করা (পরিষ্কার রাখতে)

কাজ শেষে র‍্যাম ফ্রি করতে:

wsl --shutdown

শেষ কথা

এই সেটআপের মাধ্যমে আমি এখন Windows এ বসেও প্রায় পুরোপুরি Linux-এর মতো ডেভেলপমেন্ট এক্সপেরিয়েন্স পাচ্ছি। WSL + pnpm + Next.js + VS Code — এই কম্বিনেশনটা সত্যিই শক্তিশালী।

সুবিধাগুলো:

দ্রুত পারফরম্যান্স
আসল Linux টুলস ও কমান্ড
সহজ ডিপেন্ডেন্সি ম্যানেজমেন্ট
প্রফেশনাল ওয়ার্কফ্লো

যারা এখনো WSL ট্রাই করেননি, অবশ্যই চেষ্টা করে দেখবেন। কোনো সমস্যা হলে কমেন্টে জানাবেন — সাহায্য করব।

Happy Coding! 🚀

Infinite Scrollable Image Slider with Framer Motion in Next.js

Anik Deb Nath — Fri, 04 Jul 2025 07:08:46 +0000

✨ Overview

In this blog, we’ll walk through how I built an infinite scrolling image slider using Framer Motion, Next.js, and Tailwind CSS. The slider is powered by scroll velocity and it supports a "Show More" grid view with pagination!

🧱 Tools & Technologies Used

Next.js (App Router)
React
Framer Motion
Tailwind CSS
Lucide Icons

1. 👉Create a New Next.js Project

npx create-next-app@latest scroll-slider-demo
cd scroll-slider-demo

2. 👉Install Required Packages

# Framer Motion for animation
npm install framer-motion

# Tailwind CSS and its dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Lucide React for icons
npm install lucide-react

3. 👉Configure Tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. 👉globals.css (./app/globals.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 👉Add the Scroll Slider Component

"use client";
import React, { useState, useRef } from "react";
import Image from "next/image";
import {
  motion,
  useScroll,
  useSpring,
  useTransform,
  useMotionValue,
  useVelocity,
  useAnimationFrame,
  wrap,
} from "framer-motion";
import {
  ChevronDown,
  ChevronUp,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

const images = [
  {
    id: 1,
    title: "Moonbeam",
    description: "Serene moonlit landscape with ethereal beauty",
    thumbnail:
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=40&w=640",
  },
  {
    id: 2,
    title: "Cursor",
    description: "Digital innovation meets creative design",
    thumbnail:
      "https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=40&w=640",
  },
  {
    id: 3,
    title: "Rogue",
    description: "Adventure awaits in uncharted territories",
    thumbnail:
      "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=40&w=640",
  },
  {
    id: 4,
    title: "Editorially",
    description: "Crafting stories that inspire and engage",
    thumbnail:
      "https://images.unsplash.com/photo-1510784722466-f2aa9c52fff6?q=80&w=640",
  },
  {
    id: 5,
    title: "Editrix AI",
    description: "Artificial intelligence meets human creativity",
    thumbnail:
      "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?q=80&w=640",
  },
  {
    id: 6,
    title: "Cosmic Dreams",
    description: "Journey through the vast expanse of space",
    thumbnail:
      "https://images.unsplash.com/photo-1446776877081-d282a0f896e2?q=80&w=640",
  },
  {
    id: 7,
    title: "Urban Pulse",
    description: "The heartbeat of modern city life",
    thumbnail:
      "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?q=80&w=640",
  },
  {
    id: 8,
    title: "Natural Wonder",
    description: "Discovering the beauty in untamed nature",
    thumbnail:
      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=640",
  },
  {
    id: 9,
    title: "Tech Horizon",
    description: "Where technology meets tomorrow",
    thumbnail:
      "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=640",
  },
  {
    id: 10,
    title: "Ocean Depths",
    description: "Exploring the mysteries beneath the waves",
    thumbnail:
      "https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=640",
  },
];

// ScrollVelocity Component
const ScrollVelocity = React.forwardRef(
  (
    {
      children,
      velocity = 5,
      movable = true,
      clamp = false,
      className,
      initialOffset = 0, // New prop for initial offset
      ...props
    },
    ref
  ) => {
    const baseX = useMotionValue(initialOffset); // Use initialOffset here
    const { scrollY } = useScroll();
    const scrollVelocity = useVelocity(scrollY);

    const smoothVelocity = useSpring(scrollVelocity, {
      damping: 100,
      stiffness: 20,
    });
    const velocityFactor = useTransform(smoothVelocity, [0, 10000], [0, 0.6], {
      clamp,
    });
    const x = useTransform(baseX, (v) => `${wrap(-20, -50, v)}%`); // Adjusted wrap values

    const directionFactor = useRef(1);
    const scrollThreshold = useRef(5);

    useAnimationFrame((t, delta) => {
      if (movable) {
        move(delta);
      } else {
        if (Math.abs(scrollVelocity.get()) >= scrollThreshold.current) {
          move(delta);
        }
      }
    });

    function move(delta) {
      let moveBy = directionFactor.current * velocity * (delta / 1000);
      if (velocityFactor.get() < 0) {
        directionFactor.current = -1;
      } else if (velocityFactor.get() > 0) {
        directionFactor.current = 1;
      }
      moveBy += directionFactor.current * moveBy * velocityFactor.get();
      baseX.set(baseX.get() + moveBy);
    }

    return (
      <div
        ref={ref}
        className={`relative m-0 flex flex-nowrap overflow-hidden whitespace-nowrap leading-[0.8] ${className}`}
        {...props}
      >
        <motion.div
          className="flex flex-row flex-nowrap whitespace-nowrap"
          style={{ x }}
        >
          {children}
        </motion.div>
      </div>
    );
  }
);

ScrollVelocity.displayName = "ScrollVelocity";

// Image Card Component
const ImageCard = ({ image, isGrid = false }) => {
  return (
    <div
      className={`relative cursor-pointer mr-6 ${
        isGrid ? "w-full h-80" : "h-[15rem] w-[25rem] flex-shrink-0" // Fixed width of 400px (25rem = 400px, adjust as needed)
      }`}
    >
      <Image
        src={image.thumbnail}
        alt={image.title}
        width={400} // Fixed width
        height={240} // Fixed height (adjust aspect ratio as needed)
        className="w-full h-full object-cover object-center rounded-lg"
        priority={isGrid}
      />

      {/* Prime Badge - Top Left Corner */}
      <div className="absolute top-2 left-2 z-10">
        <div className="tracking-wide bg-gradient-to-r from-yellow-400 to-yellow-600 text-black px-2 py-1 rounded-md text-xs font-bold shadow-lg">
          Popular
        </div>
      </div>

      {/* Gradient Overlay - Black to White from bottom to top */}
      <div className="rounded-lg absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent" />

      {/* Content - Always visible with improved spacing */}
      <div
        className={`absolute bottom-0 left-0 right-0 text-white ${
          isGrid ? "p-4" : "p-3 md:p-4"
        }`}
      >
        <h3
          className={`font-semibold ${
            isGrid
              ? "text-lg mb-3 leading-7 tracking-wide"
              : "text-base mb-2 leading-6 tracking-wide"
          }`}
        >
          {image.title}
        </h3>

        <p
          className={`text-gray-300 font-normal ${
            isGrid ? "text-sm tracking-wide" : "text-sm tracking-wide"
          } drop-shadow-md truncate`}
        >
          {image.description}
        </p>
      </div>
    </div>
  );
};

// Grid Layout Component
const GridLayout = ({ images, onClose }) => {
  const [currentPage, setCurrentPage] = useState(0);
  const imagesPerPage = 6;
  const totalPages = Math.ceil(images.length / imagesPerPage);

  const getCurrentImages = () => {
    const start = currentPage * imagesPerPage;
    const end = start + imagesPerPage;
    return images.slice(start, end);
  };

  const goToNext = () => {
    setCurrentPage((prev) => (prev + 1) % totalPages);
  };

  const goToPrevious = () => {
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
  };

  return (
    <motion.div
      className="w-full"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.5 }}
    >
      <div className="mb-6 flex justify-between items-center">
        <h2 className="text-2xl font-bold text-gray-800">All Projects</h2>
        <button
          onClick={onClose}
          className="flex items-center gap-2 px-5 py-2 rounded-full text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all shadow-md"
        >
          <ChevronUp className="w-4 h-4" />
          Show Less
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {getCurrentImages().map((image) => (
          <ImageCard key={image.id} image={image} isGrid={true} />
        ))}
      </div>

      {/* Navigation Controls - Below the grid */}
      <div className="flex justify-center items-center flex-wrap gap-4 mt-8">
        {/* Pagination buttons */}
        <div className="flex items-center gap-4 flex-wrap">
          <button
            onClick={goToPrevious}
            disabled={totalPages <= 1}
            className="flex items-center gap-2 px-5 py-2 rounded-full text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <ChevronLeft className="w-4 h-4" />
            Previous
          </button>

          <span className="text-sm font-medium text-gray-700">
            Page {currentPage + 1} of {totalPages}
          </span>

          <button
            onClick={goToNext}
            disabled={totalPages <= 1}
            className="flex items-center gap-2 px-5 py-2 rounded-full text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Next
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </motion.div>
  );
};

// Main Component
const EnhancedScrollVelocityDemo = () => {
  const [showGrid, setShowGrid] = useState(false);
  const velocity = [0.2, -0.2];

  if (showGrid) {
    return (
      <div className="w-full p-6">
        <GridLayout images={images} onClose={() => setShowGrid(false)} />
      </div>
    );
  }

  return (
    <div className="w-full">
      <div className="flex flex-col space-y-10 py-10">
        {velocity.map((v, index) => (
          <ScrollVelocity
            key={index}
            velocity={v}
            initialOffset={index % 2 === 0 ? -10 : 10} // Alternate initial offsets
          >
            {images.map((image) => (
              <ImageCard key={image.id} image={image} />
            ))}
            {/* Duplicate images to create infinite scroll effect */}
            {images.map((image) => (
              <ImageCard key={`dup-${image.id}`} image={image} />
            ))}
          </ScrollVelocity>
        ))}
      </div>

      {/* Show More Button */}
      <div className="flex justify-center">
        <motion.button
          onClick={() => setShowGrid(true)}
          className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full hover:from-blue-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <span className="font-semibold">Show More</span>
          <ChevronDown className="w-5 h-5" />
        </motion.button>
      </div>
    </div>
  );
};

export default EnhancedScrollVelocityDemo;

6. 👉Use It in a Page or Other where you need

import EnhancedScrollVelocityDemo from "./components/EnhancedScrollVelocityDemo";

export default function Home() {
  return (
    <main className="min-h-screen bg-white">
      <EnhancedScrollVelocityDemo />
    </main>
  );
}

7. 👉Run the Project

npm run dev
Visit: http://localhost:3000

You should see your animated scrollable slider with a “Show More” grid view. 🚀

Tips & Enhancements

Here are a few ways you can further enhance the experience:

Add drag support (drag="x") for mobile swiping
Animate image hover state for interactivity
Fetch image data dynamically from API
Add a modal/lightbox on card click

Final Thoughts

This project was a fun experiment combining Framer Motion’s powerful animation utilities with clean, scalable UI design. It showcases how scroll velocity can create visually stunning effects with minimal code.

If you're building a portfolio, product showcase, or creative gallery — this layout can provide a delightful user experience that stands out.❤️

Deploying a Node.js + Express Server to Vercel Using the CLI

Anik Deb Nath — Mon, 18 Nov 2024 21:10:53 +0000

Deploying your Node.js, Express, and MongoDB backend to Vercel is an excellent way to make your application accessible to users worldwide. Vercel offers a simple, serverless, and high-performance deployment platform that integrates seamlessly with the Node.js ecosystem.

In this blog, you'll learn how to deploy your backend server to Vercel using the command line, step-by-step.

Prerequisites

Node.js and npm installed on your machine.
A Vercel account. Sign up here.
Vercel CLI installed globally on your system.
A MongoDB instance, either locally or on a cloud provider like MongoDB Atlas.

Step 1: Install Vercel CLI

First, install the Vercel CLI globally:

npm install -g vercel

Verify the installation:

vercel --version

Step 2: Prepare Your Node.js Application

app.js: Defines your Express app.
server.js: Handles the server setup.
.env: Contains sensitive information like your MongoDB connection string

Step 3: Configure Your vercel.json File

Create a vercel.json file in the root of your project(where package.json file in include) to configure your deployment.

{
  "version": 2,
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js"
    }
  ]
}

builds: Specifies which file to use for the build.
routes: Redirects all traffic to the server.js file.

Step 4: Build Your Application First

Build your application without any error. If any kind of error is occured , remove it then build your application.

npm run build

Step 5: Deploy Your Application

vercel

During deployment Vercel detects your server.js file as the entry point. Environment variables like MONGO_URI are injected automatically.

Step 6: Verify Your Deployment

After the deployment is complete, you'll get a URL like:
Domain: https://your-project-name.vercel.app

Step 7: Update Your Code

To redeploy updated code:

vercel --prod

Conclusion

You've successfully deployed your Node.js + Express + MongoDB server to Vercel using the command line! Vercel makes it incredibly simple to host backend applications, thanks to its serverless capabilities and ease of use.

If you encounter any issues, consult the Vercel documentation or leave a comment below. Happy coding! 🚀

[Anik Deb Nath]

Create a Responsive Navbar Using Tailwind CSS and Next.js

Anik Deb Nath — Wed, 13 Nov 2024 04:26:11 +0000

Intorduction

Creating a responsive and visually appealing navbar is an essential part of building a modern website. This tutorial will guide you through building a navbar using Next.js and Tailwind CSS. The navbar will be fully responsive, including a mobile menu that slides in from the left.

Prerequisites

Make sure you have -

are installed; if not, install first and create a new next js project by running following commands:

npx create-next-app@latest my-navbar-app
cd my-navbar-app

Step 1: Setting Up the Navbar Component

In the components folder, create a new file called Navbar.js (or Navbar.jsx):

"use client";
import Link from "next/link";
import { useState } from "react";

export default function Navbar() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  // Navigation items array
  const navItems = [
    { name: "Home", href: "/" },
    { name: "About", href: "/about" },
    { name: "News", href: "/news" },
    { name: "Contact", href: "/contact" },
  ];

  return (
    <div>
      <nav className="block w-full max-w-screen px-4 py-4 mx-auto bg-white bg-opacity-90 sticky top-3 shadow lg:px-8 backdrop-blur-lg backdrop-saturate-150 z-[9999]">
        <div className="container flex flex-wrap items-center justify-between mx-auto text-slate-800">
          <Link
            href="/"
            className="mr-4 block cursor-pointer py-1.5 text-red-600 font-bold text-2xl"
          >
            NEXTNEWS
          </Link>

          <div className="lg:hidden">
            <button
              className="relative ml-auto h-6 max-h-[40px] w-6 max-w-[40px] select-none rounded-lg text-center align-middle text-xs font-medium uppercase text-inherit transition-all hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              onClick={toggleMobileMenu}
              type="button"
            >
              <span className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M4 6h16M4 12h16M4 18h16"
                  ></path>
                </svg>
              </span>
            </button>
          </div>

          {/* Mobile Menu */}
          <div
            className={`fixed top-0 left-0 min-h-screen w-64 bg-slate-100 shadow-lg transform transition-transform duration-300 ease-in-out ${
              isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
            } lg:hidden z-50`}
          >
            <div className="flex flex-row items-center border-b pb-4">
              <Link
                href="/"
                className="cursor-pointer text-red-600 font-bold text-xl pt-4 ps-4"
              >
                NEXTNEWS
              </Link>
              <button
                onClick={toggleMobileMenu}
                className="absolute top-4 right-4 text-slate-600 hover:text-red-500"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
            <ul className="flex flex-col h-full gap-4 p-4">
              {navItems.map((item, index) => (
                <li
                  key={index}
                  className="flex items-center p-1 text-lg gap-x-2 text-slate-600 hover:text-red-500"
                >
                  <Link onClick={() => {setIsMobileMenuOpen(false);}} href={item.href} className="flex items-center">
                    {item.name}
                  </Link>
                </li>
              ))}
              <li className="mt-4">
                <button className="bg-red-600 text-white px-8 py-2 rounded-md hover:bg-red-500">
                  Login
                </button>
              </li>
            </ul>
          </div>

          {/* Desktop Menu */}
          <div className="hidden lg:block">
            <ul className="flex flex-col gap-2 mt-2 mb-4 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
              {navItems.map((item, index) => (
                <li
                  key={index}
                  className="flex items-center p-1 text-lg gap-x-2 text-slate-600 hover:text-red-500"
                >
                  <Link href={item.href} className="flex items-center">
                    {item.name}
                  </Link>
                </li>
              ))}
              <li>
                <button className="bg-red-600 hover:bg-red-500 text-white px-8 py-2 rounded-md">
                  Login
                </button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  );
}

Step 2: Use your Navbar Component

Use this navbar component in layout.js file of app folder.

export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Navbar /> //use here
{children}
</body>
</html>
);
}

Step 3: Testing Responsiveness

To see your navbar in action, run your Next.js local server:

npm run dev

Conclusion

This responsive navbar combines the power of Next.js with the flexibility of Tailwind CSS, creating a modern and functional user interface. With a few customizations, you can tailor this navbar to suit any project’s needs.

Happy coding!
[Anik Deb Nath]

Union and intersection type in Typescript

Anik Deb Nath — Mon, 20 May 2024 05:27:27 +0000

Union:

In typescript we can use union type when we need to use more than a single type. We can also say that union means “OR”. To use union type we can use pipe (‘|’) symbol as union type. By this type we can also combine multiple data types in typescript. Let’s see union type’s syntax below:

const checkNum : number | string ; 
checkNum = 10; 
checkNum = "Hello"; 
checkNum = true; // give here error becasue checkNum value should be number or string.

So here we see that myNum can be number or string which is provide more flexibility in our code.

Use Union as function parameters:

const sayHi = (param:string | number) => {
 return console.log(param);
}
sayHi("Hello!")
sayHi(89.6)
sayHi(true) //Argument of type 'boolean' is not assignable to parameter of type 'string | number'.

Union of Literal Types:

we can declare a union type including of literal types, such as string literals, number literals or boolean literals etc. Example :

type Sports = 'cricket' | 'football' | 'tenis';
function watchMovie(game: Sports) {
    console.log(`You are playing ${game}.`);
}
watchMovie('cricket');
watchMovie('football');

This will make our code more type-safe and error-free, and help us to avoid unnecessary type checks or type assertions.

Intersection:

Intersection type is allowing us to combine multiple types into a single type with all of the properties. We must use “&” and operator to create intersection type in typescript. Let’s see union type’s syntax below:

type Name = variable_1 & variable_2;
let var: variable_3;

Intersection can Combine interface:

In typescript we can define a type by combining two different interface using intersection that means type can get all properties of both interfaces. Let’s see the example below:

interface Student{
    name: string;
    age: number;
    stdId: number;
}
interface Teacher{
    teachingId: string;
}
type User = Student & Teacher;
User.age = 5;
User.teachingId ="CSE123";
User.name = 'Karim';

Here the order of the types in an intersection does not concern. Suppose Student & Teacher is equivalent to Teacher & Student.

Use intersection types to extend or override existing types

Let’s see an example:

type area = {
  width:string;
  height:string;
};
type volume = area & { depth: string };

In short union and intersection types in TypeScript:

Union

Can combine one or more types into one type.
By using the pipe ‘|’ operator, we can perform union.
Example: type value = string | number;

In functions or variables, union types are useful for accepting various types of values.

Intersection

Can merge properties from one or more types.
By using the ampersand ‘&’ operator, we can perform intersection.
Example: type User = Student & Teacher;

In composing types and enforcing strict type contracts, intersection types are useful.

Summary:

In summary we can say that union types provide versatility by allowing variables to hold values from many types, whereas intersection types combine numerous types into a single, more exact type. Depending on the needs of our code, we may opt to utilize union types to handle a variety of data circumstances or intersection types to compose exact type structures and execute strict type contracts.