Forem: Arfatur Rahman

How I Finally Forced LLMs to Return Perfect JSON (2025 Edition) — No Hacks, No Regex, Just Clean Output

Arfatur Rahman — Wed, 03 Dec 2025 18:39:23 +0000

If you’ve ever worked with LLMs in real applications — especially with LangChain + TypeScript — you probably know the frustration:

Broken JSON
Extra text wrapped around JSON
Random “creative” outputs
Parsers blowing up in production

I’ve personally gone through it all.
As someone who builds AI apps, RAG chatbots, and SaaS platforms using Next.js, LangChain, Supabase Vector Store, Pusher, and more — I tried every prompt trick to force LLMs to follow a strict JSON structure.

I told the model:

“Return valid JSON only.”

I added strict instructions.
I wrapped the prompt with do’s/don’ts.
I used regex cleanups.
I even attempted post-processing pipelines.

Nothing worked reliably.
Because the truth is simple:

Prompts alone can never guarantee valid JSON.

LLMs aren’t designed to obey formatting rules consistently.
But in 2025, the solution finally became production-ready:

The Fix: LangChain `.withStructuredOutput()` + Zod

This combination forces the model to return:

100% valid JSON
Fully typed data
Schema-safe responses
No extra text
No formatting issues

And the best part?
It works with:

Google Gemini
OpenAI (GPT-4o, o-mini)
Groq (Llama 3.1)
Anthropic Claude

What You’ll Learn in My Guide

👉 How .withStructuredOutput() works internally
👉 Step-by-step Next.js 16 + TypeScript implementation
👉 API route with proper error handling
👉 Zod schema for strict output validation
👉 Clean UI example using shadcn/ui
👉 Why this method is faster, cheaper & more reliable than old hacks

This guide is for anyone building AI-powered apps — chatbots, agents, extractors, RAG systems — where structure matters.

Read the full guide:
🔗 How to Force Perfect JSON Responses in LangChain with TypeScript (2025 Edition)

About the Author

Arfatur Rahman — Full Stack Developer from Chittagong, Bangladesh.
I build AI-powered applications using Next.js, TypeScript, LangChain, Supabase, Pusher, and Google Gemini.
I specialize in RAG systems, real-time AI chat widgets, and full SaaS platforms.

Follow me for more guides on AI, LangChain, and modern web development.

Why LangChain Is Better Than Raw LLM APIs — A Quick Developer-Friendly Breakdown

Arfatur Rahman — Sun, 30 Nov 2025 14:47:32 +0000

Building with OpenAI, Gemini, or Groq directly is great for simple prototypes — but once your app grows, managing raw APIs quickly becomes a bottleneck. Different request bodies, different response formats, custom types, boilerplate everywhere… and switching providers becomes a headache.

That’s exactly where LangChain changes the game

Why Raw LLM APIs Hold You Back

Here’s what developers run into when handling multiple providers manually:

Every provider uses different request/response structures
You constantly rewrite TypeScript interfaces
Fetch wrappers, headers, parsing logic, error handling — repeated everywhere
Switching models means updating half your code
Scaling becomes harder when you add RAG, embeddings, agents, memory, etc.

Great for “Hello world,” painful for real applications.

Why LangChain Makes Development 10× Easier

LangChain gives you:

1. A Unified Interface for Every LLM

Call OpenAI, Gemini, Groq, Mistral — all with the same syntax.

2. Much Less Boilerplate

No fetching, no headers, no JSON parsing — just .invoke().

3. Lightning-Fast Provider Switching

Change one line to switch between LLMs.

4. Built-In RAG, Agents, Tools, Memory

No need to build your own retrieval pipelines from scratch.

5. A Scalable, Clean Codebase

Perfect for production apps, multi-LLM systems, or long-term maintenance.

See the Full Article (With Real Code Examples)

I compare full raw API code for OpenAI, Gemini, and Groq, then show the LangChain equivalents side-by-side.

👉 Read the full article here:

https://www.arfat.app/blogs/why-use-langchain-over-raw-llm-apis--a-developers-guide-with-real-code-examples

About the Author – Arfatur Rahman

Software Developer • AI & RAG Engineer • JavaScript, TypeScript & Next.js Specialist

Based in Chittagong, Bangladesh, I build modern full-stack applications focusing on AI-powered systems, RAG pipelines, and scalable JavaScript architectures.

I’ve worked across SaaS platforms, chatbot systems, custom dashboards, and production-ready LLM integrations using:

LangChainJS, OpenAI, Gemini, Groq, Azure AI
Next.js, React, Node.js, PostgreSQL, MongoDB, Supabase
Stripe, Bkash, Auth.js, Prisma, Zustand

My recent work includes building:

RAG-based SaaS chatbots trained on user-uploaded data
AI-powered personal portfolio assistant with real-time embeddings
Full-stack dashboard systems with real-time updates and LLM integration

📬 Connect With Me

LinkedIn: Arfautur Rahman

**GitHub:** Arfatur Rahman

Portfolio: Arfatur Rahman

Dev.to: Arfatur Rahman

Medium: Arfatur Rahman

Email: arfatrahman08@gmail.com

Building a TypeScript Express API for Vercel Deployment: A Step-by-Step Guide

Arfatur Rahman — Mon, 25 Aug 2025 17:48:04 +0000

Learn how to create a type-safe REST API with Express and TypeScript, configured for seamless Vercel deployment. This comprehensive guide covers project setup, TypeScript configuration, API development, and deployment best practices.

Introduction

In this guide, we’ll walk through building a simple REST API using Express with TypeScript, designed for easy deployment to Vercel. The API will manage a collection of blog posts stored in memory and include endpoints to create and retrieve posts. We’ll ensure type safety, configure environment variables, and follow modern backend development practices to create a scalable and maintainable project.

This tutorial is perfect for developers looking to:

Build a REST API with TypeScript and Express
Ensure type safety for robust code
Deploy a Node.js application to Vercel
Understand modern backend development workflows

The API includes the following features:

Type safety with TypeScript interfaces
Environment variable configuration
Proper project structure for scalability
Development tooling for a smooth workflow
Vercel deployment configuration

Project Setup

1. Initialize Node.js Project

Start by creating a new Node.js project:

npm init -y && npm pkg set name="arfat.app" description="TypeScript Express API" author="Arfatur Rahman"

This creates a package.json file with default values, setting the project name, description, and author.

2. Install Runtime Dependencies

Install the necessary runtime dependencies:

npm i express cors axios body-parser dotenv

express: Web framework for Node.js
cors: Middleware for enabling CORS
axios: HTTP client for making requests
body-parser: Middleware for parsing request bodies
dotenv: Loads environment variables from a .env file

3. Install Development Dependencies

Add development dependencies for TypeScript and tooling:

npm i -D typescript ts-node-dev nodemon @types/express @types/node @types/cors

typescript: TypeScript compiler
ts-node-dev: Runs TypeScript files with hot reload
nodemon: Watches for file changes and restarts the server
@types/express: Type definitions for Express
@types/node: Type definitions for Node.js
@types/cors: Type definitions for CORS

4. Initialize TypeScript Configuration

Generate a tsconfig.json file to configure TypeScript:

npx tsc --init --rootDir src --outDir dist

This sets the source files in the src directory and compiled output in the dist directory.

Project Structure

Here’s the recommended project structure:

project-root/
├── src/
│   └── index.ts        # Main application file
├── .env                # Environment variables
├── .gitignore          # Files to ignore in Git
├── package.json        # Project configuration
├── tsconfig.json       # TypeScript configuration
└── vercel.json         # Vercel deployment configuration

