Forem: code_with_sahil

#18 🚫 Don’t Use Next.js as Your Main Server! ✅ Here’s Why I Switched to a Custom Server! 🤯

code_with_sahil — Wed, 01 Jan 2025 17:24:45 +0000

In the ever-evolving world of web development, building scalable, efficient, and maintainable applications is critical. While Next.js is a powerful framework for creating seamless full-stack applications, relying solely on its built-in server for complex workflows can sometimes pose challenges. In this blog, I will share insights from my own experience working on a social media platform for pet enthusiasts, where I realized the importance of separating Next.js frontend and backend operations.

Challenges with Using Next.js as the Server

1. Long-Running Tasks

Next.js servers, particularly when deployed on platforms like Vercel, come with limitations on execution time. For example:

Free Plan: Tasks must finish within 10 seconds.
Paid Plans: The maximum time extends to 5-9 minutes.

This constraint makes Next.js unsuitable for long-running operations such as AI-based workflows like text-to-video generation, which are resource-intensive and require longer execution times. AI applications are rapidly gaining traction, and these limitations can hinder their implementation on Next.js servers.

2. Background Tasks, Job Queues, and Cron Jobs

Handling background tasks or setting up job queues is another pain point. When working on RabbitMQ, I realized the limitations of relying on Next.js for such workflows. These limitations can lead to inefficiencies in processing tasks that require asynchronous execution, such as:

Sending emails in bulk.
Processing large datasets.
Scheduling periodic tasks with cron jobs.

This was a significant learning curve for me, as I initially chose Next.js for these operations, only to face issues later.

3. Database Connection Management

Next.js’s serverless architecture spins up and tears down instances for each request, which can lead to frequent database connections. This causes:

Connection Overheads: Increased latency and potential connection pool exhaustion.
Workflow Inefficiencies: Applications with heavy database usage suffer the most.

4. Cold Start Latency

Serverless functions in Next.js often experience cold starts, especially if the function hasn’t been invoked for a while. This can lead to:

Slower response times for users.
Suboptimal performance for critical API endpoints.

5. No Persistent File System

Next.js’s serverless nature means there is no persistent file system. This makes it challenging to:

Store temporary files.
Process and store uploaded media efficiently.

6. WebSocket Limitations

WebSocket-based applications like real-time chats or live updates face challenges with Next.js due to limited connection times. Persistent connections are difficult to maintain, making Next.js less ideal for WebSocket-heavy applications.

7. Microservices and Scalability

Next.js servers are not inherently designed for complex microservices architectures. While they excel in providing high-level components and features, they lack the customization options required for:

Isolating faults in individual services.
Scaling backend services independently of the frontend.

Why a Custom Server Is a Better Option

After much trial and error, I discovered the benefits of creating a custom Node.js server for backend operations. Here’s why:

1. Best Tools for the Job

With a custom server, you can choose tools tailored to your specific needs. Whether it’s Express.js, Koa, or Fastify, you have full control over your backend stack.

2. Independent Scaling

Backend teams can scale the server independently based on traffic or workload. This separation allows for:

Efficient resource allocation.
Better performance under high load.

3. Fault Isolation

Custom servers enable you to isolate faults within specific microservices, preventing issues from cascading across the entire application.

The Best Solution: Combining Next.js with a Custom Server

For Petreon, the best approach is to leverage Next.js for the frontend and a custom server for backend operations. This hybrid model allows me to use the strengths of both systems while addressing their limitations.

Architecture Overview

Here’s how the architecture is structured:

Next.js Client: Handles the user interface and communicates with the backend.
Next.js Server: Used for authentication and other lightweight operations related to user management.
Custom Server: Manages heavy backend operations like database interaction, long-running tasks, WebSockets, etc.

Implementation with Kinde

Kinde is an excellent platform for managing authentication in this setup. Here’s how you can integrate it:

Next.js Server (Authentication)

const { jwtVerify } = require("@kinde-oss/kinde-node-express");

const jwtVerifier = jwtVerify("https://yourdomain.kinde.com", {
  audience: "",
});

app.use(async (req, res, next) => {
  try {
    await jwtVerifier(req, res, next);
  } catch (err) {
    console.error("Token validation failed:", err.message);
    res.status(401).send("Unauthorized");
  }
});

Custom Server

In the backend (custom server), set up protected routes to handle secure operations.

app.get("/api/protected", jwtVerifier, (req, res) => {
  res.json({ message: "This is protected data" });
});

Next.js Client

Use the Kinde client-side library to fetch tokens and communicate with the backend.

import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { useEffect } from "react";

export default function DashboardPage() {
  const { accessTokenRaw } = useKindeBrowserClient();

  useEffect(() => {
    if (!accessTokenRaw) return;

    const fetchData = async () => {
      const response = await fetch("http://localhost:5000/api/protected", {
        headers: {
          Authorization: `Bearer ${accessTokenRaw}`,
        },
      });
      const data = await response.json();
      console.log(data);
    };

    fetchData();
  }, [accessTokenRaw]);

  return (
    <div>
      <h1>Welcome to the Dashboard</h1>
    </div>
  );
}

After setting everything up, I verified the API functionality with both Postman and a real user login. Everything worked as expected, and the documentation proved invaluable throughout the process.

Conclusion

Separating the backend server from Next.js is a strategic decision that enhances scalability, fault isolation, and overall performance. For applications , where AI workflows, WebSockets, and database-intensive operations are critical, this approach provides the flexibility and power needed to succeed.

By combining Next.js’s frontend capabilities with a custom server, you can build applications that are both efficient and scalable. Start by using platforms like Kinde for authentication and connect your frontend and backend seamlessly for the best results.

Building modern web applications is about making the right architectural choices—and this approach ensures that you’re ready to handle any challenges that come your way!

#17 Parallel or Sequential? Optimizing Data Fetching in Next.js 15 🤔💡

