DEV Community: Aman Sahu

The Crumb Trail: Managing Cookies in Next.js🍪

Aman Sahu — Thu, 26 Jun 2025 05:49:22 +0000

Let me tell you a story about how I once spent an entire afternoon debugging why my user preferences weren't persisting, only to discover I'd set a cookie with path=/admin while my app was running at path=/. That was the day I vowed to master cookie management in Next.js, and today, I'm going to share that hard-earned knowledge with you.

🧐 Why Bother With Proper Cookie Management?

Cookies are like the breadcrumbs of the web (hence the terrible pun in this post's title). They help us remember user preferences, maintain sessions, and keep our applications stateful. But much like real breadcrumbs, if you don't manage them properly, you'll end up with a mess.

🛠️ The Building Blocks

Here are the two files you'll need to implement in your project:

`lib/cookies.ts` - The Core Utility

export type CookieOptions = {
  days?: number;
  path?: string;
  domain?: string;
  secure?: boolean;
  sameSite?: "Lax" | "Strict" | "None";
};

export class ClientCookies {
  /**
   * Set a cookie
   * @param name Cookie name
   * @param value Cookie value
   * @param options Cookie options
   */
  static set(name: string, value: string, options: CookieOptions = {}) {
    if (typeof window === "undefined") return;

    const {
      days = 30,
      path = "/",
      domain,
      secure = window.location.protocol === "https:",
      sameSite = "Lax",
    } = options;

    let cookieString = `${name}=${encodeURIComponent(value)}`;

    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
      cookieString += `; expires=${date.toUTCString()}`;
    }

    cookieString += `; path=${path}`;
    if (domain) cookieString += `; domain=${domain}`;
    if (secure) cookieString += "; secure";
    if (sameSite) cookieString += `; sameSite=${sameSite}`;

    document.cookie = cookieString;
  }

  /**
   * Get a cookie value by name
   * @param name Cookie name
   * @returns Cookie value or null if not found
   */
  static get(name: string): string | null {
    if (typeof window === "undefined") return null;

    const cookies = document.cookie.split("; ");
    for (const cookie of cookies) {
      const [cookieName, cookieValue] = cookie.split("=");
      if (cookieName === name) {
        return decodeURIComponent(cookieValue);
      }
    }
    return null;
  }

  /**
   * Delete a cookie
   * @param name Cookie name
   * @param path Cookie path
   * @param domain Cookie domain
   */
  static delete(name: string, path = "/", domain?: string) {
    if (typeof window === "undefined") return;

    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}${
      domain ? `; domain=${domain}` : ""
    }`;
  }

  /**
   * Check if a cookie exists
   * @param name Cookie name
   * @returns boolean indicating if cookie exists
   */
  static has(name: string): boolean {
    if (typeof window === "undefined") return false;
    return document.cookie
      .split("; ")
      .some(cookie => cookie.split("=")[0] === name);
  }
}

Key Features:

🔒 SSR-safe (won't break during server-side rendering)
🛡️ Secure defaults (auto HTTPS detection)
📦 Comprehensive cookie options
🧹 Clean API for all cookie operations

`hooks/use-cookies.ts` - The React Hook

import { useEffect, useState } from "react";

import { ClientCookies, CookieOptions } from "@/lib/cookies";

type UseCookieReturn = {
  value: string | null;
  set: (value: string, options?: CookieOptions) => void;
  remove: () => void;
  has: boolean;
};

export const useCookie = (
  name: string,
  defaultValue?: string,
): UseCookieReturn => {
  const [cookieValue, setCookieValue] = useState<string | null>(() => {
    return ClientCookies.get(name) ?? defaultValue ?? null;
  });

  const set = (value: string, options?: CookieOptions) => {
    ClientCookies.set(name, value, options);
    setCookieValue(value);
  };

  const remove = () => {
    ClientCookies.delete(name);
    setCookieValue(null);
  };

  const has = ClientCookies.has(name);

  // Sync cookie changes between browser tabs
  useEffect(() => {
    const handler = () => {
      setCookieValue(ClientCookies.get(name) ?? defaultValue ?? null);
    };

    window.addEventListener("storage", handler);
    return () => window.removeEventListener("storage", handler);
  }, [name, defaultValue]);

  return { value: cookieValue, set, remove, has };
};

Key Features:

♻️ Reactive cookie values
🔄 Automatic cross-tab synchronization
🎣 Simple hook interface
⚡ Optimized performance

🍪 Setting Cookies Like a Pro

Here's how to use our cookie system in your components:

// Using the ClientCookies directly
ClientCookies.set("user_token", "abc123", {
  days: 7,
  secure: true,
  sameSite: "Strict"
});

// Using the hook in a component
function UserPreferences() {
  const { value: theme, set: setTheme } = useCookie("theme", "light");

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light", { days: 30 });
  };

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === "light" ? "dark 🌙" : "light ☀️"} mode
    </button>
  );
}

🔍 Cookie Inspection Made Easy

Check cookies with these simple methods:

// Check if cookie exists
if (ClientCookies.has("user_consent")) {
  loadAnalytics();
}

// Get cookie value
const userId = ClientCookies.get("user_id");

// With hook
const { value: userId, has: hasUserId } = useCookie("user_id");

🗑️ Deleting Cookies Properly

Don't just forget about cookies - remove them correctly:

// Direct method
ClientCookies.delete("temp_session");

// Using hook
const { remove } = useCookie("auth_token");
remove();

🌐 Real-World Use Cases

1. Authentication Flow 🔐

// After login
ClientCookies.set("auth_token", response.token, {
  days: 1,
  secure: true,
  sameSite: "Strict"
});

// In protected component
const { value: token } = useCookie("auth_token");

// On logout
const { remove } = useCookie("auth_token");
remove();

2. User Preferences ⚙️

function FontSizeSelector() {
  const { value: fontSize, set: setFontSize } = useCookie("font_size", "16");

  return (
    <select 
      value={fontSize} 
      onChange={(e) => setFontSize(e.target.value, { days: 365 })}
    >
      <option value="14">Small</option>
      <option value="16">Medium</option>
      <option value="18">Large</option>
    </select>
  );
}

3. GDPR Consent 🏛️

function CookieBanner() {
  const { value: consent, set: setConsent } = useCookie("cookie_consent");

  if (consent) return null;

  return (
    <div className="banner">
      <p>We use cookies 🍪</p>
      <button onClick={() => setConsent("accepted", { days: 365 })}>
        Accept
      </button>
    </div>
  );
}

🚀 Advanced Features

Cross-Tab Synchronization

Our useCookie hook automatically syncs cookie changes across browser tabs using the storage event. No more stale data!

// Inside useCookie hook
useEffect(() => {
  const handler = () => {
    setCookieValue(ClientCookies.get(name) ?? defaultValue ?? null);
  };
  window.addEventListener("storage", handler);
  return () => window.removeEventListener("storage", handler);
}, [name, defaultValue]);

Object Storage

While cookies only store strings, we can easily handle objects:

// Store object
const userSettings = { darkMode: true, notifications: false };
ClientCookies.set("settings", JSON.stringify(userSettings));

// Retrieve
const settings = JSON.parse(ClientCookies.get("settings") || "{}");

// With hook
const { value: settings } = useCookie("settings");
const parsedSettings = JSON.parse(settings || "{}");

📝 Troubleshooting Tips

If your cookies aren't behaving:

Check the path 🌐 - Is it set correctly?
Verify secure flag 🔒 - Especially in production
Inspect cookie in browser 🔍 - Chrome DevTools > Application > Cookies
Test cross-tab behavior ↔️ - Change in one tab, check another

Now go forth and manage those cookies like a pro! Just remember, unlike real cookies, these ones won't make you gain weight. 🏋️‍♂️

Pro Tip: Keep your actual cookies (the edible ones) away from your keyboard while coding. I speak from experience. 🍪💻

How do you serve media files correctly in Docker with Next.js and Nginx!?🛠️🖼️

Aman Sahu — Sun, 27 Apr 2025 00:38:53 +0000

Spoiler Alert: If you're serving images directly from a CDN like Cloudinary or S3, this post might not be for you; you likely won’t face this issue. But if you're running your own production or development environment with Dockerized Next.js, Django, and Nginx, buckle up, friend. You might just save yourself a few hours of headaches.

🧩 The Problem: Images Playing Hide & Seek

So here's the scene: I’m building a full-stack app using Next.js (frontend), Django (backend), and Nginx (reverse proxy), all running smoothly in their own cosy Docker containers. They even share a common volume for media and static files. Pretty neat, right?

Now, when I upload a profile picture via a Django endpoint, it gets saved in the media/ folder. Because of the shared volume, the image is instantly accessible to Nginx as well. Which means I can hit:

http://localhost:8000/media/profile_pics/user.png (via Django)
or just http://localhost/media/profile_pics/user.png (via Nginx)

So far, so good.

Then I did something completely logical... I passed that URL directly into the Next.js <Image /> component:

<Image src="http://localhost/media/profile_pics/user.png" alt="User Profile" />

But what did I get? A glorious 500 Internal Server Error. Ta-da.

🔍 So... What Was Going Wrong?

Let’s break it down.

When I passed the image URL to <Image />, Next.js's Image Optimiser internally rewrote the request to something like:

/_next/image?url=http://localhost/media/profile_pics/user.png&w=1920&q=75

The catch? Inside the Next.js container, localhost refers to itself, not to the Nginx container or the host machine. So when Next.js tried to fetch the image from localhost, it hit a dead end because it was looking inside its container, where the image doesn’t exist. It was like asking a cat to bark. Not happening!!

🧪 The "Aha!" Moment (a.k.a. My DIY Proxy Fix)

I could’ve switched to using a CDN... but I wanted to stick with my setup for now. So here's what I did:

The Plan

I built a custom wrapper around the Next.js <Image /> component called <ProxyImage />. This little genius rewrites any "localhost" URLs to use a Docker-resolvable hostname like http://nginx, which points to the right container where the image exists.

🛠️ The Solution (Step-by-Step)

1. Update Your `.env`

NEXT_PUBLIC_REWRITE_IMAGE_BASES=http://localhost,http://127.0.0.1
NEXT_PUBLIC_IMAGE_REPLACEMENT=http://nginx

This tells the app which base URLs to replace (like http://localhost) and what to replace them with (http://nginx).

2. Update Your `config.ts`

const config = {
  imageRewrite: {
    baseUrls: (process.env.NEXT_PUBLIC_REWRITE_IMAGE_BASES || "").split(","),
    replacement: process.env.NEXT_PUBLIC_IMAGE_REPLACEMENT || "",
  },
};

Let’s keep things dynamic and DRY, shall we?

3. Build the `ProxyImage` Component

import Image, { ImageProps } from 'next/image';
import config from '@/config';

const { baseUrls, replacement } = config.imageRewrite;

function rewriteSrc(src: string): string {
  for (const base of baseUrls) {
    if (src.startsWith(base)) {
      return src.replace(base, replacement);
    }
  }
  return src;
}

interface ProxyImageProps extends Omit<ImageProps, 'src'> {
  src: string;
}

export const ProxyImage = ({ src, ...props }: ProxyImageProps) => {
  const fixedSrc = rewriteSrc(src);
  return <Image {...props} src={fixedSrc} />;
};

Now just use <ProxyImage /> wherever you need optimized images.

4. Allow External Image Domains in `next.config.js`

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'nginx',
        pathname: '/media/**',
      },
    ],
  },
};

This tells Next.js: “Hey, it’s cool to optimise images from http://nginx.”

✅ Why This Worked For Me

Docker-Friendly: Rewrites URLs to something your container can resolve.
Leverages Next.js Optimisation: You still get all the goodies like lazy loading, resizing, etc.
Flexible Config: URLs and replacement targets are environment-based.
No Extra Services Needed: No need to spin up a CDN just for local dev.

✨ Bonus Thoughts

There are other ways to solve this problem, like skipping optimisation altogether for internal images, preloading them, or routing through an API, but this setup felt like the most robust and flexible option for my Dockerized local stack.

If you’ve got a better solution, I’d love to hear it! You do you, dev.

🚀 TL;DR

If your images are served from localhost in Docker, Next.js's Image component might fail.
The fix? Create a wrapper that rewrites localhost URLs to a valid Docker hostname like nginx.
Your images load. Your errors vanish. Your dev life becomes 5% happier.

Mastering Code Quality: Setting Up ESLint, Prettier, Lint-Staged & Husky for Next.js 15 Like a Pro!🚀

Aman Sahu — Tue, 18 Mar 2025 08:43:15 +0000

🎯 Introduction

Setting up linting and formatting tools for a Next.js 15 project might seem like a Herculean task, but trust me, it’s easier than debugging a missing semicolon in production. 🫠

In this guide, I’ll walk you through configuring ESLint, Prettier, Lint-Staged, and Husky enterprise-style but without the soul-crushing complexity.

If you want clean, consistent code while ensuring no rogue console.log sneak into your main branch, then this setup is for you. With a streamlined configuration and automated enforcement, you'll catch issues early and maintain high-quality code effortlessly. Let’s dive in. 🚀

⚡ Step 1: Installing Dependencies

Let's kick things off by installing all the necessary dependencies in one swift command because manually installing them one by one is about as fun as debugging on a Friday night. 😵‍💫

This command sets up ESLint, Prettier, Lint-Staged, Husky, and a few handy plugins to keep your codebase in top shape. Run the following:

npm install --save-dev eslint @eslint/compat @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-next eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-simple-import-sort eslint-plugin-unicorn husky lint-staged prettier prettier-plugin-tailwindcss

Troubleshooting Installation Issues

If you encounter dependency conflicts or peer dependency errors while running the above command, try installing with the --legacy-peer-deps flag:

npm install --save-dev --legacy-peer-deps eslint @eslint/compat @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-next eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-simple-import-sort eslint-plugin-unicorn husky lint-staged prettier prettier-plugin-tailwindcss

This forces npm to ignore strict peer dependency requirements, which can sometimes resolve version conflicts. If the issue persists, consider using npm update or checking for specific version mismatches. 🚀

🛠️ Step 2: Configuring ESLint

Create a file named eslint.config.mjs in the root of your project and paste the following code.

This ESLint configuration is designed to enforce best practices, maintain consistent coding styles, and enhance code readability. Feel free to tweak it to fit your project's specific requirements.

import path from "node:path";
import { fileURLToPath } from "node:url";

import { fixupConfigRules } from "@eslint/compat";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import typescriptEslintPlugin from "@typescript-eslint/eslint-plugin";
import typescriptEslintParser from "@typescript-eslint/parser";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import unicornPlugin from "eslint-plugin-unicorn";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

const eslintConfig = [
  // Extending recommended ESLint configurations
  ...fixupConfigRules(
    compat.extends(
      "next/core-web-vitals",
      "plugin:import/recommended",
      "plugin:prettier/recommended",
    ),
  ),
  {
    // Registering plugins
    plugins: {
      "simple-import-sort": simpleImportSort,
      "@typescript-eslint": typescriptEslintPlugin,
      unicorn: unicornPlugin,
    },
    rules: {
      // Sorting imports automatically
      "simple-import-sort/exports": "error",
      "simple-import-sort/imports": "error",

      // Disabling certain unicorn rules that might be too restrictive
      "unicorn/no-array-callback-reference": "off",
      "unicorn/no-array-for-each": "off",
      "unicorn/no-array-reduce": "off",

      // Preventing overly strict abbreviation rules
      "unicorn/prevent-abbreviations": [
        "error",
        {
          allowList: {
            e2e: true,
          },
          replacements: {
            props: false,
            ref: false,
            params: false,
          },
        },
      ],
    },
  },
  {
    // TypeScript-specific settings
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: typescriptEslintParser,
      parserOptions: {
        project: "./tsconfig.json",
      },
    },
    rules: {
      "@typescript-eslint/no-unused-vars": "error",
      "@typescript-eslint/no-explicit-any": "warn",
      "unicorn/prefer-module": "off",
    },
  },
  {
    // JavaScript-specific settings
    files: ["**/*.js", "**/*.jsx"],
    rules: {
      "unicorn/prefer-module": "off",
    },
  },
];

export default eslintConfig;

🎨 Step 3: Configuring Prettier

Create a prettier.config.js file and paste this.

This Prettier configuration ensures consistent code formatting, improving readability and reducing unnecessary style debates in your team. Customize it as needed to fit your coding preferences.

module.exports = {
  arrowParens: "avoid", // Omit parentheses for single-parameter arrow functions
  bracketSameLine: false, // Keep closing brackets on a new line for JSX
  bracketSpacing: true, // Ensure spaces between brackets
  htmlWhitespaceSensitivity: "css", // Respect CSS for whitespace in HTML
  insertPragma: false,
  jsxSingleQuote: false, // Use double quotes in JSX
  plugins: ["prettier-plugin-tailwindcss"], // Enable Tailwind CSS formatting
  printWidth: 80, // Wrap lines at 80 characters for better readability
  proseWrap: "always",
  quoteProps: "as-needed", // Add quotes only when required
  requirePragma: false,
  semi: true, // Always use semicolons
  singleQuote: false, // Prefer double quotes
  tabWidth: 2, // Use 2 spaces per tab
  trailingComma: "all", // Use trailing commas where possible
  useTabs: false, // Use spaces instead of tabs
};

🔗 Step 4: Configuring Lint-Staged & Husky

Add the following to your package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "npx eslint ./src",
  "lint:fix": "npm run lint -- --fix",
  "format": "prettier . --check",
  "format:fix": "prettier . --write",
  "type-check": "tsc -b",
  "prepare": "husky",
  "lint-staged": "lint-staged"
},
"lint-staged": {
  "**/*": [
    "npm run format:fix",
    "npm run lint"
  ]
}

Now, let's set up a pre-commit hook using Husky:

npx husky init
echo "npm run lint-staged" > .husky/pre-commit

🎉 Conclusion

You now have a battle-hardened, enterprise-grade Next.js linting and formatting setup that will keep your code clean, maintainable, and bug-free! 🏆

🔥 Quick Recap of What We've Done:

Installed ESLint, Prettier, Lint-Staged, and Husky.
Configured ESLint with rules that enforce best practices.
Set up Prettier for consistent code formatting.
Integrated Lint-Staged to format and lint only staged files.
Configured Husky to enforce these checks before every commit.

🚀 With This Setup in Place:

No more accidental linting issues in production.
Your code is always formatted neatly.
Pre-commit hooks prevent bad commits.
Better collaboration and code consistency.

Whether you're working solo or in a team, this setup will help you stay productive and focus on building amazing features without worrying about messy code! 🚀

Tired of Confusing Commits? Here’s How to Fix Them with Commitlint!🚀

Aman Sahu — Thu, 13 Mar 2025 01:10:53 +0000

⚡Introduction

Let's be honest, we've all seen some downright tragic commit messages. From the dreaded fixed stuff (fixed what, exactly?) to the ever-mysterious WIP (which stays WIP forever), our commit history can sometimes resemble an ancient scroll of cryptic riddles. But fear not! Enter Commitlint – the superhero we need to stop our commit logs from looking like they were written by a sleep-deprived raccoon.

In this guide, I'll walk you through setting up Commitlint in your project, ensuring that every commit follows a structured format. We'll also integrate it with Husky to prevent bad commits from even happening in the first place.

So, let's dive in and clean up our commit history once and for all!

Why Use Commitlint?

🚀 Better Readability

A structured commit message makes it easier to understand what changed and why without decoding cryptic messages.

🔍 Easy Filtering

When using conventional commit formats, filtering commits via git log or tools like standard-version becomes a breeze.

🤖 Automate Changelog Generation

Tools like semantic-release can automatically generate changelogs, version numbers, and even publish releases based on commit messages.

✅ Enforcing Standards

Having rules in place ensures that everyone in the team follows the same commit conventions, reducing confusion.

🛠️ Step 1: Install Commitlint

Time to get our hands dirty. First, install Commitlint in your project:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

This installs Commitlint along with a conventional config that follows Conventional Commits.

🛠️ Step 2: Configure Commitlint

Next, we need to create a configuration file for Commitlint.

Create a commitlint.config.js file in the root of your project and add the following rules:

module.exports = {
  extends: ["@commitlint/config-conventional"],

  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat", // new feature
        "fix", // bug fix
        "docs", // documentation changes
        "style", // code style changes (e.g., formatting)
        "refactor", // code changes that neither fix a bug nor add a feature
        "perf", // performance improvements
        "test", // adding tests
        "chore", // updates to build tools, documentation, etc.
        "ci", // CI related changes
        "build", // changes related to build system or external dependencies
        "revert", // revert a previous commit
        "hotfix", // urgent fixes
      ],
    ],
    "scope-enum": [
      2,
      "always",
      [
        "deps", // dependencies
        "config", // configuration files
        "ui", // user interface related changes
        "backend", // backend related changes
        "frontend", // frontend related changes
        "docs", // documentation related changes
        "build", // build system changes
        "ci", // continuous integration changes
        "tests", // testing related changes
        "release", // release related changes
      ],
    ],
    "subject-case": [2, "always", "lower-case"],
    "header-max-length": [2, "always", 72],
    "footer-max-line-length": [2, "always", 100],
    "body-max-line-length": [2, "always", 100],
  },
};

With this setup, only properly formatted commits will be accepted. This is the config file that I usually prefer, but feel free to tweak it to match your project's needs because let’s be real, one size rarely fits all! 😉

🛠️ Step 3: Add a Commit Hook with Husky

Now, we need to enforce our commit rules. Because let's be honest, rules are pointless if nobody follows them, right? 😆

Install Husky

npm install --save-dev husky

Initialize Husky

npx husky init

This will create a .husky/ directory in your project.

Add a Commitlint Hook

Run the following command to add a commit message hook:

echo "npx --no -- commitlint --edit $1" > .husky/commit-msg

This ensures that every commit message goes through Commitlint before being committed.

🛠️ Step 4: Test Your Setup

Now that we've set up Commitlint and Husky, it's time to test it!

Try committing something incorrectly:

git commit -m "updated stuff"

Boom! You should see an error message telling you that this commit message does not follow the rules. 🎉

Now try committing correctly:

git commit -m "feat(ui): add dark mode support"

Success! You've now enforced structured commit messages in your project. 🏆

🎉 Conclusion

Congratulations! You've successfully set up Commitlint and Husky in your project. Now your commit messages will always be structured and meaningful. 🎯

No more "oops, forgot to mention this" commits!

To recap, we:

Installed Commitlint & Husky
Configured Commitlint rules
Added a Husky hook to enforce rules
Tested the setup
Optionally added lint-staged for better code quality

Now go forth and commit responsibly! 🚀 Happy coding! 😃

DEV Community: Aman Sahu

The Crumb Trail: Managing Cookies in Next.js🍪

🧐 Why Bother With Proper Cookie Management?

🛠️ The Building Blocks

lib/cookies.ts - The Core Utility

hooks/use-cookies.ts - The React Hook

🍪 Setting Cookies Like a Pro

🔍 Cookie Inspection Made Easy

🗑️ Deleting Cookies Properly

🌐 Real-World Use Cases

1. Authentication Flow 🔐

2. User Preferences ⚙️

3. GDPR Consent 🏛️

🚀 Advanced Features

Cross-Tab Synchronization

Object Storage

📝 Troubleshooting Tips

How do you serve media files correctly in Docker with Next.js and Nginx!?🛠️🖼️

🧩 The Problem: Images Playing Hide & Seek

🔍 So... What Was Going Wrong?

🧪 The "Aha!" Moment (a.k.a. My DIY Proxy Fix)

The Plan

🛠️ The Solution (Step-by-Step)

1. Update Your .env

2. Update Your config.ts

3. Build the ProxyImage Component

4. Allow External Image Domains in next.config.js

✅ Why This Worked For Me

✨ Bonus Thoughts

🚀 TL;DR

Mastering Code Quality: Setting Up ESLint, Prettier, Lint-Staged & Husky for Next.js 15 Like a Pro!🚀

🎯 Introduction

⚡ Step 1: Installing Dependencies

Troubleshooting Installation Issues

🛠️ Step 2: Configuring ESLint

🎨 Step 3: Configuring Prettier

🔗 Step 4: Configuring Lint-Staged & Husky

🎉 Conclusion

🔥 Quick Recap of What We've Done:

🚀 With This Setup in Place:

Tired of Confusing Commits? Here’s How to Fix Them with Commitlint!🚀

⚡Introduction

Why Use Commitlint?

🚀 Better Readability

🔍 Easy Filtering

🤖 Automate Changelog Generation

✅ Enforcing Standards

🛠️ Step 1: Install Commitlint

🛠️ Step 2: Configure Commitlint

🛠️ Step 3: Add a Commit Hook with Husky

Install Husky

Initialize Husky

Add a Commitlint Hook

🛠️ Step 4: Test Your Setup

🎉 Conclusion

`lib/cookies.ts` - The Core Utility

`hooks/use-cookies.ts` - The React Hook

1. Update Your `.env`

2. Update Your `config.ts`

3. Build the `ProxyImage` Component

4. Allow External Image Domains in `next.config.js`