Key Files Explained

1. `tsconfig.json`

The tsconfig.json file configures the TypeScript compiler:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Key settings:

target: Compiles to ES2016 for modern JavaScript features
module: Uses CommonJS for Node.js compatibility
rootDir: Specifies src as the source directory
outDir: Outputs compiled JavaScript to dist
strict: Enables strict type checking for robust code
esModuleInterop: Ensures compatibility with CommonJS modules

2. `package.json` Scripts

Update the scripts section in package.json to include:

{
  "scripts": {
    "dev": "ts-node-dev --respawn --transpile-only --exit-child src/index.ts"
  }
}

The dev script runs the server in development mode with hot reloading and faster compilation.

3. `src/index.ts`

The main application file sets up the Express server and defines the API:

import express, { Request, Response, Application } from "express";
import { randomBytes } from "crypto";
import bodyParser from "body-parser";
import dotenv from "dotenv";
import cors from "cors";

// Configuration
dotenv.config();
const PORT = process.env.PORT || 4000;

// Types
interface Post {
  id: string;
  title: string;
}

interface Posts {
  [key: string]: Post;
}

// App State
const posts: Posts = {};

// Express App Setup
const app: Application = express();
app.use(bodyParser.json());
app.use(cors());

// Helper Functions
const generateId = (): string => randomBytes(4).toString("hex");

// Controllers
const getRoot = (req: Request, res: Response) => {
  res.send("Assalamualikum");
};

const getAllPosts = (req: Request, res: Response) => {
  res.json(posts);
};

const createPost = (req: Request, res: Response) => {
  const id = generateId();
  const { title } = req.body;

  if (!title) {
    res.status(400).json({ error: "Title is required" });
    return;
  }

  posts[id] = { id, title };
  res.status(201).json(posts[id]);
};

// Routes
app.get("/", getRoot);
app.get("/posts", getAllPosts);
app.post("/posts", createPost);

// Server Initialization
const startServer = async (): Promise<void> => {
  try {
    app.listen(PORT, () => {
      console.log(`Server is running on port: ${PORT}`);
    });
  } catch (error) {
    console.error(`Failed to start server: ${error}`);
    process.exit(1);
  }
};

startServer();

This file includes:

Configuration: Loads environment variables and sets the default port
Types: Defines Post and Posts interfaces for type safety
State: Uses an in-memory object to store posts
Express Setup: Configures middleware for JSON parsing and CORS
Routes: Defines endpoints for the root, retrieving posts, and creating posts
Server Initialization: Starts the server with error handling

4. `vercel.json`

The vercel.json file configures Vercel deployment:

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

This configuration:

Specifies src/index.ts as the entry point
Uses the @vercel/node builder for Node.js apps
Routes all requests to the Express app

5. `.env` and `.gitignore`

Create a .env file for environment variables:

PORT=4000

Create a .gitignore file to exclude sensitive files:

.env
node_modules

You can automate this with:

echo -e 'PORT=4000' > .env && echo -e '.env\nnode_modules' > .gitignore

Development Workflow

Create Configuration Files:
- Set up .env and .gitignore as shown above.
Start the Development Server:
```
npm run dev
```
The server will:

- Run on the specified port (default: 4000)
- Automatically restart on file changes
- Log activity to the console

Deploying to Vercel

1. Install Vercel CLI

Install the Vercel CLI globally:

npm i -g vercel

2. Verify Installation

Check the Vercel CLI version:

npx vercel --version

3. Log in to Vercel

Authenticate with Vercel:

npx vercel login

4. Deploy the Application

For a preview deployment:

npx vercel

For a production deployment:

npx vercel --prod

API Endpoints

GET `/`

Description: Returns a welcome message
Response: "Assalamualikum"

GET `/posts`

Description: Retrieves all posts
Response: JSON object containing all posts

POST `/posts`

Description: Creates a new post
Body: { "title": "Post Title" }
Response: JSON object of the created post with a generated ID
Error: Returns 400 if title is missing

Type Safety

TypeScript interfaces ensure type safety:

interface Post {
  id: string;
  title: string;
}

interface Posts {
  [key: string]: Post;
}

Benefits include:

Autocompletion in IDEs
Compile-time type checking to catch errors early
Clear documentation of data structures

Why Use TypeScript with Express?

Using TypeScript with Express provides:

Type Safety: Prevents runtime errors by catching type issues during compilation
Improved Developer Experience: Autocompletion and IntelliSense in IDEs
Scalability: Easier to maintain and extend as the codebase grows
Better Refactoring: Type checking ensures safe code changes

Conclusion

This guide demonstrated how to build a type-safe REST API using Express and TypeScript, configured for deployment to Vercel. By following modern backend development practices, including proper project structure, TypeScript configuration, and environment variable management, you can create a robust and scalable API. Deploying to Vercel ensures your API is accessible globally with minimal setup.

Try building this API and deploying it yourself! For more advanced features, consider adding:

A database (e.g., Supabase or MongoDB) for persistent storage
Authentication middleware
Request validation with libraries like Joi or zod
API documentation with Swagger

About the Author

Hi, I’m Arfatur Rahman, a Full-Stack Developer from Chittagong, Bangladesh, specializing in AI-powered applications, RAG-based chatbots, and scalable web platforms. I’ve worked with tools like Next.js, LangChain, OpenAI, Azure, and Supabase, building everything from real-time dashboards to SaaS products with payment integration. Passionate about web development, vector databases, and AI integration, I enjoy sharing what I learn through writing and open-source work.

Connect with me:

🌐 Portfolio
💼 LinkedIn
👨‍💻 GitHub
✍️ Dev.to
📚 Medium

How to Install and Configure Elasticsearch on Windows

Arfatur Rahman — Sat, 02 Aug 2025 17:28:43 +0000

Elasticsearch is a robust, open-source search and analytics engine ideal for log analytics, full-text search, and large-scale data processing. This comprehensive guide walks you through installing, configuring, and running a single-node Elasticsearch instance on Windows, including setting it up as a Windows service, resetting passwords, and optimizing configurations for performance and security. This tutorial is designed for both beginners and experienced developers.

Prerequisites

Before starting, ensure you have:

A Windows machine (Windows 10 or later recommended).
Administrative access for installing services and modifying system files.
A web browser to validate the Elasticsearch instance.
Basic knowledge of Command Prompt or PowerShell.
(Optional) Java Development Kit (JDK) if using a version of Elasticsearch that doesn’t bundle OpenJDK (versions 8.x and later typically include it).

Step 1: Download and Install Elasticsearch

Download Elasticsearch

Visit the official Elasticsearch downloads page and download the latest Windows ZIP file (e.g., elasticsearch-9.x.x-windows-x86_64.zip).
Unzip the File

Extract the ZIP file to the root of your C: drive (e.g., C:\elasticsearch-9.x.x) for simplicity. You can use tools like WinRAR, 7-Zip, or Windows’ built-in extraction feature.

Example Path: C:\elasticsearch-9.x.x

Step 2: Run Elasticsearch

Navigate to the Elasticsearch Directory

Open a Command Prompt or PowerShell with administrative privileges and navigate to the bin directory:
```
cd C:\elasticsearch-9.x.x\bin
```
Run Elasticsearch

Start Elasticsearch by running:
```
elasticsearch.bat
```
The terminal will display startup logs. Look for a message indicating that Elasticsearch has started, along with the default password for the elastic user, such as:
```
[INFO] Elasticsearch started
The generated password for the elastic built-in superuser is: nuIwMi9fI8T3BYH_u3mI
```
Save this password for authentication.

