Forem: shubham paul

Speed Up Your Next.js Build Time with Turbopack

shubham paul — Sat, 14 Jun 2025 15:57:03 +0000

If you're building with Next.js, chances are you’ve run into the occasional long build times, especially as your app scales. What if you could supercharge your local dev experience and optimize your iteration loop?

Say hello to Turbopack — the successor to Webpack, built by the creators of Next.js. In this blog, we’ll explore how to optimize your Next.js development and build experience using Turbopack.

What is Turbopack?

Turbopack is a new JavaScript bundler written in Rust, designed to be blazingly fast and incremental. Unlike Webpack, which recompiles everything, Turbopack only compiles what’s necessary.

Incremental builds (only what’s changed)
Lazy bundling (only what you’re using now)
Built-in for Next.js 13.4+

Think of it as Vite on steroids — but made for React and Next.js.

Important Note

Turbopack is currently:

Stable for next dev
Still experimental for next build

So in this blog, we’ll focus primarily on development time optimizations.

Setting Up Turbopack in Your Next.js App

Step 1: Upgrade Next.js
Make sure your app is using Next.js 13.4 or newer:

npm install next@latest react@latest react-dom@latest

Step 2: Enable Turbopack in dev script
Update your package.json:

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

Then run:

npm run dev

Why Turbopack is Game-Changing

Let’s compare it to the old experience:

Feature	Webpack (Default)	Turbopack (New)
Cold start	🐢 Slower	⚡ Fast (~10x faster)
Rebuild on change	🐌 Often sluggish	⚡ Near instant
Incremental builds	❌ Full rebuild	✅ Smart rebuilds
Dev performance	😤 Meh	😎 Smooth and reactive

What About next build --turbo?

As of now (Next.js 14.x), --turbo is not yet supported for production builds.

Running:

next build --turbo

...will throw:

error: unknown option '--turbo'

Happy Coding

Common cors misconfigure errors

shubham paul — Mon, 14 Apr 2025 05:06:18 +0000

shubham paul

Apr 14 '25

How I Found a CORS Misconfiguration + No Rate Limiting on a Live Website

#webdev #javascript #frontend #cybersecurity

Comments

2 min read

How I Found a CORS Misconfiguration + No Rate Limiting on a Live Website

shubham paul — Mon, 14 Apr 2025 05:05:47 +0000

While exploring a few public websites last week, I stumbled upon a surprisingly common yet dangerous combination of vulnerabilities — CORS misconfiguration and lack of API rate limiting.

These two issues, together, could allow any attacker to fetch data from protected APIs and overwhelm the server with thousands of requests. In this post, I’ll explain what I found, why it’s a problem, and how you can protect your applications.

🔍 What I Discovered

I was casually inspecting the network requests of a few websites and noticed something odd:

Their APIs responded to requests from any origin.
There was no authentication or token-based validation in place.
Even worse, I could send unlimited requests — no rate limiting at all!

Using just a browser or tools like Postman, I could:

Access data that should’ve been private
Simulate a Denial-of-Service (DoS) attack by sending rapid requests
Fetch and manipulate API data without being on the same domain

🔐 Let’s Talk About CORS

CORS (Cross-Origin Resource Sharing) is a security feature implemented by browsers that restricts web pages from making requests to a different domain than the one that served the page.

⚠️ The Misconfiguration

The affected websites had this kind of header:

Access-Control-Allow-Origin: *

That * wildcard means any website (even malicious ones) can make requests to this API and get a response.

💣 No API Rate Limiting = Major Exploitation Risk

To make things worse, their server didn’t implement any rate limiting. This means I could send thousands of requests per second without any throttling or blocking.

📉 Why That’s Dangerous:

Resource Exhaustion: Servers can get overwhelmed and crash.
Cost Spike: For APIs hosted on cloud platforms, excessive requests = higher billing.
Easy for Bots and Scrapers: Anyone can write a script and steal your data.

🛡️ How to Prevent This

✅ Secure CORS Configuration
Never use Access-Control-Allow-Origin: * in production for sensitive endpoints.