code_with_sahil — Tue, 31 Dec 2024 16:03:49 +0000

Efficient data fetching is the backbone of high-performance web applications. With the release of Next.js 15, developers are equipped with advanced features like parallel and sequential data fetching, transforming the way we handle application data. In this blog, we’ll delve into these tools, exploring their implementation, advantages, and practical examples that demonstrate their impact.

What Are Parallel and Sequential Data Fetching?

Parallel Data Fetching

Parallel data fetching enables the execution of multiple asynchronous tasks simultaneously, significantly cutting down on the time required to gather data from different sources.

Sequential Data Fetching

In contrast, sequential data fetching executes tasks one after another in a strict order, making it indispensable when one operation relies on the result of a preceding one.

These approaches empower developers to tailor their data-fetching strategies to their application's unique requirements.

Key Advantages of Parallel and Sequential Data Fetching

Improved Performance: Parallel fetching accelerates data retrieval by running multiple requests concurrently.
Fine-Grained Control: Sequential fetching ensures tasks with dependencies are executed in the correct sequence.
Scalability: Optimizing data-fetching workflows enhances the app’s ability to handle complexity and growth.
Enhanced User Experience: Faster and more reliable data handling leads to smoother, more responsive user interactions.

Example: Implementing Parallel and Sequential Data Fetching

Consider a dashboard that needs to fetch user details and recent activity logs. We’ll explore both approaches for this use case.

Parallel Data Fetching

This method retrieves user details and activity logs simultaneously:

import { use } from 'react';

async function fetchUserDetails() {
  // Fetch user details from the API
  return await fetch('/api/user').then((res) => res.json());
}

async function fetchActivityLogs() {
  // Fetch activity logs from the API
  return await fetch('/api/activity').then((res) => res.json());
}

export default async function Dashboard() {
  const [userDetails, activityLogs] = await Promise.all([
    fetchUserDetails(),
    fetchActivityLogs(),
  ]);

  return (
    <div>
      <h1>Welcome, {userDetails.name}</h1>
      <h2>Recent Activity</h2>
      <ul>
        {activityLogs.map((log: any) => (
          <li key={log.id}>{log.description}</li>
        ))}
      </ul>
    </div>
  );
}

Explanation:

Promise.all: Executes fetchUserDetails and fetchActivityLogs concurrently.
Performance Gain: Minimizes total wait time by running tasks in parallel.

Sequential Data Fetching

Here, user details are fetched first, followed by activity logs using the retrieved user ID:

async function fetchUserDetails() {
  // Fetch user details from the API
  return await fetch('/api/user').then((res) => res.json());
}

async function fetchActivityLogs(userId: string) {
  // Fetch activity logs using the user ID
  return await fetch(`/api/activity?userId=${userId}`).then((res) => res.json());
}

export default async function Dashboard() {
  const userDetails = await fetchUserDetails();
  const activityLogs = await fetchActivityLogs(userDetails.id);

  return (
    <div>
      <h1>Welcome, {userDetails.name}</h1>
      <h2>Recent Activity</h2>
      <ul>
        {activityLogs.map((log: any) => (
          <li key={log.id}>{log.description}</li>
        ))}
      </ul>
    </div>
  );
}

Explanation:

Dependency Handling: Ensures fetchActivityLogs executes after retrieving the necessary userId.
Data Consistency: Guarantees activity logs correspond to the fetched user.

Key Considerations

When to Use Parallel Fetching: Ideal for independent tasks without dependencies.
When to Use Sequential Fetching: Necessary for dependent workflows.
Error Handling: Implement robust error management to handle API failures gracefully.

Conclusion

Next.js 15 introduces powerful tools for parallel and sequential data fetching, allowing developers to optimize their data workflows with ease. By leveraging these features, you can enhance performance, scalability, and user experience in your applications. Dive into these techniques in your projects to see how they streamline complex data-fetching scenarios and elevate your development process.

#16 Next.js Pitfalls Developers Must Avoid😧👇

code_with_sahil — Mon, 30 Dec 2024 17:54:25 +0000

Navigating the intricacies of Next.js development requires more than just understanding the basics. Even seasoned developers can fall into traps that hinder performance, scalability, and maintainability. In this blog, I’ll shed light on the advanced mistakes developers often make with Next.js and provide actionable solutions to ensure your applications stay ahead of the curve.

1. Inefficient Cron Job Integration

The Mistake:

Attempting to implement cron jobs directly within a Next.js application can lead to resource contention and unscalable solutions. While Next.js offers serverless functions, they might not be ideal for long-running background tasks due to factors like:

Cold Starts: Serverless functions experience cold starts when invoked after a period of inactivity. This can lead to increased latency for the first execution of your cron job.
Execution Time Limits: Serverless functions have limitations on execution time. Long-running cron jobs might exceed these limits and fail to complete successfully.
Resource Management: Next.js serverless functions share resources with your application. Running resource-intensive cron jobs within your application can impact the performance of your core functionalities.

The Fix:

Use external services like AWS Lambda with EventBridge or dedicated job schedulers like BullMQ with Redis to handle background tasks and periodic jobs. These services offer:

Dedicated Resources: External schedulers have dedicated resources for running jobs, ensuring consistent performance and avoiding resource contention with your Next.js application.
Scalability: They can scale automatically to handle increased workloads, making them suitable for high-volume cron jobs.
Specialization: External schedulers are specifically designed for managing background tasks, offering advanced features like job monitoring, retries, and error handling.

Code Example:

Using BullMQ:

// Setting up BullMQ for a job
const Queue = require('bullmq').Queue;
const myQueue = new Queue('example-queue', {
  connection: {
    host: 'localhost',
    port: 6379,
  },
});

// Adding a job
myQueue.add('job-name', { someData: 'value' }, { repeat: { cron: '0 * * * *' } });