Note: Closing the terminal will stop Elasticsearch. To avoid this, consider running it as a Windows service (covered in Step 4).

Step 3: Reset the Elastic User Password

To secure your Elasticsearch instance, reset the default elastic user password:

Ensure the Elasticsearch server is running.
Open a new Command Prompt or PowerShell and navigate to the bin directory:
```
cd C:\elasticsearch-9.x.x\bin
```

Run the password reset command:

elasticsearch-reset-password -i -u elastic

When prompted, press y to confirm, then enter and re-enter your new password:

This tool will reset the password of the [elastic] user to an autogenerated value.
Proceed? [y/N] y
Enter new password: ********
Re-enter new password: ********
Password for the [elastic] user successfully reset.
New password: new_password_here

Save the new password for future use.

Step 4: Install Elasticsearch as a Windows Service

Running Elasticsearch as a Windows service ensures it starts automatically with your system and operates in the background without a persistent terminal.

Pros of Running as a Service

✅ Automatic Startup: Launches with Windows boot.
✅ Background Operation: No need for an open Command Prompt.
✅ Centralized Management: Control via Windows Services Manager (services.msc) or PowerShell.
✅ Production-Ready: Ideal for continuous operation.
✅ Integrated Logging: Logs are stored in the Windows Event Log for easy monitoring.

Cons of Running as a Service

❌ Setup Complexity: Requires configuring Java paths and permissions.
❌ Permission Issues: The default LocalSystem account may face access issues if directories aren’t configured properly.
❌ Debugging Challenges: Errors appear in the Windows Event Log, not the console.
❌ Service Management: Updates require stopping and restarting the service.
❌ Memory Configuration: JVM heap settings must be pre-configured.

Steps to Install

Navigate to the bin directory:
```
cd C:\elasticsearch-9.x.x\bin
```
Install the service:
```
elasticsearch-service.bat install
```
A confirmation message will indicate successful installation.
Manage the Service:
- Start the Service:
```
elasticsearch-service.bat start
```

- **Stop the Service**:

    ```bash
    elasticsearch-service.bat stop

    ```

- **Open Service Manager GUI**:
This opens a GUI to start, stop, or configure the service.

    ```bash
    elasticsearch-service.bat manager

    ```

- **Remove the Service** (if needed):

    ```bash
    elasticsearch-service.bat remove

    ```

Verify Installation:
- Press Win + R, type services.msc, and press Enter.
- Locate the Elasticsearch service and check its status (e.g., Running or Stopped).

Step 5: Configure Elasticsearch

Customize Elasticsearch settings by editing the elasticsearch.yml file in the config directory (e.g., C:\elasticsearch-9.x.x\config\elasticsearch.yml).

1. Change Data Storage Path

By default, Elasticsearch stores data in the data folder within its installation directory. To customize:

path.data: ["C:\\elasticsearch-9.x.x\\data", "D:\\elastic_data"]

Specify one or multiple paths for data storage.
Ensure the directories exist and are writable.
Remove any # before path.data to enable the setting.

2. Set Memory Limits

Elasticsearch’s default memory allocation (1 GB) may be insufficient for large datasets or multiple queries. To adjust:

Navigate to the bin directory:
```
cd C:\elasticsearch-9.x.x\bin
```
Open the service manager:
```
elasticsearch-service.bat manager
```
In the GUI, go to the Java tab and set the Initial Memory Pool and Maximum Memory Pool to higher values (e.g., 10240 MB for 10 GB).

3. Disable HTTPS (Optional)

Elasticsearch uses HTTPS by default. To switch to HTTP for local testing:

xpack.security.http.ssl:
  enabled: false

Access Elasticsearch via http://localhost:9200/ after disabling SSL.

4. Restrict Remote Access (Optional)

Control who can access your Elasticsearch instance:

http.host: 127.0.0.1

127.0.0.1: Restricts access to localhost.
0.0.0.0: Allows access from any IP (use cautiously in production).
Specify a LAN IP (e.g., 192.168.1.100) to limit access to a specific network.

5. Change the Default Port (Optional)

Elasticsearch uses port 9200 by default. To change it:

http.port: 9200

Replace 9200 with your desired port.

6. Apply Changes

After editing elasticsearch.yml, save the file and restart the service:

elasticsearch-service.bat stop
elasticsearch-service.bat start

Step 6: Validate Elasticsearch

To confirm Elasticsearch is running:

Open a web browser and navigate to https://localhost:9200/ (or http://localhost:9200/ if HTTPS is disabled).
Enter the credentials:
- Username: elastic
- Password: The password from Step 2 or the reset password from Step 3.

A JSON response should appear, confirming the server is running:

{
  "name": "your-node-name",
  "cluster_name": "elasticsearch",
  "version": {
    "number": "9.x.x",
    ...
  },
  ...
}

If you see certificate warnings, this is normal for local HTTPS setups. Accept the warning or disable HTTPS as described above.

Conclusion

You’ve successfully installed, configured, and validated a single-node Elasticsearch instance on Windows! By running it as a service, resetting the elastic user password, and optimizing settings like data paths and memory limits, you’ve set up a robust environment for search and analytics. For advanced configurations, refer to the official Elasticsearch documentation.

For a visual guide, check out this video tutorial (replace with the actual link if available).

About the Author

Connect with me:

🌐 Portfolio

💼 LinkedIn

👨‍💻 GitHub

✍️ Dev.to

📚 Medium

Parallel vs Sequential Data Fetching in Next.js 15 with TypeScript

Arfatur Rahman — Mon, 30 Jun 2025 12:58:48 +0000

Introduction

Data fetching is central to modern web development, especially in performance-critical applications. With the release of Next.js 15, developers can take full advantage of server components and advanced data-fetching patterns like sequential and parallel fetching to streamline performance and user experience.

This article explores both patterns with real-world examples, TypeScript usage, and analysis of when to use each approach.

What is Sequential Data Fetching?

Sequential fetching refers to fetching data one after another, where each fetch waits for the previous one to complete. This is helpful when the second dataset depends on the result of the first.

Example of Sequential Fetching in Next.js

This Next.js example showcases sequential data fetching: the page first loads all post titles, and then, for each individual post, an AuthorComponent is rendered. Crucially, each AuthorComponent introduces a simulated 3-second delay before fetching author details, and is wrapped in React's Suspense to display a "Loading author..." fallback. This results in a user experience where post titles appear quickly, followed by individual author placeholders that progressively resolve into names as each author's data (and the simulated delay) completes, providing a staggered loading effect.

// page.tsx
const PostSequential = async () => {
  const posts = await fetch(`https://jsonplaceholder.typicode.com/posts`).then(res => res.json());
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <Suspense fallback={<span>Loading author...</span>}>
            <AuthorComponent id={post.id} />
          </Suspense>
        </div>
      ))}
    </div>
  );
};

const AuthorComponent = async ({ id }: { id: number }) => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const user: UserProps = await fetch(
    `https://jsonplaceholder.typicode.com/users/${id}`
  ).then((res) => res.json());
  return <p className="text-sm text-gray-500 mt-4">Author: {user?.name}</p>;
};