Use something like:

Access-Control-Allow-Origin: https://your-frontend.com

And set proper headers:
Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization

✅ Implement Rate Limiting

If you’re using Node.js (Express.js), you can use libraries like express-rate-limit:

const rateLimit = require("express-rate-limit");

const limiter = rateLimit({
  windowMs: 1 * 60 * 1000, // 1 minute
  max: 100, // limit each IP to 100 requests per minute
});

app.use('/api/', limiter);

📌 Key Takeaways

CORS should never be wide open unless the data is truly public.
Rate limiting is essential for every production-grade API.
Even small misconfigurations can open the door to serious security issues.
Always audit your APIs regularly for vulnerabilities.

Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide

shubham paul — Fri, 22 Nov 2024 04:59:35 +0000

With the release of Next.js 15 and React 19, developers have encountered challenges with package compatibility and dependency conflicts. These versions bring significant improvements, but the breaking changes can disrupt workflows, particularly during development and deployment. One common issue arises from incompatible packages that require manual intervention to install correctly.

In this blog, I’ll walk you through the problem and provide a solution to ensure smooth development and deployment.

The Problem: Package Compatibility

When upgrading to Next.js 15 and React 19, you might encounter errors like:

npm ERR! Could not resolve dependency:  
npm ERR! peer <package-name> is not compatible with react@^19.0.0

These errors typically arise because some packages are not yet fully compatible with the latest versions of Next.js or React. The peerDependency conflicts force npm to halt the installation.

Real-world Scenario

Imagine you are trying to install a UI library or utility package, and npm refuses to proceed due to incompatible peer dependencies. This issue escalates when deploying applications on platforms like Vercel, where the build process halts due to these conflicts.

The Solution: Using --force

To bypass these dependency conflicts, npm provides the --force flag. This flag instructs npm to install the package regardless of peer dependency issues.

Step 1: Installing Packages Locally

During development, use the following command to resolve the dependency issues:
npm install <package-name> --force
This command forces npm to ignore dependency constraints and proceed with the installation.

Step 2: Handling Deployment on Platforms like Vercel

When deploying your Next.js 15 app, you might encounter similar issues during the build process. To ensure the deployment completes successfully, update your deployment configuration to include the --force flag in the install command.

For Vercel, you can achieve this by adding a custom install command in the project settings:

Go to your Vercel Dashboard.
Select your project.
Navigate to the Build & Development Settings.
Under the Install Command

npm install --force

Best Practices

While the --force flag resolves the issue, it’s essential to approach this workaround cautiously:

Check for Compatibility Updates: Regularly check if the conflicting packages have released updates compatible with Next.js 15 and React 19.
Monitor Application Behavior: Forced installations might lead to runtime issues. Test your application thoroughly after resolving dependencies with --force.
Submit Issues: If you encounter compatibility problems, report them to the package maintainers. This helps improve the ecosystem.

Conclusion

Next.js 15 and React 19 bring powerful features, but breaking changes can disrupt workflows. Using npm install --force is a temporary workaround to handle dependency conflicts during development and deployment. While this method is effective, it’s crucial to stay updated with package compatibility and test your application rigorously.

Happy coding with Next.js 15 and React 19! 🚀

From Contributor to Maintainer: My Hacktoberfest Journey 🎉

shubham paul — Sat, 26 Oct 2024 07:14:59 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Maintainer Experience

Hey, everyone! This year’s Hacktoberfest has been quite a milestone for me, as I took the leap from contributor to maintainer for the first time! In this post, I’m excited to share my journey, some of the challenges I faced, and what I learned along the way. Hopefully, my story can inspire others to step up and maintain their own projects, or simply get involved with open source in a new way!

🌱 Starting as a Contributor

Last year was my first Hacktoberfest, and I participated as a contributor. I started small, working on minor issues, enhancing documentation, and fixing bugs. Through each pull request, I learned a lot about open-source collaboration, how repositories are structured, and how to communicate effectively with maintainers.