// Processor
const Worker = require('bullmq').Worker;
new Worker('example-queue', async (job) => {
  console.log(`Processing job: ${job.id}`);
});

2. Overusing getServerSideProps

The Mistake:

Using getServerSideProps indiscriminately can result in high server costs and slower page loads, especially for high-traffic applications.

The Fix:

Leverage getStaticProps wherever possible for better performance by serving pre-rendered pages.

Code Example:

Incorrect:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

Correct:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

3. Ignoring API Route Optimization

The Mistake:

Using a single API route to handle all backend logic can lead to performance issues and scalability problems.

The Fix:

Break down API routes into smaller, more focused endpoints. Use middleware to handle shared functionality efficiently.

Code Example:

Suboptimal:

// /pages/api/data.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Fetch and return data
  } else if (req.method === 'POST') {
    // Handle form submission
  }
}

Improved:

// /pages/api/data/get.js
export default function getDataHandler(req, res) {
  if (req.method === 'GET') {
    // Fetch and return data
  }
}

// /pages/api/data/post.js
export default function postDataHandler(req, res) {
  if (req.method === 'POST') {
    // Handle form submission
  }
}

4. Misconfiguring Image Optimization

The Mistake:

Not leveraging next/image correctly, such as failing to specify image dimensions or optimizing external images.

The Fix:

Set dimensions for images and configure domains in next.config.js to optimize external images.

Code Example:

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'],
  },
};

// Using next/image
import Image from 'next/image';

<Image src="https://example.com/image.jpg" alt="Example" width={600} height={400} />

5. Overcomplicating Middleware

The Mistake:

Writing complex middleware for tasks like authentication without utilizing existing libraries or Next.js built-in features.

The Fix:

Use Next.js middleware judiciously and leverage libraries like next-auth for authentication.