✅ Advantages	❌ Disadvantages
🔄 Maintains dependency order	🐌 Slower overall loading times
🧩 Easier debugging for dependent logic	💧 Creates "waterfalls" in rendering
🧠 Ideal for conditional or step-wise fetching	😕 Poor user experience for independent data
🛠️ Better control over fetch flow and logic	📉 Inefficient resource usage (wasted wait time)
🔐 Useful when one fetch relies on previous data	📵 Can't leverage concurrent server resources
📋 Simplifies state tracking in some cases	🌀 Can lead to nested logic and complexity

Advantages of Sequential Fetching

Maintains dependency order
Easier debugging for dependent logic
Ideal for conditional fetching

Disadvantages of Sequential Fetching

Slower overall loading times
Creates waterfalls in rendering
Poor user experience for independent data

What is Parallel Data Fetching?

Parallel fetching initiates multiple data requests at the same time, improving performance by reducing wait times. Ideal for fetching independent data.

Example of Parallel Fetching in Next.js

In this example, the UserParallel server component demonstrates parallel data fetching by simultaneously initiating two asynchronous calls: getUserAlbums() and getUserPosts(), both of which include a simulated 3-second delay. Instead of waiting for each fetch sequentially (which would total ~6 seconds), the component uses Promise.all() to execute both functions in parallel, reducing the overall wait time to just ~3 seconds. This improves performance significantly, especially when fetching multiple independent resources. Once both promises resolve, the UI displays the albums and posts side-by-side in a responsive layout. This pattern is ideal when the fetched data is independent and can be rendered concurrently, ensuring better responsiveness and user experience.

import React from "react";

// Define the types for your data
type PostProps = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

type AlbumProps = {
  userId: number;
  id: number;
  title: string;
};

// Define the props for the UserParallel component
type UserParallelProps = {
  params: Promise<{ userId: string }>; // Assuming params is directly an object, common in Next.js
};

const UserParallel = async ({ params }: UserParallelProps) => {
  const { userId } = await params; // Access userId directly from params

  // Function to fetch user albums with proper URL and error handling
  const getUserAlbums = async (id: string): Promise<AlbumProps[]> => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/albums?userId=${id}`
      );
      if (!res.ok) {
        throw new Error(`Failed to fetch albums: ${res.statusText}`);
      }
      return res.json();
    } catch (error) {
      console.error("Error fetching albums:", error);
      return []; // Return an empty array on error
    }
  };

  // Function to fetch user posts with proper URL and error handling
  const getUserPosts = async (id: string): Promise<PostProps[]> => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/posts?userId=${id}`
      );
      if (!res.ok) {
        throw new Error(`Failed to fetch posts: ${res.statusText}`);
      }
      return res.json();
    } catch (error) {
      console.error("Error fetching posts:", error);
      return []; // Return an empty array on error
    }
  };

  // Initiate both fetch calls in parallel
  const albumDataPromise = getUserAlbums(userId);
  const postsDataPromise = getUserPosts(userId);

  // Wait for both promises to resolve
  const [albums, posts] = await Promise.all([
    albumDataPromise,
    postsDataPromise,
  ]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
      <div className="bg-gray-100 p-4 rounded-lg shadow-md">
        <h2 className="text-2xl font-bold mb-4">Albums</h2>
        {albums.length > 0 ? (
          <ul>
            {albums.map((album) => (
              <li key={album.id} className="mb-2 p-2 bg-white rounded-md">
                <p className="font-semibold">{album.title}</p>
              </li>
            ))}
          </ul>
        ) : (
          <p>No albums found for this user.</p>
        )}
      </div>

      <div className="bg-gray-100 p-4 rounded-lg shadow-md">
        <h2 className="text-2xl font-bold mb-4">Posts</h2>
        {posts.length > 0 ? (
          <ul>
            {posts.map((post) => (
              <li key={post.id} className="mb-2 p-2 bg-white rounded-md">
                <h3 className="text-lg font-semibold">{post.title}</h3>
                <p className="text-sm text-gray-700">{post.body}</p>
              </li>
            ))}
          </ul>
        ) : (
          <p>No posts found for this user.</p>
        )}
      </div>
    </div>
  );
};

export default UserParallel;

✅ Advantages	❌ Disadvantages
⚡ Faster overall data retrieval	🔁 Harder to manage data dependencies
⏱️ Reduced latency leads to better user experience	📦 Cannot conditionally skip unnecessary fetches
🧠 Ideal for independent or unrelated datasets	🧩 More complex error handling and coordination
🛠️ Utilizes server resources efficiently	🔐 Race conditions possible without proper guards
🚀 Enables true concurrent rendering with `<Suspense>`	🧪 Testing and debugging can be more difficult
📊 Improves perceived performance (UI loads quicker)	🕵️ Harder to trace fetch flow in deeply nested trees

Advantages of Parallel Fetching

Faster overall data retrieval
Reduced latency and better UX
Best for independent datasets

Disadvantages of Parallel Fetching

Harder to manage dependencies
Cannot conditionally skip unnecessary fetches

Key Differences Table

🧩 Feature	🔄 Sequential Fetching	⚡ Parallel Fetching
Execution Order	One-by-one, in strict sequence	Simultaneous, non-blocking
Performance	Slower overall, due to request chaining	Faster, better utilization of async behavior
Use Case	When later data depends on earlier fetches	When fetches are independent
Logic Simplicity	Easier to understand and debug	Slightly more complex (due to `Promise.all`, race conditions)
Error Handling	Easier to isolate and handle errors	Needs grouped or coordinated error strategies
UX Impact	Slower perceived loading, especially with nested fetches	Snappier UI, especially for rendering sections independently
Server Resource Utilization	Less efficient, uses time serially	More efficient, uses resources concurrently
Conditional Fetch Support	Excellent, supports if-else/early returns	Limited, harder to cancel or skip once started
Suitability with `<Suspense>`	Works well for step-by-step reveals	Ideal for loading independent UI chunks in parallel
Scalability for Large Pages	May become bottlenecked with many dependent calls	Scales better with many independent calls

Best Practices from Official Docs

From the Next.js documentation:

Use server components for secure, backend-close data fetching.
Memoized fetch ensures no redundant calls.
Leverage Suspense for lazy-loading nested data.
Consider loading.js or Promise.all() for optimal UX.

Real-World Use Cases

Sequential Use Case

A user profile page where the second API call depends on the user ID fetched from the first call.

Parallel Use Case

A dashboard showing metrics, charts, and notifications from multiple endpoints.

Performance Considerations

Always prefer parallel fetching for independent data.
Use cache() and preload patterns when possible.
Combine Suspense and server components for fine-grained control.

When to Use Which?

Use sequential when:

There is a data dependency chain.
You want to avoid redundant calls.

Use parallel when:

Fetching unrelated data.
You aim for fast, efficient rendering.

Conclusion

Understanding the trade-offs between sequential and parallel data fetching in Next.js 15 can greatly impact application performance and user experience. By identifying dependencies and structuring fetch logic accordingly, you ensure optimal rendering and responsiveness.

FAQs

Q1: Can I mix sequential and parallel fetching in the same component?
Yes. You can initiate some fetches in parallel and others sequentially based on dependencies.

Q2: Does fetch() in Next.js automatically cache data?
Yes. In server components, fetch is memoized and reused to prevent redundant requests.

Q3: How does Suspense help in sequential fetching?
It allows streaming parts of the UI while waiting for slower components to resolve data.

Q4: Are these patterns only for server components?
They work best in server components, but client components can also use similar patterns with client libraries.

Q5: Is Promise.all safe for all cases in parallel fetching?
Only if the fetches are independent. Otherwise, it can cause errors or wasted resources.

About the Author

Connect with me:

🌐 Portfolio

💼 LinkedIn

👨‍💻 GitHub

✍️ Dev.to

📚 Medium

Generating dynamic robots.txt and sitemap.xml in a Next.js App Router with TypeScript

Arfatur Rahman — Fri, 14 Mar 2025 20:58:37 +0000

Introduction

In modern web development, ensuring search engines properly index and crawl your website is crucial for SEO and visibility. Two essential files that help with this are sitemap.xml and robots.txt. If you're using Next.js with the App Router and TypeScript, you can dynamically generate these files to keep them updated as your content changes. In this guide, we'll walk through how to generate sitemap.xml and robots.txt in a Next.js project, why they are necessary, and how they improve your website's SEO.

What is a Sitemap?

A sitemap is an XML file that lists all the URLs of a website, providing search engines with a structured map of the site's content. This helps search engines like Google and Bing efficiently crawl and index pages, ensuring they appear in search results.

Why is a Sitemap Required?

Better Indexing: It ensures that search engines discover all important pages, even if they are not linked properly.
Faster Crawling: A sitemap helps search engines prioritize and crawl new or updated content quickly.
SEO Improvement: Providing metadata such as change frequency and priority helps search engines understand your content better.

Generating `sitemap.xml` in Next.js

To dynamically generate a sitemap in a Next.js project using TypeScript, we use the MetadataRoute.Sitemap API. Below is a complete implementation:

import { db } from "@/lib/db";
import type { MetadataRoute } from "next";

export const revalidate = 60;