Contributing not only improved my technical skills but also taught me the importance of clean code, meaningful comments, and the incredible support the open-source community provides. This experience gave me the confidence to contribute to more significant projects, and by the end of last year, I knew I wanted to do more than just contribute.

✨ Becoming a Maintainer

Fast forward to this year—Hacktoberfest 2024—and I decided to step up as a maintainer. It felt like a natural progression, but it also came with a whole new set of responsibilities. Here’s how I prepared for the transition:

Choosing the Right Project: I selected a project where I felt confident in both the codebase and the purpose of the application. I wanted a project that could help the community and provide new contributors with a positive experience.

Creating Contributing Guidelines: My first task as a maintainer was to create clear and detailed contributing guidelines. It’s essential to make the contribution process as smooth as possible, especially for beginners. I also wrote a Code of Conduct to foster a respectful and inclusive environment.

Setting Up Issues and Labels: I carefully defined issues that ranged from beginner-friendly (like documentation improvements) to advanced (such as feature enhancements). Properly labeled issues helped contributors quickly find tasks that matched their skill levels.

Being Ready for Questions: As a contributor, I often had questions about issues. Now, as a maintainer, it was my turn to answer them! I made sure to be active on GitHub discussions and regularly reviewed pull requests. Communication became key, and I was constantly balancing encouragement with constructive feedback.

💡 What I Learned

Taking on the maintainer role taught me a few invaluable lessons:

Empathy Matters: When reviewing PRs, it’s essential to be understanding. Every contributor is at a different skill level, so being patient and offering guidance can make all the difference.
Documentation Is Gold: I underestimated the power of clear documentation until I saw contributors breeze through issues with the right guidance. Documentation really is the key to open-source success.
It’s About the Community: Being a maintainer isn’t just about managing code; it’s about building a welcoming space for contributors. Celebrating their work and making them feel valued is essential.

🎉 Wrapping Up Hacktoberfest 2024

As Hacktoberfest 2024 comes to a close, I’m grateful for everything I’ve learned this year. Becoming a maintainer has not only improved my technical skills but also taught me leadership, patience, and the importance of community. Watching contributors make their first PRs and grow through my project has been incredibly fulfilling, and it’s something I hope to continue doing well beyond Hacktoberfest.

For anyone thinking of becoming a maintainer, I say go for it! It’s challenging, but the rewards are absolutely worth it.

Thank you for reading! I’d love to hear about your Hacktoberfest experiences in the comments.

Github Link: https://github.com/Lets-code-with-us/scamwebsiteV1

Why We Migrated Our WordPress Site from Hostinger to AWS LightSail

shubham paul — Sat, 26 Oct 2024 06:36:33 +0000

For over three years, our company’s WordPress blog was hosted on Hostinger. However, we recently decided to migrate to AWS LightSail to leverage its reliability, scalability, and cost-effectiveness. Although AWS EC2 could also host WordPress, it requires extensive manual configuration, which we opted to avoid at this stage. In this blog, I’ll walk you through how to migrate an existing WordPress site to AWS LightSail or set up a new one, detailing each step for a smooth transition.

Step 1: Create a new AWS account, if you have sign in to AWS console

Step 2: Search LightSail

Step 3: Create the wordpress App

Step 4: Choose your Pricing plan

Step 5: Go to the wordpress console

Step 6: Copy the public IP address and check the site is working or not

Step 7: Now login to wp-admin

username: user
password: For the password go to console / shell run the command
cat bitnami_application_password

Step 8: For migration Install a plugin All-in-One WP Migration. Download your old wordpress site and using this plugin import it you new wordpress site

But you will not able to upload your site run this command
Check file upload limit: php -i |egrep 'upload_max_filesize|post_max_size'

By default it will be 80M

We have to change

Run this command
sudo vi +/upload_max_filesize /opt/bitnami/php/etc/php.ini

Change the two file limit

upload_max_filesize = 300M
post_max_size = 300M

Now let's install the SSL cerificate