Code Example:

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(req) {
  const token = req.cookies.token;
  if (!token) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

6. Mismanaging Edge and Serverless Functions

The Mistake:

Deploying heavy logic in edge or serverless functions without accounting for cold starts, execution limits, or edge runtime constraints.

The Fix:

Optimize edge functions for lightweight operations and use serverless functions judiciously. Employ tools like Vercel’s Edge Config or Cloudflare Workers KV for caching and data storage closer to users.

Code Example:

Edge Function:

export default async function handler(req) {
  return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

Serverless Function:

export default async function handler(req, res) {
  const data = await heavyDataProcessing();
  res.status(200).json({ data });
}

async function heavyDataProcessing() {
  // Optimize this function to minimize execution time
}

Conclusion

Avoiding these advanced Next.js pitfalls can significantly enhance the efficiency and scalability of your applications. By staying vigilant and adhering to best practices, you can ensure your Next.js projects deliver exceptional performance and user experiences.

Happy coding!

#15 Enhancing User Experience with Server Actions in Next.js 15🚀✨

code_with_sahil — Sun, 29 Dec 2024 17:59:36 +0000

Next.js 15 has introduced several groundbreaking features, one of which is Server Actions. This powerful feature is designed to bridge the gap between server-side and client-side interactions, enabling developers to build faster, more efficient applications with less complexity. In this blog, we’ll explore how Server Actions enhance user experience and streamline development workflows.

What are Server Actions?

Server Actions are a Next.js innovation that allows developers to define server-side logic directly within React components. These actions can be invoked from the client side, enabling seamless data fetching, mutation, and other server-side operations without the need for extensive API boilerplate.

Key Characteristics of Server Actions:

Simplicity: No need to set up custom API routes or write additional backend logic.
Efficiency: Server-side code execution reduces the overhead of client-side data handling.
Type Safety: With TypeScript support, Server Actions ensure robust type-checking.
Integration with React Components: Actions can be embedded directly within server or client components, creating a cohesive development experience.

Workflow

Enhancing User Experience with Server Actions

One of the biggest advantages of Server Actions is their ability to significantly improve user experience. Let’s explore this in smaller, actionable examples to understand their benefits better.

1. Reducing API Overhead

Imagine a scenario where you need to fetch user details on a button click. Traditionally, you would create an API route, handle the request in your backend, and fetch it on the client. With Server Actions, this can be simplified:

'use server';

async function getUserDetails(userId: string) {
  const user = await db.getUserById(userId); // Server-side logic
  return user;
}

When invoked, this directly fetches data server-side, eliminating the need for an additional API endpoint. Users experience faster interactions as there’s less overhead.

2. Validating Form Inputs

Form validation is a common task in web applications. With Server Actions, you can perform server-side validation immediately when a form is submitted:

'use server';

async function validateForm(data: { email: string; password: string }) {
  if (!data.email.includes('@')) {
    throw new Error('Invalid email address');
  }
  if (data.password.length < 6) {
    throw new Error('Password must be at least 6 characters long');
  }
  return { success: true };
}

This ensures that the validation logic is centralized and secure, providing immediate feedback to the user if an error occurs.

3. Optimized Data Fetching for Components

Consider a dashboard that shows a user’s recent activity. Instead of fetching all activity data upfront, you can fetch specific data for each section using Server Actions:

'use server';

async function getRecentActivity(userId: string) {
  return await db.getActivityLogs(userId, { limit: 5 });
}

By fetching only the required data, you reduce the load time and improve the performance of your application, especially on slower networks.

4. Error-Resilient Updates

Suppose you’re building a to-do list app where users can update tasks. Server Actions allow you to handle errors gracefully when updates fail:

'use server';

async function updateTask(taskId: string, updates: { title?: string; completed?: boolean }) {
  try {
    return await db.updateTask(taskId, updates);
  } catch (error) {
    throw new Error('Failed to update the task');
  }
}

This ensures the user is immediately informed if the update doesn’t succeed, maintaining trust and usability.

5. Real-Time Feedback with Minimal Code

For a simple "like" button, Server Actions can provide real-time updates without additional client-side state management:

'use server';

async function likePost(postId: string) {
  await db.incrementLikes(postId);
  return { success: true };
}

The server action handles the logic, while the client updates the UI based on the response.

Conclusion

Server Actions in Next.js 15 represent a significant step forward in web development. By simplifying server-side logic, reducing latency, and optimizing data handling, they empower developers to create applications that are not only performant but also highly user-friendly. Whether you’re building a simple form or a complex application, Server Actions can help you deliver a seamless user experience.

As you explore Next.js 15, consider incorporating Server Actions into your projects to take full advantage of this innovative feature. Happy coding!

#14 Next.js 15: Unleashing the Potential of PPR⚡️

code_with_sahil — Sat, 28 Dec 2024 09:47:19 +0000

Partial Pre-rendering (PPR) is one of the standout features introduced in Next.js 15. This update brings significant enhancements to how pages are pre-rendered, giving developers more control over performance and user experience.

What is Partial Pre-rendering (PPR)?

PPR allows developers to selectively pre-render only parts of a page while leaving other parts to be rendered dynamically at runtime. This hybrid approach is particularly useful for applications with frequently changing content or user-specific data.

Instead of pre-rendering an entire page, PPR lets you decide which sections of the page to pre-render and which to fetch on demand. This optimizes build times and improves user experience by serving critical content faster.

Why is PPR Important?

Let’s say you’re building a travel planner app. Each user’s dashboard displays:

A list of personalized travel recommendations (dynamic).
A static section with travel tips and news.
A map highlighting popular destinations (dynamic but cached).

Before PPR, pre-rendering dynamic content required complex workarounds, or developers had to rely on client-side rendering, which could hurt SEO and performance. With PPR, you can combine static and dynamic content seamlessly.

Workflow

How Does Partial Pre-rendering Work in Next.js 15?

Let’s walk through how PPR works, step by step, using our travel planner app as the example.

Step 1: Pre-render Static Content

Static content like travel tips and news can be pre-rendered during the build process. These sections don’t change frequently and can be served quickly to users.

export async function getStaticProps() {
  const travelTips = await fetchTravelTips();
  return {
    props: {
      travelTips,
    },
  };
}

export default function TravelTips({ travelTips }) {
  return (
    <section>
      <h2>Travel Tips</h2>
      <ul>
        {travelTips.map((tip) => (
          <li key={tip.id}>{tip.text}</li>
        ))}
      </ul>
    </section>
  );
}

Step 2: Dynamic Content with PPR

Dynamic content, like personalized travel recommendations, is fetched during runtime but can still benefit from caching. With PPR, you can define these parts to be rendered dynamically.

export async function getServerSideProps(context) {
  const userId = context.params.userId;
  const recommendations = await fetchRecommendations(userId);

  return {
    props: {
      recommendations,
    },
  };
}

export default function Recommendations({ recommendations }) {
  return (
    <section>
      <h2>Your Travel Recommendations</h2>
      <ul>
        {recommendations.map((rec) => (
          <li key={rec.id}>{rec.destination}</li>
        ))}
      </ul>
    </section>
  );
}

Step 3: Combining Static and Dynamic Content

Now, we combine static and dynamic sections into one cohesive page. The static travel tips section is pre-rendered, while the recommendations are fetched on demand.

export default function Dashboard({ travelTips, recommendations }) {
  return (
    <main>
      <TravelTips travelTips={travelTips} />
      <Recommendations recommendations={recommendations} />
    </main>
  );
}

Step 4: Caching with ISR

To optimize the dynamic sections further, we can use Incremental Static Regeneration (ISR) for parts like the map of popular destinations. This ensures the map is updated periodically without rebuilding the entire app.

export async function getStaticProps() {
  const popularDestinations = await fetchPopularDestinations();
  return {
    props: {
      popularDestinations,
    },
    revalidate: 3600, // Revalidate every hour
  };
}

export default function PopularDestinations({ popularDestinations }) {
  return (
    <section>
      <h2>Popular Destinations</h2>
      <ul>
        {popularDestinations.map((dest) => (
          <li key={dest.id}>{dest.name}</li>
        ))}
      </ul>
    </section>
  );
}

Developer Impact of PPR in Next.js 15

Faster Builds: By pre-rendering only essential static content, build times are reduced significantly. Dynamic content is fetched as needed, making the process more efficient.

Improved User Experience: Critical content is delivered instantly, while dynamic sections load seamlessly in the background. This hybrid approach balances performance and interactivity.

SEO Benefits: Static sections are crawlable by search engines, improving your app’s discoverability. Dynamic content does not compromise your SEO efforts.

Conclusion

Partial Pre-rendering in Next.js 15 offers a flexible and efficient way to build modern applications. By combining static and dynamic rendering, PPR enhances performance, user experience, and SEO. Our travel planner app is just one example of how PPR can transform your development process.

As you explore this feature, think about the static and dynamic needs of your application. With PPR, Next.js 15 empowers you to deliver the best of both worlds!

#13 Incremental Static Regeneration (ISR) in Next.js 15: A Developer’s Guide

code_with_sahil — Fri, 27 Dec 2024 17:55:10 +0000

Imagine you’re building an e-commerce platform with thousands of products. You want the lightning-fast load times of Static Site Generation (SSG) for better SEO and user experience, but your product details and inventory frequently change. How do you strike the right balance between speed and keeping the content fresh? Enter Incremental Static Regeneration (ISR), and with Next.js 15, it just got better.

In this blog, we’ll explore the concept of ISR, walk through how it works, and dive into the impactful updates in Next.js 15 that change the way developers approach code. To make things practical, we’ll follow a single example of building a product listing page.

What is ISR?

ISR allows you to update static pages incrementally, without rebuilding the entire site. This means you can have the performance benefits of static pages while keeping content fresh. The pages are regenerated in the background at a defined interval or when specific triggers are met.

Key Benefits:

Scalability: No need to rebuild your entire site for small updates.
Performance: Users still get the speed of static pages.
Flexibility: Updates happen automatically in the background.

Workflow of Incremental Static Regeneration (ISR) in Next.js

The diagram above illustrates the workflow of ISR in Next.js. It shows how static pages are served, regenerated in the background, and revalidated to ensure fresh content.

Let’s Build: Product Listing with ISR

To understand ISR, we’ll build a product listing page for an e-commerce site. Here’s how it evolves step by step:

Step 1: Setting Up Static Generation

Initially, we create a product listing page using Static Site Generation (SSG). The page fetches data during build time and remains static.

// pages/products.js
import { getProducts } from '../lib/api';

export async function getStaticProps() {
  const products = await getProducts();

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Product Listings</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

This works perfectly for a fixed set of products, but what if we add new products or update existing ones frequently? Users would see outdated data until we rebuild the site. This is where ISR steps in.

Step 2: Introducing ISR

With ISR, we can specify how often the static pages should regenerate in the background. Let’s add a revalidation period to our product listing page.

export async function getStaticProps() {
  const products = await getProducts();

  return {
    props: {
      products,
    },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

Now, the page regenerates every 60 seconds. If you add or update a product in your database, users will see the changes after the revalidation period, without requiring a full site rebuild.

What’s New in Next.js 15 for ISR?

Next.js 15 introduces several updates that make ISR even more powerful and efficient:

1. Dynamic Revalidation with API Control

In previous versions, ISR revalidation was strictly time-based. With Next.js 15, you can programmatically trigger revalidation through APIs. This means developers can regenerate pages whenever specific events occur, such as updating a product in the database.

Example: Revalidate on Demand

export default async function handler(req, res) {
  if (req.method === 'POST') {
    await res.revalidate('/products'); // Revalidate the product listing page
    res.status(200).json({ message: 'Revalidated!' });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

2. Optimized Cache Invalidation

Next.js 15 optimizes cache invalidation, ensuring that stale pages are replaced efficiently without affecting other static pages. Developers now have better control over which pages need to be regenerated.

Step 3: Updating our Example with Dynamic Revalidation

Let’s say you have an admin dashboard where products can be added or edited. You can hook into the Next.js revalidation API to trigger updates immediately after a change.

// Trigger revalidation from your admin dashboard
const handleUpdate = async () => {
  await fetch('/api/revalidate', {
    method: 'POST',
  });
  alert('Page revalidated successfully!');
};

// Button in your admin panel
<button onClick={handleUpdate}>Update Product Listings</button>

With this setup, your product listing page updates almost instantly whenever new products are added or edited, giving users the best of both worlds: speed and freshness.

Developer Perspective: How the Updates Change Your Workflow

The updates in Next.js 15 make ISR more flexible and developer-friendly. Here’s how they impact your code:

Time-Based to Event-Driven: You’re no longer limited to periodic revalidation. You can now revalidate pages dynamically, making your code more responsive to changes.
Reduced Build Complexity: With optimized cache invalidation, you don’t need to worry about unintended side effects when regenerating pages.
API-First Approach: The revalidation API aligns well with modern event-driven architectures, allowing for seamless integration with webhooks and other real-time systems.

When to Use ISR

ISR is ideal for scenarios where content needs to stay fresh but doesn’t require real-time updates, such as:

E-commerce platforms (e.g., product listings and categories)
Blogs or news sites
Marketing pages with frequent updates

Conclusion

Incremental Static Regeneration in Next.js 15 is a game-changer for developers building scalable, high-performance applications. By combining the benefits of static generation with the flexibility of on-demand updates, ISR helps you deliver the best possible experience to your users.

Whether you’re building an e-commerce site, a blog, or a marketing platform, the new features in Next.js 15 make it easier than ever to keep your content fresh without sacrificing speed or scalability.

#12 Static Site Generation (SSG) in Next.js 15: A Developer’s Perspective👨‍💻🔍

code_with_sahil — Thu, 26 Dec 2024 17:42:34 +0000

If you’ve ever built a website with content that doesn’t change often—like a blog, product catalog, or portfolio—you’ve probably used or considered Static Site Generation (SSG). It’s fast, efficient, and great for SEO.

Let’s take a simple example. You’re running a blog site with hundreds of posts. Each post needs to load quickly for readers and work flawlessly across devices. With SSG, your pages are pre-rendered as static HTML files at build time, meaning users get blazing-fast responses.

But as your site grows, things can get tricky. You might notice:

Long build times when adding new pages.
Rigid revalidation settings that don’t give you enough control.
Managing updates feels tedious when content changes frequently.

This is where Next.js 15 shines, offering new features that simplify workflows for developers and make SSG more powerful than ever. Let’s first understand how SSG works and then explore the updates.

How Static Site Generation Works

Static Site Generation pre-renders pages during the build process. Instead of rendering pages dynamically with every user request, SSG creates static HTML files that can be served instantly to users. Here’s how it works:

Build Phase:

During the build, Next.js runs getStaticProps for each page. It fetches data from APIs, databases, or other sources and generates static HTML files.
Deploy Phase:

The static HTML files are deployed to a CDN (Content Delivery Network).
Serve Phase:

When users visit your site, they receive these pre-built HTML files, ensuring faster load times.

This process is simple and efficient, but it had limitations—especially for developers managing large-scale projects.

What’s New in Next.js 15?

The updates in Next.js 15 directly address the common challenges developers face when using SSG. Let’s break them down.

1. Incremental Parallel Processing

Previously, static pages were generated sequentially during the build. For websites with thousands of pages, this meant frustratingly long build times.

With Next.js 15, builds are now processed in parallel, leveraging modern multi-core CPUs. This improvement happens behind the scenes, but the difference is noticeable in build times.

Why it Matters:

Faster builds mean developers can iterate quicker, especially during development.
Dynamic routes like /blog/[slug].js scale better without impacting build speed.

2. Granular Control Over ISR (Incremental Static Regeneration)

SSG is great, but what if your content changes after the build? That’s where ISR comes in, allowing you to update pages on demand without rebuilding the entire site.

In earlier versions of Next.js, revalidation times were set globally for all ISR pages, which wasn’t flexible enough. Now, with Next.js 15, you can set revalidation times on a per-page basis using isrCacheTime.

Example – Before Next.js 15:

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // Global revalidation every 60 seconds
  };
}

Example – After Next.js 15:

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 3600, // Page-specific revalidation every 1 hour
  };
}

Why it Matters:

Developers can now customize revalidation schedules based on page importance or data frequency.
This leads to better caching strategies and reduced server load.

3. Simplified On-Demand Revalidation

Next.js 15 introduces a cleaner way to trigger updates for specific pages. For instance, if a blog post is edited, you can revalidate just that page without rebuilding the entire site.

Example – New Revalidation API:

export default async function handler(req, res) {
  await res.revalidate('/blog/my-post');
  res.status(200).json({ success: true });
}

Why it Matters:

This simplifies how developers handle dynamic content updates, reducing boilerplate code and improving workflows.

4. Edge Caching for Static Pages

Static pages in Next.js 15 are now automatically cached at edge locations worldwide when deployed to platforms like Vercel. This ensures lightning-fast load times for users, no matter where they are.

Why it Matters:

Developers don’t need to set up or manage additional caching layers manually. It’s automatic, freeing up time to focus on other tasks.

Developer Takeaways

The updates in Next.js 15 are subtle but impactful, making SSG more efficient, flexible, and developer-friendly. Here’s how these changes affect the way you write code:

Less Boilerplate: Simplified APIs reduce repetitive tasks, especially for ISR and revalidation.
Faster Iterations: Improved build times and granular revalidation mean you spend less time waiting and more time coding.
Scalability: Edge caching and parallel processing make it easier to scale static sites to thousands of pages.

Conclusion

Next.js 15 doesn’t just make SSG better—it makes it smarter. These updates aren’t flashy, but they solve real problems developers face when building and scaling websites. Whether you're managing a personal blog or a large-scale e-commerce site, these improvements will save you time and effort.

Ready to give it a try?

#11 Next.js 15: Revolutionizing Server-Side Rendering (SSR) for Modern Applications😯🤓

code_with_sahil — Sat, 21 Dec 2024 11:59:25 +0000

Next.js 15 brings game-changing updates to Server-Side Rendering (SSR), focusing on improved performance, developer experience, and compatibility with the latest technologies. This blog explores these updates with a practical example to help you get started.

Why Focus on SSR?

Server-Side Rendering ensures faster page loads, better SEO, and a smoother user experience. Next.js 15 takes SSR to the next level by optimizing caching, introducing asynchronous APIs, and supporting React 19, making it a must-have for modern web applications.

Key Updates in SSR for Next.js 15

1. Transition to Asynchronous Request APIs

Next.js 15 transitions critical SSR APIs to asynchronous functions, allowing the server to parallelize rendering and data fetching for faster response times. Here’s an example of using the new cookies() API.

Before (Synchronous):

export function GET() {
  const cookieValue = cookies().get('session-token');
  return new Response(`Cookie Value: ${cookieValue}`);
}

After (Asynchronous):

export async function GET() {
  const cookieValue = await cookies().get('session-token');
  return new Response(`Cookie Value: ${cookieValue}`);
}

With this change, components can process independent tasks simultaneously, reducing latency.

2. Updated Caching Semantics

Caching in Next.js 15 ensures your users always get the most relevant data by default while still giving you control for specific use cases.

GET Route Handlers: Previously cached by default, GET routes are now uncached unless explicitly configured.
Client Router Cache: During client-side navigation, page segments are also uncached by default, ensuring up-to-date data. Developers can enable caching using the staleTimes configuration

Here’s how to enable caching for GET routes:

export const config = {
  runtime: 'edge',
  revalidate: 60, // Cache data for 60 seconds
};

export async function GET() {
  const data = await fetch('https://api.example.com/data');
  return new Response(JSON.stringify(data));
}

3. Enhanced Hydration Error Reporting

Debugging SSR hydration issues is now easier than ever with Next.js 15. Detailed error views show the source code, the error's root cause, and suggestions for fixes, simplifying the developer experience.

4. Turbopack for Faster Development

With the stabilization of Turbopack in development mode, Next.js 15 significantly improves build times and SSR performance, especially in local development.

Example Workflow for SSR in Next.js 15

Let’s demonstrate the full power of these updates with a single, cohesive example, custom-crafted image.

Use Case: Fetching and Displaying User Data with SSR

Here’s how to build a server-side API route that fetches user data dynamically:

// app/api/user/[id]/route.js
import { cookies } from 'next/headers';

export async function GET(request, { params }) {
  const { id } = params;
  const sessionToken = await cookies().get('session-token');

  if (!sessionToken) {
    return new Response('Unauthorized', { status: 401 });
  }

  try {
    const response = await fetch(`https://api.example.com/users/${id}`);
    const userData = await response.json();

    if (!userData) {
      return new Response('User not found', { status: 404 });
    }

    return new Response(JSON.stringify(userData));
  } catch (error) {
    return new Response('Internal Server Error', { status: 500 });
  }
}

What This Code Does:

Retrieves a session-token from cookies asynchronously.
Validates the session token to ensure the user is authorized.
Fetches user data from an external API using the id parameter.
Returns the user data in JSON format or appropriate error messages.

Conclusion

Next.js 15 makes Server-Side Rendering more powerful and developer-friendly by introducing asynchronous APIs, smarter caching, and compatibility with React 19. With these updates, you can build faster, more scalable applications while improving the user experience.

Now is the perfect time to upgrade your projects to Next.js 15 and leverage these exciting features. Happy coding!

What are your thoughts on Next.js 15? Share your feedback and questions in the comments below!

#10 Next.js 15 Serverless Route Handlers: A New Era for Full-Stack Development🧐😎

code_with_sahil — Fri, 20 Dec 2024 11:46:33 +0000

Next.js 15 brings exciting updates that revolutionize how developers build and deploy serverless applications. One standout feature is the new Serverless Route Handlers, which elevate Next.js as a go-to framework for modern full-stack applications. In this blog, we'll dive deep into what Serverless Route Handlers are, how they work, and why they matter for developers building scalable and efficient APIs.

What Are Serverless Route Handlers?

Serverless Route Handlers in Next.js 15 allow you to write server-side code in a modular and scalable way. Unlike traditional API routes, these handlers fully embrace serverless architecture, enabling:

Improved scalability: Each route can scale independently.
Optimized performance: Handlers only execute the logic required for their specific route.
Seamless edge deployment: Ideal for edge computing and delivering low-latency APIs globally.

Key Features

Direct API Integration: Easily connect serverless logic to your frontend.
Dynamic Handlers: Support for dynamic route parameters.
Streaming Support: Built-in support for request/response streaming for real-time apps.
Edge-first Design: Leverage Next.js' powerful edge runtime for better performance.

Why You Should Use Serverless Route Handlers

Serverless Route Handlers empower developers by simplifying backend logic while maintaining the flexibility and speed of serverless functions. Here are a few reasons why they’re game-changing:

Cost Efficiency: Only pay for the execution time of your functions.
Focus on Business Logic: Let Next.js handle the heavy lifting of routing and scaling.
Real-time Experiences: Deliver real-time updates with built-in streaming support.
Improved Developer Experience: Enjoy type safety with TypeScript and built-in support for modern tools like Prisma and ORMs.

Serverless Route Handlers Workflow

How to Create Serverless Route Handlers in Next.js 15

Let’s walk through the process of building a simple API using Serverless Route Handlers.

Step 1: Set Up a New API Route

In Next.js 15, routes are defined in the /app/api directory. Create a file named hello/route.js:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET(request) {
  return NextResponse.json({ message: 'Hello, World!' });
}

Step 2: Add Dynamic Routing

To handle dynamic paths, use the [param] syntax:

// app/api/user/[id]/route.js
import { NextResponse } from 'next/server';

export async function GET(request, { params }) {
  const { id } = params;
  return NextResponse.json({ userId: id });
}

Step 3: Create an Example Serverless Route Handler

Let’s create an example API route that fetches user data from a database using Prisma and returns it as JSON:

// app/api/user/[id]/route.js
import { NextResponse } from 'next/server';
import prisma from '@/lib/prisma';

export async function GET(request, { params }) {
  const { id } = params;
  try {
    const user = await prisma.user.findUnique({
      where: { id: Number(id) },
    });
    if (!user) {
      return NextResponse.json({ error: 'User not found' }, { status: 404 });
    }
    return NextResponse.json(user);
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

Conclusion

Next.js 15's Serverless Route Handlers are a groundbreaking feature that makes full-stack development more efficient and scalable. Whether you're building APIs for a personal project or a production app, these handlers simplify the process while optimizing performance.

With the ability to integrate edge computing, real-time streaming, and dynamic routing, the possibilities are endless. If you haven't tried Next.js 15 yet, now is the time to dive in and explore its potential.

Ready to start? Share your feedback and let's build something amazing with Next.js 15!

#9 Is React 19 Stable or Is the Next Big Update Coming Soon?🤔

code_with_sahil — Wed, 11 Dec 2024 10:53:54 +0000

When React 19 was officially released in March 2023, it generated a buzz among developers worldwide. While not a groundbreaking release like some of its predecessors, React 19 introduced a set of thoughtful improvements aimed at optimizing both performance and the overall developer experience. In this blog, we’ll dive into whether React 19 is stable enough for production and explore if it sets the stage for a larger update in the near future.

What’s New in React 19?

React 19 focuses on polishing the library’s capabilities with features that cater to modern web development needs. Here are the key updates:

1.New Hooks for Enhanced Developer Experience

React 19 enriches the developer’s toolkit with new hooks:

useTransition: Enables smooth transitions during state updates, particularly useful for apps with complex data flows. It enhances user experience by managing UI updates seamlessly.
useOptimisticUpdate: A game-changer for improving perceived performance. This hook lets you update the UI optimistically before waiting for the server response.
useFormStatus: Simplifies form state management by tracking states like pending, submitted, or error, making forms much easier to handle.
use: A flexible hook for fetching data and managing loading/error states in a concise way.

2.Refs as Props

Passing ref as a prop to child components is now officially supported. This streamlines tasks like managing DOM interactions for scrolling, animations, or focus, offering a more elegant way to handle such functionality.

3.Document Metadata API

React 19 introduces built-in support for setting metadata directly from components. You can now define <title>, <meta description>, and <meta keywords> without external libraries, making SEO optimizations easier.

4.Performance Optimizations

Under the hood, React 19 includes several updates to rendering and state update cycles, leading to faster load times and smoother interactions for users.

What Does React 19 Signal About the Future?

React 19 builds on that foundation, refining the tools and performance optimizations rather than overhauling the framework. This iterative improvement approach suggests React is evolving to stay aligned with modern trends in web development—prioritizing:

SEO and Accessibility: With the Document Metadata API, React shows it’s actively addressing SEO challenges for SPAs.
Developer Productivity: The introduction of hooks like useOptimisticUpdate indicates a focus on making common patterns easier and faster to implement.
Performance at Scale: The ongoing optimizations in rendering cycles and data-fetching strategies highlight React’s commitment to scalability.

Conclusion

React 19 may not be a groundbreaking release, but it’s a solid and stable update that builds on the framework’s strengths. By introducing hooks for better state and form handling, improving ref management, and making metadata easier to manage, React 19 caters to both developers and end-users.

As we look forward to React 20 and beyond, it’s clear that the React team’s focus remains on optimization and practicality. For developers, this means React continues to be a reliable choice for building scalable, high-performance web applications. So, is React 19 stable? Absolutely. And does it hint at exciting updates in the future? Without a doubt.

#8 Let’s See If You Know the Difference: Entities 🆚 Tables in Databases

code_with_sahil — Fri, 06 Dec 2024 17:02:27 +0000

Ever wondered how your favorite apps manage to organize and retrieve information so seamlessly? The answer lies in two foundational concepts: Entities and Tables. Get these right, and you’re on your way to designing databases that are both powerful and intuitive!

Understanding the Difference: Entities vs. Tables

When stepping into the world of databases, two terms often surface—entities and tables. While they’re sometimes used interchangeably, understanding the distinction between them is the first step to becoming a pro at database design.

What is an Entity?

At its core, an entity represents a "thing" you want to store information about. It could be:

A Person: like a student or a customer.
An Object: like a car or a book.
An Event: like a transaction or a booking.
An Idea: like a project or a task.

Each entity is described by its attributes—the details or properties that define it. For example, a "Student" entity might have these attributes:

Name
Age
Address
Student ID (a unique identifier)

Entities are abstract concepts in your mind or design—what you want to track or manage in the real world.

What is a Table?

A table is the physical implementation of an entity within a database. Think of it as a grid where rows and columns organize the data:

Rows represent individual instances of the entity.
Columns represent the attributes or properties of the entity.

For example, a "Student" table would look like this:

Student ID	Name	Age	Address	Course Enrolled
1	Alice	20	123 Main St	Computer Science
2	Bob	22	456 Oak Ave	Electrical Engineering
3	Charlie	19	789 Pine Ln	Mathematics

In this table:

Each row represents a student (Alice, Bob, Charlie).
Each column represents an attribute (Name, Age, etc.).

How Entities and Tables Connect

Designing a database always starts with identifying entities and their attributes. Here’s how the process flows:

Identify Key Entities: Ask yourself, "What am I tracking?" For example, in a school database, the key entities might be Student, Teacher, and Course.
Define Attributes for Each Entity: For each entity, list the details you want to track. For a "Student," this might include Name, Age, Student ID, etc.
Create Tables: Transform these entities into tables, where attributes become columns, and each row represents a real-world instance.

Example: A Student Database

Let’s bring it all together with an example. Imagine you’re creating a student database.

Entity: Student

Attributes:

Student ID
Name
Age
Address
Course Enrolled

Table: Students

Student ID	Name	Age	Address	Course Enrolled
1	Alice	20	123 Main St	Computer Science
2	Bob	22	456 Oak Ave	Electrical Engineering
3	Charlie	19	789 Pine Ln	Mathematics

Here, the abstract "Student" entity has been turned into a tangible table, ready for your database.

Key Takeaways

Entities are the concepts or things you care about.
Tables are the implementation of those entities in a database.
Understanding how entities and tables connect is the foundation of designing effective databases.

Why It Matters

A well-designed database saves time, reduces errors, and scales effortlessly. By mastering the distinction between entities and tables, you’ll avoid common design pitfalls and create systems that are efficient and future-proof.

Ready to take your database design to the next level? Start small, focus on the essentials, and build your expertise one table at a time.

#7 Crafting a Cohesive UI Color Palette: A Step-by-Step Guide😬👀

code_with_sahil — Fri, 31 May 2024 04:44:06 +0000

Choosing the right colors for your UI is crucial. It sets the tone, influences user experience, and can even impact brand perception. But with so many color options, where do you even begin? This guide will break down the process of creating a UI color palette into easy-to-follow steps:

Finding Your Base

Every palette needs a starting point. Ideally, this is your brand's primary color, which you'll find in your brand guidelines [1]. If you don't have a brand color, fret not! You can choose a middle-ground color that will act as the foundation for your lighter and darker shades [1].

Building Your Support System

These are the colors that will add visual interest and communicate specific messages to your users.

A good rule of thumb is to include four core support colors:

Green: Represents success or positive actions.
Orange or Yellow: Used for warnings or notifications that require attention.
Red: Signals errors or critical issues.
Blue: Often used for informational messages or links.

Shading Like a Pro

Your palette shouldn't just be three basic shades (light, medium, dark) of each color. The recommends creating nine shades for each by laying them out on a scale from 100 to 900, with the middle shade being your base color. Here's a neat trick for shade selection: imagine a line going from the top left corner of a Color Picker to the bottom right corner, passing through your base color. Pick your shades along this arc for a natural progression.

The Power of Neutrals

Don't forget the power of neutrals! Choose a mid-tone gray and follow the same shading process you used for your colored options to create a range of grays that will complement your palette.

Testing, Testing, 1, 2, 3

Once you have your color family laid out, it's time for some quality assurance. Line up all the shades of each color and squint. Do the values (lightness or darkness) change gradually across each scale? If not, adjust the shades until they appear cohesive. Finally, integrate your palette into your UI design and see it in action. Make sure you have enough color options to work with, that the colors harmonize well, and that there's sufficient contrast between text and background elements.

Bonus Tip: Color Theory for the Curious

This blog post focused on a practical approach, but there's a whole world of color theory waiting to be explored! Understanding color theory can elevate your color palette choices to a whole new level. If you're interested in learning more about color harmonies, complementary colors, and the psychology of color, do some additional research online. There are many resources available to help you become a color master!