const getDynamicSitemaps = ({
  data,
  defaultRoute,
}: {
  data: { slug: string }[];
  defaultRoute: string;
}) => {
  return data.map((d) => ({
    url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${defaultRoute}/${d.slug}`,
    lastModified: new Date(),
    changeFrequency: "yearly" as const,
    priority: 1,
  }));
};

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const allBlogs = await db.blog.findMany();
  const allProjects = await db.project.findMany();
  const allProducts = await db.product.findMany();

  const blogSiteMap = getDynamicSitemaps({
    data: allBlogs,
    defaultRoute: "blogs",
  });
  const projectSitemaps = getDynamicSitemaps({
    data: allProjects,
    defaultRoute: "projects",
  });
  const shopSitemaps = getDynamicSitemaps({
    data: allProducts,
    defaultRoute: "shop",
  });

  return [
    {
      url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/`,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blogs`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
    ...blogSiteMap,
    ...shopSitemaps,
    ...projectSitemaps,
    {
      url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
  ];
}

For more details, refer to the Next.js sitemap documentation.

What is `robots.txt`?

The robots.txt file is a text file that tells search engine crawlers which pages or sections of a website they can or cannot access. This is important for managing how search engines interact with your site.

Why is `robots.txt` Required?

Control Crawling: Prevent search engines from indexing private or unnecessary pages.
Reduce Server Load: Block bots from crawling pages that do not need to be indexed.
Improve SEO: Ensure search engines focus on important content rather than unnecessary pages.

Generating `robots.txt` in Next.js

In Next.js, we can define a robots.ts file inside the app directory to generate robots.txt dynamically:

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/dashboard/",
    },
    sitemap: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/sitemap.xml`,
  };
}

For more details, refer to the Next.js robots.txt documentation.

Conclusion

Generating sitemap.xml and robots.txt dynamically in a Next.js app router setup with TypeScript is a great way to ensure your website is optimized for search engines. The sitemap helps search engines discover and index pages efficiently, while the robots.txt file controls crawler access to ensure proper SEO strategies. By implementing these files, you improve the discoverability, indexing, and performance of your website in search engine rankings.

Connect with Me

Mistral Basic AI Agent Using NextJS with TypeScript

Arfatur Rahman — Fri, 14 Mar 2025 13:52:30 +0000

In this tutorial, I will guide you step-by-step on how to use Mistral AI's powerful mistral-large-latest model to build a custom agent that can track and respond to payment statuses and transaction dates. This tutorial assumes you have a basic understanding of JavaScript, Next.js, and how to work with APIs. By the end of this guide, you will know how to create a responsive agent that integrates with real-time data fetching functions.

Prerequisites

Before you begin, make sure you have:

Basic knowledge of JavaScript, Node.js, and Next.js.
A Mistral AI account for API access.
Installed Next.js, Zod, and the Mistral client.

If you haven't installed these yet, you can do so by running:

npx create-next-app@latest arfat
cd arfat
npm i @mistralai/mistralai zod

Important links

https://docs.mistral.ai/getting-started/quickstart/ ⇒ Docs
https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.1 ⇒ Mistral in hugginface
https://docs.mistral.ai/api/#tag/chat/operation/chat_completion_v1_chat_completions_post ⇒ Chat completion
https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters-mistral-chat-completion.html ⇒ Chat completion
https://mistral.ai/en/products/la-plateforme#models ⇒ latest models
https://mistral.ai/en/news/mixtral-of-experts ⇒ choose model as you required
https://docs.mistral.ai/capabilities/embeddings/ ⇒ Embeddings

Get API key

https://auth.mistral.ai/ui/login ⇒ Sign in
Create workspace if you’re new user
Get Experimental Subscription
https://console.mistral.ai/api-keys ⇒ Get API keys from here

Mistral Free Tier Limitations

1 request per second: You can make one API request per second.
500,000 tokens per minute: The total number of tokens you can use in one minute.
1 billion tokens per month: The maximum token limit you can use in a month.

These limitations are important to keep in mind while developing, so you can optimize how frequently you call the API to avoid exceeding the free tier limits.

Schema and Input Validation

We'll begin by validating the user input to ensure that the data passed to the Mistral AI model is in the correct format. Using Zod for validation, here's how you can ensure that the input text is a non-empty string:

const inputSchema = z.object({
  inputText: z
    .string({
      invalid_type_error: "Input text must be a string", // Error message if the input is not a string
      required_error: "Input text is required", // Error message if the input is missing
    })
    .min(1, { message: "Input text cannot be empty" }), // Ensures the string is not empty
});

Defining Mistral Messages

To interact with Mistral AI, we need to define a message interface that structures the conversation. The messages will have different roles such as system, user, assistant, and tool.

export interface MistralMessage {
  role: "system" | "user" | "assistant" | "tool";
  content: string;
  name?: string; // Optional name field
  toolCallId?: string; // Optional name field
}

This allows Mistral AI to process incoming data and respond with human-like messages.

Setting Up the Mistral Client

Mistral's client is an interface that allows you to send requests to the API. You'll need to set up the Mistral client with your API key and initialize the client in your code:

import { Mistral } from "@mistralai/mistralai";

const apiKey = process.env.MISTRAL_API_KEY;
export const mistralClient = new Mistral({ apiKey: apiKey });

Fetching Payment Data: Creating Helper Functions

We'll simulate payment data for testing by creating a mock database. The transactionData array contains payment information, and we’ll use two functions to retrieve the payment status and date based on a transaction ID.

const transactionData = [
  {
    transaction_id: "T1001",
    customer_id: "C001",
    payment_amount: 125.5,
    payment_date: "2021-10-05",
    payment_status: "Paid",
  },
];

export function getPaymentStatus({ transactionId }: { transactionId: string }) {
  const transaction = transactionData.find(
    (row) => row.transaction_id === transactionId
  );
  if (transaction) return JSON.stringify({ status: transaction.payment_status });
  return JSON.stringify({ error: "Transaction ID not found." });
}

export function getPaymentDate({ transactionId }: { transactionId: string }) {
  const transaction = transactionData.find(
    (row) => row.transaction_id === transactionId
  );
  if (transaction) return JSON.stringify({ date: transaction.payment_date });
  return JSON.stringify({ error: "Transaction ID not found." });
}

These functions will serve as "tools" for the assistant to fetch the required payment data.

Mistral Tools: Connecting Functions with the AI Model

Mistral AI can call external functions (tools) to fetch data. Here, we define two tools: getPaymentStatus and getPaymentDate.

import { Tool } from "@mistralai/mistralai/models/components";

const mistralTools: Tool[] = [
  {
    type: "function",
    function: {
      name: "getPaymentStatus",
      description: "Get the payment status of a transaction",
      parameters: {
        type: "object",
        properties: {
          transactionId: {
            type: "string",
            description: "The transaction ID.",
          },
        },
        required: ["transactionId"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "getPaymentDate",
      description: "Get the payment date of a transaction",
      parameters: {
        type: "object",
        properties: {
          transactionId: {
            type: "string",
            description: "The transaction ID.",
          },
        },
        required: ["transactionId"],
      },
    },
  },
];

These tools will allow Mistral to call these functions when needed.

The Main POST Handler

In the main POST request handler, we process the user’s query and send it to Mistral AI. If Mistral determines that a tool is needed (e.g., to fetch the payment status or date), it will invoke the appropriate function.

export async function POST(request: Request) {
  try {
    const body = await request.json();
    const { inputText } = inputSchema.parse(body);

    const messages: MistralMessage[] = [
      { role: "system", content: "You are a friendly assistant" },
      { role: "user", content: inputText },
    ];

    const response = await mistralClient.chat.complete({
      model: "mistral-large-latest",
      messages,
      toolChoice: "any",
      tools: mistralTools,
      temperature: 0.7,
      responseFormat: { type: "text" },
    });

    if (response?.choices && response.choices[0]?.message?.role === "assistant") {
      if (response?.choices[0].finishReason === "stop") {
        return formatResponse(
          { finalAnswer: response?.choices[0].message.content, ...response },
          "Data fetched successfully"
        );
      }

      if (response?.choices[0]?.finishReason === "tool_calls") {
        const toolCalls = response.choices[0]?.message?.toolCalls;
        if (toolCalls && toolCalls.length > 0) {
          const functionName = toolCalls[0]?.function?.name as keyof typeof availableFunctions;
          const functionArgs = JSON.parse(toolCalls[0]?.function?.arguments as string);

          const functionResponse = availableFunctions[functionName](functionArgs);

          messages.push({
            role: "tool",
            name: functionName,
            content: functionResponse,
            toolCallId: toolCalls[0].id,
          });

          await delay(3000);

          const functionREs = await mistralClient.chat.complete({
            model: "mistral-large-latest",
            messages,
          });

          return formatResponse(functionREs, "Data fetched successfully");
        }
      }
    }
  } catch (error) {
    console.log("Error", { error });
    return routeErrorHandler(error);
  }
}

Tutorial: Streaming Responses in Next.js with function*, yield, and ReadableStream

Arfatur Rahman — Mon, 10 Mar 2025 17:48:39 +0000

In this tutorial, we’ll explore how to implement streaming responses in a Next.js application. We’ll use JavaScript generators (function* and yield) and the ReadableStream API to handle streaming data from a server to a client. This approach is particularly useful for scenarios like chatbots, real-time data updates, or any application where data is generated incrementally.

We’ll break down the concepts of function*, yield, and ReadableStream, and explain how they work together to enable streaming. By the end of this tutorial, you’ll have a clear understanding of how to implement streaming in your Next.js applications.

For more tutorials and updates, feel free to visit my personal portfolio arfat.app or check out my GitHub profile at https://github.com/arfat-xyz.

What is Streaming?

Streaming is a technique where data is sent in chunks (small pieces) from the server to the client, rather than sending the entire response at once. This is useful for:

Real-time updates: Sending data as it becomes available.
Large datasets: Avoiding memory issues by processing data incrementally.
Improved user experience: Providing immediate feedback to users.

In our example, we’ll stream responses from a chatbot API that generates text incrementally.

Key Concepts

1. **Generators (`function*`)**

Generators are special functions in JavaScript that can pause and resume their execution. They are defined using the function* syntax. When called, a generator returns an iterator, which can be used to control the execution of the function.

Why use generators?
- They allow you to produce a sequence of values over time.
- They are memory-efficient because they generate values on-demand.

Example:

function* simpleGenerator() {
  yield "Hello";
  yield "World";
}

const generator = simpleGenerator();
console.log(generator.next().value); // "Hello"
console.log(generator.next().value); // "World"

2. `yield`

The yield keyword is used inside a generator to pause the function and return a value. When the generator is resumed, it continues execution from where it was paused.

Why use yield?
- It allows you to produce values incrementally.
- It works seamlessly with iterators and asynchronous operations.

3. `ReadableStream`

The ReadableStream API is part of the Web Streams API, which provides a standard interface for streaming data. It allows you to read chunks of data as they become available.

Why use ReadableStream?
- It is designed for handling streaming data efficiently.
- It integrates well with modern web APIs like fetch.

Implementation: Streaming in Next.js

Let’s break down the implementation into two parts: the server-side API route and the client-side React hook.

Server-Side: API Route

The server-side code handles the streaming logic. It uses a generator (function*) to produce chunks of data and a ReadableStream to send those chunks to the client.

import { NextResponse } from "next/server";
import { routeErrorHandler } from "@/lib/api-response";
import { inputSchema } from "@/lib/zod-validation";
import { mistralClient } from "@/utils/mistal";
import { EventStream } from "@mistralai/mistralai/lib/event-streams";
import { CompletionEvent } from "@mistralai/mistralai/models/components";

export async function POST(request: Request) {
  try {
    // Parse the JSON request body
    const body = await request.json();
    // Validate the input using Zod schema
    const { inputText: content } = inputSchema.parse(body);

    // Request a streaming response from the Mistral API
    const chatResponse = await mistralClient.chat.stream({
      model: "mistral-large-latest",
      messages: [
        {
          role: "system",
          content: "You are a friendly cheese connoisseur. When asked about cheese, reply concisely and humorously.",
        },
        { role: "user", content }, // User's input
      ],
      temperature: 0.7, // Controls randomness in the response
      responseFormat: { type: "text" }, // Response format
    });

    // Convert the generator into a ReadableStream
    const stream = iteratorToStream(makeIterator(chatResponse));

    // Return the stream as a Next.js response
    return new NextResponse(stream, {
      headers: {
        "Content-Type": "text/plain", // Set the content type for the stream
      },
    });
  } catch (error) {
    // Handle errors and return a formatted error response
    console.log("Error", { error });
    return routeErrorHandler(error);
  }
}

// Generator function to produce chunks of data
async function* makeIterator(chatResponse: EventStream<CompletionEvent>) {
  const encoder = new TextEncoder(); // Encoder to convert strings to Uint8Array

  // Iterate over the streaming response
  for await (const chunk of chatResponse) {
    const newChunk = chunk?.data.choices[0].delta.content as string;
    yield encoder.encode(newChunk); // Yield each chunk as a Uint8Array
  }

  // Signal the end of the stream
  yield encoder.encode("END_STREAM");
}

// Convert a generator into a ReadableStream
function iteratorToStream(iterator: AsyncGenerator<Uint8Array>) {
  return new ReadableStream({
    async pull(controller) {
      // Get the next value from the generator
      const { value, done } = await iterator.next();

      if (done) {
        // Close the stream if the generator is done
        controller.close();
      } else {
        // Enqueue the value (chunk) into the stream
        controller.enqueue(value);
      }
    },
  });
}

Client-Side: React Hook

The client-side code reads the stream from the server and updates the UI incrementally.

"use client";
import { useState } from "react";
import toast from "react-hot-toast";

function useStreamResponseHook(api: string) {
  const [responses, setResponses] = useState(""); // Store the streamed responses
  const [isLoading, setIsLoading] = useState(false); // Track loading state

  const startStream = async (inputText: string) => {
    try {
      setIsLoading(true);
      setResponses(""); // Clear previous responses

      // Send a POST request to the API
      const response = await fetch(api, {
        method: "POST",
        body: JSON.stringify({ inputText }),
        headers: {
          "Content-Type": "application/json",
        },
      });

      // Check if the response body is readable
      if (!response.body) {
        toast.error("Readable is not Supported");
        throw new Error("Readable is not Supported");
      }

      // Get a reader for the response stream
      const reader = response.body.getReader();

      // Function to read chunks from the stream
      const read = async () => {
        const { done, value } = await reader.read();
        if (done) {
          setIsLoading(false); // Stop loading when the stream ends
          return;
        }

        // Decode the chunk and update the responses
        const text = new TextDecoder("utf-8").decode(value);
        if (!text.includes("END_STREAM")) {
          setResponses((prev) => prev + text);
        }

        read(); // Continue reading the next chunk
      };

      read(); // Start reading the stream
    } catch (error) {
      console.log("Error from useStreamResponse hook", { error });
      toast.error("An error occurred while streaming the response.");
      setIsLoading(false);
    }
  };

  return { responses, isLoading, startStream };
}

export default useStreamResponseHook;

How It Works

Server-Side:
- The API route receives a request, validates the input, and fetches a streaming response from the Mistral API.
- A generator (makeIterator) is used to produce chunks of data from the streaming response.
- The iteratorToStream function converts the generator into a ReadableStream, which is sent to the client.
Client-Side:
- The useStreamResponseHook hook sends a request to the API and reads the stream using a ReadableStreamDefaultReader.
- Each chunk is decoded and appended to the responses state, which updates the UI in real-time.

Why Use This Approach?

Efficiency: Data is processed and sent incrementally, reducing memory usage.
Real-Time Updates: Users see updates as soon as they are available.
Scalability: Works well for large datasets or long-running processes.

Conclusion

By combining function*, yield, and ReadableStream, you can implement efficient and scalable streaming in your Next.js applications. This approach is particularly useful for real-time applications like chatbots, live data feeds, or any scenario where incremental updates are required. With the explanations and code provided, you should now be able to implement streaming in your own projects. Happy coding! 🚀

Feel free to connect with me on LinkedIn or reach out via email at [arfatrahman08@gmail.com](mailto:arfatrahman

08@gmail.com) for more insights and updates.

I added your links at the start and end for better visibility! Let me know if you'd like to adjust the placement further.

How to Write Clear and Effective Code Comments in JavaScript with Better Comments

Arfatur Rahman — Wed, 30 Oct 2024 13:09:30 +0000

When working in JavaScript, writing clear and structured comments is essential for maintainable code. The Better Comments extension for Visual Studio Code takes this further by color-coding different types of comments to increase readability. You can download it here. Let’s explore how to use it for best commenting practices.

Types of Comments with Better Comments

Better Comments categorizes comments by purpose, including the following types:

TODOs (// TODO:): Mark tasks or improvements.
Important Notes (// !): Highlight key areas in your code.
Questions (// ?): Use for clarifying logic or seeking feedback.
Explanations (//): Standard comments to explain complex code.

1. Explain the "Why," Not the "What"

Instead of restating what the code does, focus on why specific code is necessary. Better Comments allows us to use // ? to mark questions or explanations that clarify reasoning.

Example:

javascript
Copy code
// ? Increment by 2 to loop through only odd numbers
for (let i = 1; i < 10; i += 2) {
  console.log(i);
}

2. Use Descriptive Comments for Complex Logic

For complex logic, the //! notation can indicate important sections in Better Comments. This helps future maintainers quickly recognize essential explanations.

Example:

javascript
Copy code
//! Custom sort function to prioritize items with the highest scores, then alphabetically by name
items.sort((a, b) => {
  if (a.score === b.score) return a.name.localeCompare(b.name);
  return b.score - a.score;
});

3. Comment Functions and Classes

Provide purpose, inputs, and outputs at the beginning of functions and classes. Use Better Comments for clarity: // ? for explanatory comments and // TODO for pending improvements.

Example:

javascript
Copy code
// ? Calculates the total price of items in the cart
// TODO: Add handling for discount codes in future iterations
/**
 * Calculates the total price of items in the cart.
 * @param {Array} items - Array of item objects with price and quantity.
 * @returns {number} - The total price.
 */
function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price * item.quantity, 0);
}

4. Avoid Redundant Comments

Avoid stating obvious information in comments. If the function name generateID() is clear, you can skip the comment entirely, or use a simple // ? comment to note specific design choices.

Example (to avoid):

javascript
Copy code
// ? Generates a unique identifier string
function generateID() {
  return Math.random().toString(36).substr(2, 9);
}

5. Use Consistent Style and Structure

Following a consistent commenting style, especially with Better Comments colors, helps team members understand comments quickly and spot important notes.

6. Keep Comments Up-to-Date

Outdated comments mislead readers. With Better Comments, you can use // TODO for reminders or //! to highlight changes.

7. Document Known Issues or Workarounds

If the code has workarounds or known limitations, document them with Better Comments. The // ! style can be used for critical issues, drawing attention to any known bugs or necessary fixes.

Example:

javascript
Copy code
//! Known issue: This method does not support nested objects; update expected in v2.0
function shallowClone(obj) {
  return { ...obj };
}

8. Comment Edge Cases

Use // ? in Better Comments to highlight edge cases, helping future readers understand why certain handling exists.

Example:

javascript
Copy code
// ? Handle null values as valid input to indicate 'unknown' data in our system
function processData(input) {
  if (input === null) return 'unknown';
  return input;
}

Conclusion

With the Better Comments extension, you can make your JavaScript comments more effective by using color-coded tags to clarify intentions, mark tasks, highlight important sections, and handle edge cases. This approach ensures your code is easy to understand, maintain, and extend.

Happy coding and commenting with Better Comments!

Bkash Payment with NextJS & TypeScript

Arfatur Rahman — Tue, 07 May 2024 09:52:14 +0000

Run code from github

You can get and run code from here Bkash github repo
After donwloading code

create an .env
Copy bellow code

# BKASH INTEGRESION
bkash_username = ''
bkash_password = ''
bkash_api_key = ''
bkash_secret_key = ''

bkash_grant_token_url = https://tokenized.sandbox.bka.sh/v1.2.0-beta/tokenized/checkout/token/grant
bkash_create_payment_url =  https://tokenized.sandbox.bka.sh/v1.2.0-beta/tokenized/checkout/create
bkash_execute_payment_url = https://tokenized.sandbox.bka.sh/v1.2.0-beta/tokenized/checkout/execute
bkash_refund_transaction_url = https://tokenized.sandbox.bka.sh/v1.2.0-beta/tokenized/checkout/payment/refund

bkash_base_url_for_api = "http://localhost:3000"
NEXT_PUBLIC_bkash_base_url_for_frontend = "http://localhost:3000"

Run npm i
Then npm run dev

Create your own

Create a new apps if you don't have any project ye by following NextJS with Tailwind

Necessary files

3 page(Home, success, callback)
1 API middleware (/create/bkash_auth)
2 api(/create , /callback)
3 component (callback-component, form-component, success-component)

Required Packages

react-hot-toast
uuid & @types/uuid
zod

Creating 3 pages

Home page

import FormComponent from "@/component/form-component";
import { Metadata } from "next";
import { Suspense } from "react";
export const metadata: Metadata = {
  title: "Home | Arfatur Rahman",
  description: "Practice Bkash payment with sandbox",
};
export default function Home() {
  return (

    // Suspense is required for useSearchParams in component inside
    <Suspense>
      <FormComponent />
    </Suspense>
  );
}

Success page

import SuccessComponent from "@/component/success-component";
import { Metadata } from "next";
import React from "react";
export const metadata: Metadata = {
  title: "Success | Arfatur Rahman",
  description: "Practice Bkash payment with sandbox",
};
const SuccessPage = () => {
  return <SuccessComponent />;
};

export default SuccessPage;

Callback page

"use client";
import CallBackComponent from "@/component/callback-component";
import React, { Suspense } from "react";

const CallBackPage = () => {
  return (
    <Suspense>
      <CallBackComponent />
    </Suspense>
  );
};

export default CallBackPage;

API Middleware

bkash_auth

export const bkash_auth = async () => {
  try {
    const data = await fetch(process.env.bkash_grant_token_url as string, {
      method: "POST",
      body: JSON.stringify({
        app_key: process.env.bkash_api_key,
        app_secret: process.env.bkash_secret_key,
      }),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        username: process.env.bkash_username as string,
        password: process.env.bkash_password as string,
      },
    }).then((res) => res.json());

    return data.id_token;
  } catch (error) {
    return new Response((error as any).message || "You're not authorized", {
      status: 401,
    });
  }

Creating 2 API's

Create API

import { z } from "zod";
import { v4 as uuidv4 } from "uuid";
import { bkash_auth } from "./bkash-middleware";

export async function POST(req: Request) {
  try {
    const json = await req.json();
    const { amount } = z
      .object({
        amount: z.string({ required_error: "amount must be string" }),
      })
      .parse(json);
    const id_token = await bkash_auth();
    const data = await fetch(process.env.bkash_create_payment_url as string, {
      method: "POST",
      body: JSON.stringify({
        mode: "0011",
        payerReference: " ",
        callbackURL: `${process.env.bkash_base_url_for_api}/callback?id_token=${id_token}`,
        amount: amount,
        currency: "BDT",
        intent: "sale",
        merchantInvoiceNumber: "Inv" + uuidv4().substring(0, 5),
      }),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        authorization: id_token,
        "x-app-key": process.env.bkash_api_key as string,
      },
    }).then((bRes) => bRes.json());
    if (!data.bkashURL) {
      return new Response(JSON.stringify(data), {
        status: 401,
      });
    }
    return new Response(JSON.stringify({ bkashURL: data.bkashURL }), {
      status: 201,
    });
  } catch (error) {
    console.log(error, "from error");
    if (error instanceof z.ZodError) {
      return new Response(JSON.stringify(error.issues), { status: 422 });
    }
    return new Response(null, { status: 500 });
  }
}

Callback API

import { z } from "zod";

export async function POST(req: Request) {
  try {
    const json = await req.json();
    const { paymentID, id_token } = z
      .object({
        paymentID: z.string(),
        id_token: z.string(),
      })
      .parse(json);
    const data = await fetch(process.env.bkash_execute_payment_url as string, {
      method: "POST",
      body: JSON.stringify({
        paymentID: paymentID as string,
      }),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        authorization: id_token,
        "x-app-key": process.env.bkash_api_key as string,
      },
    })
      .then((bRes) => {
        return bRes.json();
      })
      .catch((e) => console.log(e, "Error from api"));
    if (data && data.statusCode === "0000") {
      // YOu can write your code here After successfully pay
      return new Response(JSON.stringify({ success: true }), { status: 201 });
    } else {
      return new Response(JSON.stringify({ success: false }), { status: 201 });
    }
  } catch (error) {
    console.log((error as any).message, "from error");

    return new Response(null, { status: 500 });
  }
}

After adding codes run bellow command

Run npm i
Then npm run dev

Forem: Arfatur Rahman

How I Finally Forced LLMs to Return Perfect JSON (2025 Edition) — No Hacks, No Regex, Just Clean Output

Prompts alone can never guarantee valid JSON.

The Fix: LangChain .withStructuredOutput() + Zod

What You’ll Learn in My Guide

About the Author

Why LangChain Is Better Than Raw LLM APIs — A Quick Developer-Friendly Breakdown

Why Raw LLM APIs Hold You Back

Why LangChain Makes Development 10× Easier

1. A Unified Interface for Every LLM

2. Much Less Boilerplate

3. Lightning-Fast Provider Switching

4. Built-In RAG, Agents, Tools, Memory

5. A Scalable, Clean Codebase

See the Full Article (With Real Code Examples)

About the Author – Arfatur Rahman

📬 Connect With Me

Building a TypeScript Express API for Vercel Deployment: A Step-by-Step Guide

Introduction

Project Setup

1. Initialize Node.js Project

2. Install Runtime Dependencies

3. Install Development Dependencies

4. Initialize TypeScript Configuration

Project Structure

Key Files Explained

1. tsconfig.json

2. package.json Scripts

3. src/index.ts

4. vercel.json

5. .env and .gitignore

Development Workflow

Deploying to Vercel

1. Install Vercel CLI

2. Verify Installation

3. Log in to Vercel

4. Deploy the Application

API Endpoints

GET /

GET /posts

POST /posts

Type Safety

Why Use TypeScript with Express?

Conclusion

About the Author

How to Install and Configure Elasticsearch on Windows

Prerequisites

Step 1: Download and Install Elasticsearch

Step 2: Run Elasticsearch

Step 3: Reset the Elastic User Password

Step 4: Install Elasticsearch as a Windows Service

Pros of Running as a Service

Cons of Running as a Service

Steps to Install

Step 5: Configure Elasticsearch

1. Change Data Storage Path

2. Set Memory Limits

3. Disable HTTPS (Optional)

4. Restrict Remote Access (Optional)

5. Change the Default Port (Optional)

6. Apply Changes

Step 6: Validate Elasticsearch

Conclusion

About the Author

Parallel vs Sequential Data Fetching in Next.js 15 with TypeScript

Introduction

What is Sequential Data Fetching?

Example of Sequential Fetching in Next.js

Advantages of Sequential Fetching

Disadvantages of Sequential Fetching

What is Parallel Data Fetching?

Example of Parallel Fetching in Next.js

Advantages of Parallel Fetching

Disadvantages of Parallel Fetching

Key Differences Table

Best Practices from Official Docs

Real-World Use Cases

Sequential Use Case

Parallel Use Case

Performance Considerations

The Fix: LangChain `.withStructuredOutput()` + Zod

1. `tsconfig.json`

2. `package.json` Scripts

3. `src/index.ts`

4. `vercel.json`

5. `.env` and `.gitignore`

GET `/`

GET `/posts`

POST `/posts`

Generating `sitemap.xml` in Next.js

What is `robots.txt`?

Why is `robots.txt` Required?

Generating `robots.txt` in Next.js

1. **Generators (`function*`)**

2. `yield`

3. `ReadableStream`