Run the command sudo /opt/bitnami/bncert-tool

Configure your domain name and You website is ready

✨ From Contributor to Core Project Maintainer: My Open Source Journey ✨

shubham paul — Fri, 11 Oct 2024 19:04:24 +0000

It all started with a simple pull request...

I remember when I first ventured into the world of open source. My initial goal was just to solve a minor issue in a project I admired. Little did I know, that small contribution would begin an incredible journey.

Step 1: Starting as a Contributor Initially, I was nervous to contribute. I wasn’t sure if my code was good enough or if my solutions were valid. But with time, I realized that the open-source community is incredibly supportive. My early contributions focused on fixing bugs and writing documentation. With each pull request, I learned more about the project’s structure, gained confidence in my skills, and found a sense of fulfillment knowing my work was impacting developers globally.

Step 2: Building Trust and Gaining Responsibility As I became more involved, I started engaging with the community—helping other contributors, participating in discussions, and proposing enhancements. I wasn’t just coding anymore; I was shaping the direction of the project. The project's maintainers noticed my growing commitment and the quality of my contributions.

They trusted me with more responsibilities, including triaging issues and reviewing other contributors' work.

Step 3: Becoming a Core Project Maintainer Eventually, after consistent contributions and dedication, I was invited to become a core project maintainer. It was a humbling and proud moment! This role came with more responsibility—guiding the project’s roadmap, mentoring new contributors, and ensuring the project's long-term sustainability. I also became the bridge between the community and the vision of the project.

The Lessons I’ve Learned:

🌱 Start small: Every pull request, even if it’s fixing a typo, matters.
🤝 Engage with the community: Building relationships is just as important as coding.
💡 Stay consistent: Show up, contribute meaningfully, and your efforts will be noticed.
🚀 Never stop learning: The world of open source is dynamic, and there's always something new to learn.
Today, as a core maintainer, I’m excited to continue growing, helping others on their open-source journey, and contributing to the projects that make a difference. 🚀

opensource #techjourney #developerlife #opencontributor #projectmaintainer #codingcommunity

Supercharge Your Node.js App with Blazing Fast In-Memory Caching!

shubham paul — Tue, 02 Jul 2024 17:55:00 +0000

Introduction

If you’re experiencing latency issues in your Node.js application, implementing in-memory caching can be a game-changer. This guide will walk you through how to set up in-memory caching using node-cache in an Express.js server to significantly improve your API performance.

The Challenge

We recently saw a rapid increase in our backend project, reaching over 1000 active users in just 5 days. However, this spike led to latency issues, with API calls averaging around 200ms. Initially, we used Redis for caching, but latency remained between 180-200ms because our Redis instance and main server were both in the US-West region, while our users were primarily in India.

To address this, we implemented in-memory caching on the server, reducing latency by approximately 60%.

Here's how to implement in-memory caching using Node.js and Express.js:

- Install the node cache package

npm install node-cache

- Setup your Cache

const NodeCache = require('node-cache');
const myCache = new NodeCache({ stdTTL: 100, checkperiod: 120 });

// stdTTL is the default time-to-live for cache entries (in seconds)
// checkperiod is the interval for automatic cache cleaning (in seconds)

- Implement in the express js server

const express = require('express');
const app = express();

// Example data fetching function
async function fetchDataFromDatabase() {
    // Simulate a database call
    return { data: 'This is some data from the database.' };
}

app.get('/data', async (req, res) => {
    const cacheKey = 'myDataKey';
    const cachedData = myCache.get(cacheKey);

    if (cachedData) {
        return res.json({ source: 'cache', data: cachedData });
    }

    const data = await fetchDataFromDatabase();
    myCache.set(cacheKey, data);
    res.json({ source: 'database', data });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

- Manage your cache

// Get cache statistics
console.log(myCache.getStats());

// Manually delete a cache entry
myCache.del('myDataKey');

// Flush the entire cache
myCache.flushAll();

Unlocking Affordable Storage Magic: Our Journey with Uploadthing! 🚀✨

shubham paul — Tue, 25 Jun 2024 15:27:59 +0000

I was working on a project where we have to store PDFs in a storage bucket or any storage solution. Initially, we were storing the PDFs in an AWS S3 bucket so that users could easily access the content of the PDFs. However, as we know, the pricing of the S3 bucket is high.🔥.

So, we are looking for some good alternative solutions that we can use with a good pricing model.

I have been following Theo for the last six months and love watching his YouTube videos. From that, I learned about Uploadthing.

Uploadthing is a modern file storage solution designed to meet the diverse needs of developers and businesses. Whether you're storing documents, images, or other types of files, Uploadthing offers a straightforward and cost-effective option.

Key Features:

Generous Free Tier: Uploadthing provides 10 GB of free storage space, making it an excellent choice for startups and small projects.
Affordable Pricing: For just $10 per month, you can access 100 GB of storage, offering a cost-effective alternative to traditional storage solutions like AWS S3.

If you are building your application in Next.js, the integration of Uploadthing with Next.js is smooth as butter.

We just migrate from Google analysis to PostHog

shubham paul — Fri, 07 Jun 2024 14:50:46 +0000

In our project's we are using google analysis to track user details

What is google analysis ?
Google Analytics is a powerful web analytics service offered by Google that tracks and reports website traffic. It was launched in November 2005 after Google acquired Urchin Software Corporation. Over the years, Google Analytics has become one of the most widely used web analytics services on the internet.

In our company, we used Google Analytics for every project to analyze user behavior and track the number of active users on our websites and applications. Everything was working fine, but we wanted to explore different tools to test their compatibility and see if they could offer additional features for our applications.

That’s when we discovered PostHog.

PostHog is an open-source product analytics platform designed to provide detailed insights into user behavior and product usage. Launched in early 2020, PostHog aims to offer an alternative to traditional analytics tools by focusing on privacy, flexibility, and the ability to self-host. This makes it particularly attractive to companies that prioritize data ownership and customization.

We have been using PostHog for a week, and here are some of its features:

Event Tracking: PostHog allows us to track custom events to understand user interactions with our product. This helps us gain deeper insights into user behavior.
Session Recording: With session recording, we can visualize user interactions and identify usability issues. This feature is invaluable for improving user experience.
Feature Flags: PostHog provides feature flags that enable us to test and gradually roll out new features. This helps us control which users see specific features and conduct A/B testing.
User Paths: The user paths feature visualizes how users navigate through our product. This helps us identify common drop-off points and optimize user flows.
Retention Analysis: PostHog’s retention analysis allows us to understand how well our product retains users over time. We can identify patterns and factors that influence user retention.
Self-Hosting: PostHog offers the option to self-host, giving us complete control over our data and ensuring compliance with privacy regulations. This is a significant advantage for data security and privacy.

We are excited about the possibilities that PostHog offers and look forward to leveraging these features to enhance our product and user experience.

We are now in the testing phase of PostHog, and so far, we are impressed with its capabilities. If our testing continues to show positive results, we plan to stick with PostHog for the long term.

Fixing the Render Free Tier Sleep Issue for Strapi CMS

shubham paul — Sat, 01 Jun 2024 13:01:23 +0000

I am working on a project where the backend is deployed on Render, using Strapi CMS. One challenge with the Render free tier is that the server goes to sleep after 15 minutes of inactivity. This causes delays when developing the frontend, as the data takes too long to load initially, slowing down my development process.

To address this, I thought of a solution: pinging the server every 10 minutes to prevent it from going to sleep. This way, the response times will remain optimal. I wrote a basic JavaScript program to achieve this.
Let's see the code

import axios from "axios";
let i = 1;
async function apiCronJob(){
    try{
            const data = await axios.get("your server endpoitn");
            if(data){
                console.log("request number is: ",i)
            }
            i++;
    }
    catch(e){
            console.log(e)
    }
}


setInterval(apiCronJob,600000);

You can run this code in your computer are make a cron job or worker that will run code.

Comment down your solutions