Forem: Ghulam Murtaza

What I Wish I Knew Before Learning TypeScript

Ghulam Murtaza — Thu, 05 Jun 2025 12:01:16 +0000

When I began learning TypeScript, I thought it would be JavaScript with type annotations added on. I was wrong—beautifully, frustratingly, wonderfully wrong.

If you're a JavaScript coder wading into TypeScript, here's what I wish I'd known before I began.

1. TypeScript Isn't Just About Types — It's About Mindset

Sure, TypeScript adds types. But more importantly, it changes how you think about writing code.

In JavaScript, you can be a bit loose — send anything anywhere and deal with the consequences at runtime. TypeScript, on the other hand, encourages you to think upfront: What does this function return? What can this variable be? That discipline makes you write safer, more predictable code.

Lesson: Embrace the shift in mindset. You're writing code for both humans and the compiler.

2. You Don’t Need to Type Everything

One of my early mistakes was over-typing everything. I manually annotated every variable, even when TypeScript's powerful type inference could handle it.

// Overkill
let name: string = "Ali";

// Better
let name = "Ali"; // TypeScript infers it's a string

Lesson: Let TypeScript do its job. Manual typing is useful—but not always necessary.

3. Start Small — Migrate Incrementally

You don't need to rewrite your whole JavaScript project in TypeScript on day one. Start by renaming .js files to .ts, fixing errors, and introducing types gradually.

Lesson: Treat migration as a marathon, not a sprint.

4. The Type System Is Deep — But You Don't Need It All (Yet)

TypeScript’s type system is one of the most powerful among mainstream languages. But that also means it can be intimidating.

Don’t worry if you don’t understand infer, keyof, Mapped Types, or Discriminated Unions right away. You’ll get there.

Lesson: Master the basics first — interfaces, types, and enums will take you far.

5. Errors Are Your Friends (Seriously)

At first, TypeScript's errors can feel overwhelming. But once you start reading them carefully, you’ll see they’re incredibly descriptive and helpful.

Instead of thinking "ugh, another error", try: "what is TypeScript trying to protect me from?"

Lesson: Learn to read and Google error messages. They often contain the answers.

6. You’ll Still Need JavaScript Knowledge

TypeScript doesn’t replace JavaScript — it enhances it. You still need a solid foundation in JS to be effective with TS. Concepts like closures, hoisting, async/await, and prototypal inheritance still matter.

Lesson: Think of TypeScript as a layer on top, not a replacement.

7. Tooling Is a Game Changer

TypeScript unlocks a whole new level of editor support:
✅ Autocompletion
✅ Real-time error checking
✅ Refactoring tools

If you're using VS Code, TypeScript becomes a joy to work with. The tooling is half the magic.

Lesson: Learn the shortcuts and make your editor your best friend.

Final Thoughts: The Struggle Is Worth It

TypeScript has a learning curve, no doubt. But the confidence, safety, and clarity it brings to your codebase are absolutely worth it.

You’ll spend less time chasing bugs and more time building cool things.

The Evolution of Next.js: Advanced Caching, Partial Prerendering, and Better DX

Ghulam Murtaza — Mon, 03 Mar 2025 16:28:01 +0000

Introduction

Next.js is evolving rapidly, and its future looks promising with groundbreaking updates that redefine caching, rendering, and developer experience. While some features, like Server Actions, remain controversial, others, such as Partial Prerendering (PPR) and the new granular caching system, are making waves.

React 19 introduces enhancements like useOptimistic and useFormStatus, but Next.js is going even further with its caching strategies. This post explores the latest caching improvements, including use cache, smart tagging, custom cache profiles, and PPR(Partial Prerendering).

Partial Prerendering (PPR) enables you to combine static and dynamic components together in the same route.

The Big Picture: Next.js Caching Evolution

Caching in Next.js has taken a huge leap forward. With the introduction of use cache, developers now have more granular control over data persistence at multiple levels: file, component, and function. Additionally, cache tagging and custom cache profiles allow more precise invalidation, making caching smarter and more efficient.

Enabling the New Caching System

To use the new caching features, enable the experimental caching system in next.config.js:

const config = {
  experimental: {
    dynamicIO: true, // Enables the advanced caching system
    cacheLife: {
      blog: {
        stale: 3600,     // Client cache: 1 hour
        revalidate: 900, // Server refresh: 15 mins
        expire: 86400,   // Max life: 1 day
      },
    },
  },
};

Using `use cache` for Smarter Caching

The "use cache" directive allows developers to cache data at different levels of granularity:

1. File-Level Caching

"use cache";
export default function Page() {
  return <div>Cached Page</div>;
}

2. Component-Level Caching

export async function PriceDisplay() {
  "use cache";
  const price = await fetchPrice();
  return <div>${price}</div>;
}

3. Function-Level Caching

export async function getData() {
  "use cache";
  return await db.query();
}

Smart Caching with Tags

Cache invalidation has always been tricky, but Next.js now makes it simpler with cache tagging. You can tag cached data and selectively invalidate it when updates occur.

import { unstable_cacheTag as cacheTag, revalidateTag } from 'next/cache';

// Tagging cached data
export async function ProductList() {
  'use cache';
  cacheTag('products');  // Tag this cache entry
  const products = await fetchProducts();
  return <div>{products}</div>;
}

// Invalidating cached data
export async function addProduct() {
  'use server';
  await db.products.add(...);
  revalidateTag('products');  // Clears cache for 'products' tag
}

Custom Cache Profiles

Next.js allows developers to create custom cache profiles, defining different caching behaviors for different parts of an application.

import { unstable_cacheLife as cacheLife } from "next/cache";

export async function BlogPosts() {
  "use cache";
  cacheLife("blog"); // Uses the pre-defined cache profile from next.config.js
  return await fetchPosts();
}

Advanced Caching Techniques

1. Cache Keys and Function Arguments

By default, function arguments become part of the cache key, ensuring that different inputs are cached separately.

export async function UserCard({ id, onDelete }) {
  "use cache";
  const user = await fetchUser(id); // `id` is used in the cache key
  return <div onClick={onDelete}>{user.name}</div>;
}

2. Interleaving Cached & Dynamic Content

Cached content can be interwoven with dynamic elements using React’s Suspense.

export async function CachedWrapper({ children }) {
  "use cache";
  const header = await fetchHeader();
  return (
    <div>
      <h1>{header}</h1>
      {children} {/* Dynamic content */}
    </div>
  );
}

3. Multiple Cache Tags for Better Invalidation

export async function ProductPage({ id }) {
  "use cache";
  cacheTag(["products", `product-${id}`, "featured"]);  // Multiple cache tags
}

Partial Prerendering (PPR): The Next Big Thing

Partial Prerendering (PPR) is a new rendering strategy in Next.js that blends static and dynamic content seamlessly. It allows pages to be served instantly with static content while streaming dynamic content as it loads.

Enabling PPR

// next.config.js
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
export default nextConfig;

Implementing PPR

import { Suspense } from "react";
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui";

export const experimental_ppr = true;

export default function Page() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

With PPR, static content appears instantly, and dynamic components load progressively, improving user experience.

Type-Safe Cache Management

To ensure type safety and avoid magic strings, it's best to define cache keys and tags using constants:

export const CACHE_LIFE_KEYS = {
  blog: "blog",
} as const;

const config = {
  experimental: {
    cacheLife: {
      [CACHE_LIFE_KEYS.blog]: {
        stale: 3600,
        revalidate: 900,
        expire: 86400,
      },
    },
  },
};

Similarly, a structured approach to cache tagging ensures consistency:

export const CACHE_TAGS = {
  blog: {
    all: ["blog"] as const,
    list: () => [...CACHE_TAGS.blog.all, "list"] as const,
    post: (id: string) => [...CACHE_TAGS.blog.all, "post", id] as const,
  },
} as const;

function tagCache(tags: string[]) {
  cacheTag(...tags);
}

Conclusion

Next.js is pushing the boundaries with smarter caching, Partial Prerendering, and enhanced developer experience. The introduction of use cache, cache tagging, and structured cache invalidation marks a major shift towards performance-oriented development.

The future of Next.js is bright, and these innovations will undoubtedly make building scalable, high-performance applications even more seamless.

🚀 Stay tuned for more updates as these features mature!

Authentication and Authorization Best Practices

Ghulam Murtaza — Mon, 24 Feb 2025 07:38:51 +0000

In an era where cybersecurity threats are ever-evolving, robust authentication and authorization mechanisms are essential to protecting sensitive data and ensuring secure access control. While these terms are often used interchangeably, authentication verifies a user's identity, whereas authorization determines what actions or resources they can access. Implementing best practices for both is critical to safeguarding digital environments.

Understanding Authentication and Authorization

Authentication is the process of verifying who a user is, ensuring that only legitimate users gain access to a system. Authorization, on the other hand, dictates what resources an authenticated user is permitted to access. Without strong authentication, unauthorized users may gain entry, and without proper authorization, legitimate users may access data beyond their scope, leading to potential security risks.

Best Practices for Authentication

Use Multi-Factor Authentication (MFA): Relying on passwords alone is no longer sufficient. Implement MFA by combining at least two factors—something the user knows (password), something they have (security token), or something they are (biometrics).

Enforce Strong Password Policies: Require users to create complex passwords with a mix of uppercase and lowercase letters, numbers, and symbols. Encourage the use of password managers to generate and store credentials securely.

Adopt Passwordless Authentication: Methods such as biometric authentication, hardware tokens, and one-time passcodes (OTP) reduce reliance on passwords and mitigate risks associated with credential theft.

Implement Secure Authentication Protocols: Utilize modern authentication standards like OAuth 2.0, OpenID Connect, and SAML for secure identity verification.

Monitor and Detect Anomalous Login Activity: Use AI-driven monitoring tools to detect and respond to unusual login attempts, such as logins from unfamiliar locations or devices.

Best Practices for Authorization

Apply the Principle of Least Privilege (PoLP): Grant users only the minimum permissions necessary to perform their tasks. Regularly review and update access controls to prevent privilege creep.

Utilize Role-Based or Attribute-Based Access Control (RBAC/ABAC): Define user roles or attributes to ensure access is granted based on predefined rules rather than individual assignments.

Implement Just-In-Time (JIT) Access: Reduce standing privileges by granting temporary access to resources only when needed, thereby limiting exposure to potential security threats.

Use Token-Based Authorization: Employ secure tokens such as JSON Web Tokens (JWT) or OAuth tokens to manage session authentication and authorization securely.

Regularly Audit Access Controls: Conduct periodic access reviews to detect and remediate unauthorized or outdated permissions, ensuring continuous security compliance.

Emerging Trends in Authentication and Authorization

With evolving technology, businesses must stay ahead by adopting newer authentication and authorization strategies. Zero Trust Security, where no entity is trusted by default, is becoming a preferred approach. Additionally, behavioral biometrics and AI-powered access control are being increasingly implemented to enhance security while maintaining a seamless user experience. Continuous authentication, which evaluates user behavior patterns rather than relying on a single authentication step, is also gaining traction.

Conclusion

Strong authentication and authorization practices are foundational to modern cybersecurity strategies. Organizations must continuously assess and refine their security measures to keep pace with emerging threats. By implementing multi-factor authentication, enforcing least privilege access, and leveraging modern identity standards, businesses can significantly enhance their security posture and minimize risks associated with unauthorized access.

Investing in strong authentication and authorization frameworks is not just a necessity but a proactive approach to preventing breaches, maintaining compliance, and fostering user trust in an increasingly digital world.

A Beginner's Guide to Learning and Excelling in Programming

Ghulam Murtaza — Sat, 15 Feb 2025 06:16:19 +0000

Introduction

Programming is one of the most in-demand skills today, and learning it can open doors to numerous career opportunities. Whether you want to develop websites, create mobile apps, or work with artificial intelligence, understanding how to code is the first step. If you're a beginner or a complete newbie, this guide will help you get started and show you how to improve as a programmer over time.

Step 1: Choose a Programming Language

There are many programming languages to choose from, but as a beginner, it's best to start with one that is beginner-friendly and widely used. Here are some recommendations:

Python – A versatile language used in web development, automation, data science, and artificial intelligence.
JavaScript – The backbone of web development, enabling interactive and dynamic website functionalities.
C – A fundamental language that helps in understanding low-level programming and system architecture.
Rust – A modern systems programming language known for its memory safety, performance, and concurrency.
Swift – The preferred language for developing fast and efficient iOS applications.

Choose a language based on your interest and future goals.

Step 2: Learn the Basics

Before jumping into complex projects, you must understand the basic concepts of programming, such as:

Variables and Data Types
Control Structures (Loops, Conditional Statements)
Functions and Methods
Object-Oriented Programming (OOP)
Data Structures and Algorithms

Use interactive coding platforms like Codecademy, freeCodeCamp, or LeetCode to practice these concepts.

Step 3: Work on Small Projects

Once you are comfortable with the basics, start working on small projects to apply what you've learned. Here are some project ideas:

A simple calculator
A to-do list app
A weather application using an API
A personal blog or portfolio website

Building projects will help reinforce your knowledge and improve your problem-solving skills.

Step 4: Read and Write Code Every Day

Programming is like learning a new language; the more you practice, the better you become. Here are some tips:

Read open-source code from GitHub to see how experienced developers write code.
Contribute to beginner-friendly projects.
Maintain a coding journal or blog to document what you learn.

Step 5: Learn Problem-Solving and Algorithms

A good programmer is not just someone who knows syntax but also understands problem-solving. Improve your skills by:

Practicing coding challenges on platforms like LeetCode, HackerRank, and CodeWars.
Learning about common algorithms and data structures like sorting, searching, linked lists, and trees.
Studying real-world problems and how they are solved with code.

Step 6: Join a Coding Community

Surrounding yourself with like-minded individuals can accelerate your learning. Join communities like:

Stack Overflow (for coding help and questions)
GitHub (for collaborating on projects)
Reddit (for discussions on programming topics)
Discord and Slack groups for programmers

Engaging with a community will help you stay motivated and expose you to new learning resources.

Step 7: Never Stop Learning

Technology is constantly evolving, and so should you. Keep up with the latest trends by:

Following tech blogs and YouTube channels.
Reading books on programming best practices.
Exploring new frameworks and libraries.
Attending coding boot camps and hackathons.

Conclusion

Programming is a skill that takes time and patience to master. Start with the basics, practice consistently, work on projects, and engage with the coding community. With dedication and effort, you’ll improve your skills and become a proficient developer. Keep coding, stay curious, and enjoy the journey!

Are you a beginner in programming? Share your experience in the comments below!

DeepSeek AI: Privacy Risks and Safety Measures You Should Know!

Ghulam Murtaza — Thu, 13 Feb 2025 18:24:22 +0000

As artificial intelligence continues to evolve, new AI tools like DeepSeek are emerging, promising advanced capabilities in natural language processing, content generation, and more. However, with the rise of AI-powered platforms, privacy concerns have become a major talking point. If you’re considering using DeepSeek AI, it’s important to understand the potential risks and safeguards associated with it. In this blog, we’ll explore the safety of DeepSeek AI and the key privacy concerns you should be aware of before using it.

What is DeepSeek AI?

DeepSeek AI is an advanced AI-powered platform designed to assist users in various tasks, including text generation, coding, and conversational AI. Similar to other AI models like OpenAI’s ChatGPT, DeepSeek processes user inputs and provides human-like responses. Its efficiency and accuracy make it a promising tool for businesses, developers, and individuals.

Key Privacy Concerns with DeepSeek AI

While DeepSeek AI offers valuable features, its use comes with potential privacy concerns. Below are some key issues you should consider:

1. Data Collection and Storage

Many AI models store and analyze user interactions to improve their performance. If DeepSeek AI logs conversations, this could pose a risk to users who share sensitive or personal information.

2. Third-Party Data Sharing

Some AI platforms share user data with third-party companies for analytics, advertising, or model training purposes. If DeepSeek AI engages in such practices, users could face data breaches or misuse.

3. Security Vulnerabilities

AI platforms are potential targets for cyberattacks. If DeepSeek AI lacks robust security measures, hackers could exploit vulnerabilities to gain access to stored user data. Ensuring the platform follows industry-standard encryption and security protocols is crucial.

4. Lack of Transparency

Many AI platforms operate as “black boxes,” meaning users have limited visibility into how their data is processed and stored. If DeepSeek AI does not provide clear policies on data usage, users may have difficulty understanding the extent of their exposure.

5. Compliance With Data Protection Laws

Regulations like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA) require companies to protect user data and provide transparency. If DeepSeek AI does not comply with such regulations, users may not have adequate protection or control over their personal data.

How to Use DeepSeek AI Safely

If you decide to use DeepSeek AI, here are some steps you can take to minimize privacy risks:

Avoid Sharing Sensitive Information – Do not input personal, financial, or confidential data into the AI.
Review Privacy Policies – Check DeepSeek AI’s privacy policy to understand how your data is collected, stored, and used.
Use Temporary or Anonymous Accounts – If possible, use a temporary or secondary email to limit personal exposure.
Check Security Measures – Ensure that the platform uses encryption and other security protocols to protect user data.
Monitor Data Permissions – If DeepSeek AI offers an option to limit data sharing, adjust your settings accordingly.

Conclusion

While DeepSeek AI presents exciting opportunities for users, it’s essential to stay informed about potential privacy risks. By understanding how your data is handled and taking necessary precautions, you can make a more informed decision about whether DeepSeek AI is the right tool for you. Always prioritize your digital privacy and security when engaging with AI-driven platforms.

Do you have concerns or experiences with DeepSeek AI? Share your thoughts in the comments below!

How to Build a Custom Hook in React JS

Ghulam Murtaza — Wed, 29 Jan 2025 08:46:42 +0000

🚀 Introduction

React has revolutionized frontend development with its component-based architecture. One of its most powerful features is custom hooks, which allow developers to encapsulate and reuse logic efficiently. If you find yourself using useState, useEffect, or useRef repeatedly across multiple components, creating a custom hook can significantly improve code organization and reusability.

📌 In this article, we’ll cover:

🎯 What custom hooks are and why they’re useful
🛠️ A step-by-step guide to creating a custom hook
📌 Real-world examples of practical custom hooks
✅ Best practices for writing custom hooks

🤔 What is a Custom Hook in React?

A custom hook is a JavaScript function that starts with use (e.g., useCustomHook) and encapsulates reusable stateful logic using React’s built-in hooks. Instead of repeating logic in multiple components, we can extract it into a custom hook and use it across our application.

💡 Example Use Case: Suppose you need to interact with localStorage in multiple components. Instead of writing localStorage.getItem() and localStorage.setItem() repeatedly, you can create a custom hook to handle this logic.

🏗️ How to Create a Custom Hook

To create a custom hook, follow these steps:

🏷️ Define a function with a name starting with use.
🔄 Use built-in hooks like useState, useEffect, or useContext inside the function.
📤 Return values or functions that can be used by components.
📌 Import and use the custom hook in your components.

Let’s now build some practical custom hooks that solve real-world problems.

Example 1: 🗄️ useLocalStorage (Managing Local Storage in React)

Local storage is commonly used to persist user preferences or session data. Let’s create a custom hook for handling local storage.

Step 1: 🛠️ Create the Hook (useLocalStorage.js)

import { useState, useEffect } from "react";

function useLocalStorage(key: string, initialValue: any) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error accessing localStorage", error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error("Error saving to localStorage", error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

Step 2: 🎯 Use It in a Component

import React from "react";
import useLocalStorage from "./useLocalStorage";

function App() {
  const [name, setName] = useLocalStorage("username", "Guest");

  return (
    <div>
      <h2>Welcome, {name}! 🎉</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default App;

✅ Why This is Useful:

💾 Saves user input persistently in local storage.
🔄 Retains values even after page refresh.

Example 2: 🌐 useFetch (Handling API Requests in React)

Fetching data is a common operation in React applications. Instead of writing fetch() calls repeatedly, we can create a reusable hook for API requests.

Step 1: 🛠️ Create the Hook (useFetch.js)

import { useState, useEffect } from "react";

function useFetch(url: string) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => {
        if (!res.ok) throw new Error("Failed to fetch");
        return res.json();
      })
      .then((data) => setData(data))
      .catch((error) => setError(error))
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Step 2: 🎯 Use It in a Component

import React from "react";
import useFetch from "./useFetch";

function UsersList() {
  const { data, loading, error } = useFetch("https://jsonplaceholder.typicode.com/users");

  if (loading) return <p>⏳ Loading...</p>;
  if (error) return <p>❌ Error: {error.message}</p>;

  return (
    <ul>
      {data.map((user: any) => (
        <li key={user.id}>👤 {user.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

✅ Why This is Useful:

🔄 Centralizes API fetching logic.
⚡ Handles loading and error states efficiently.

🏆 Best Practices for Writing Custom Hooks

🎯 Keep Hooks Focused: Each hook should have a single responsibility.
🏷️ Follow the Naming Convention: Always start function names with use.
🔄 Use Dependency Arrays Wisely: Avoid unnecessary re-renders in useEffect.
📌 Ensure Hooks Are Reusable: Avoid using component-specific logic inside hooks.
🧪 Test Custom Hooks: Use Jest and React Testing Library to ensure they work correctly.

🎉 Conclusion

Custom hooks in React allow developers to abstract logic, improve code reusability, and enhance maintainability. Whether it's handling local storage, API calls, or dark mode toggling, custom hooks provide an elegant solution to avoid redundant code.

By following best practices and structuring hooks properly, you can build efficient and reusable components that scale well in any React project.

Would you like to explore more complex custom hooks? Let me know in the comments! 🚀

Mastering the Art of Clean and Readable Code

Ghulam Murtaza — Thu, 23 Jan 2025 15:02:36 +0000

Writing clean and readable code is a skill every developer should master. Not only does it make your code easier to maintain and debug, but it also ensures that other developers can collaborate on your projects seamlessly. Below are some professional tips to help you write cleaner and more readable code.

1. Follow Consistent Naming Conventions

Use descriptive and consistent names for variables, functions, and classes. A good naming convention makes your code self-explanatory.

Examples:

Use camelCase for variables and functions (e.g., calculateTotal, userProfile).
Use PascalCase for classes (e.g., UserManager, OrderDetails).
Avoid abbreviations like calcTot or usrProf unless they are universally understood.

Bad Practice:

let x = 5; // What does x represent?

Good Practice:

let itemsInCart = 5;

2. Keep Functions Small and Focused

Functions should do one thing and do it well. Avoid writing large functions with multiple responsibilities.

Bad Practice:

function processOrder(order) {
    // Validate order
    // Calculate total
    // Update inventory
    // Send confirmation email
}

Good Practice:

function validateOrder(order) { ... }
function calculateTotal(order) { ... }
function updateInventory(order) { ... }
function sendConfirmationEmail(order) { ... }

3. Write Meaningful Comments

Comments should explain the why, not the what. Avoid redundant comments that state the obvious.

Bad Practice:

// Increment i by 1
i++;

Good Practice:

// Ensures the loop runs until all items are processed

4. Use Consistent Formatting

Adopt a consistent style guide and stick to it. Use tools like Prettier or ESLint for automated formatting.

Key Tips:

Indent code consistently (e.g., 2 or 4 spaces).
Use proper spacing for readability.
Avoid excessively long lines; keep them under 80-100 characters.

Example:

if (user.isLoggedIn) {
    showDashboard();
} else {
    redirectToLogin();
}

5. Avoid Hardcoding Values

Use constants or configuration files instead of hardcoding values directly in your code.

Bad Practice:

if (user.age > 18) {
    // Do something
}

Good Practice:

const MINIMUM_AGE = 18;
if (user.age > MINIMUM_AGE) {
    // Do something
}

6. Use DRY (Don’t Repeat Yourself) Principle

Avoid duplicating code. Extract repeated logic into reusable functions or components.

Bad Practice:

if (user.role === 'admin') {
    // Show admin dashboard
}
if (user.role === 'editor') {
    // Show editor dashboard
}

Good Practice:

function showDashboard(role) {
    // Logic to show the dashboard based on role
}
showDashboard(user.role);

7. Handle Errors Gracefully

Anticipate and handle errors properly using try-catch blocks or error-handling functions.

Bad Practice:

const data = fetchData();
console.log(data.name); // Crashes if data is null

Good Practice:

try {
    const data = fetchData();
    console.log(data.name);
} catch (error) {
    console.error('Failed to fetch data:', error);
}

8. Write Tests

Testing ensures your code behaves as expected and reduces the chances of introducing bugs.

Tips:

Write unit tests for small functions.
Use integration tests for modules.
Automate testing using tools like playwright Jest, Mocha, or Cypress.

9. Refactor Regularly

Don’t wait for your codebase to become messy. Make refactoring a regular part of your workflow.

Refactoring Ideas:

Simplify complex logic.
Remove unused code or dependencies.
Update outdated libraries or patterns.

10. Leverage Tools and Linters

Use tools to maintain code quality and catch errors early.

Recommended Tools:

ESLint: Detects code issues.
Prettier: Enforces consistent formatting.
SonarQube: Analyzes code quality.

Final Thought

Clean and readable code isn’t just a personal achievement; it’s a professional responsibility. By following these principles, you not only make your life easier but also improve team collaboration and project success. Remember, code is read more often than it is written, so make it a pleasure to read!

Routing in Next.js – How to Use App Router in Your Next Apps

Ghulam Murtaza — Thu, 16 Jan 2025 19:58:31 +0000

The App Router for Next.js 14 means developers can build more structured, modular, and highly performing applications by introducing an approach of file-based routing within the app/ directory. Here's a guideline on how to effectively apply the App Router in Next.js for your applications:

What is the App Router?

The App Router allows one to define routes in an entirely new way. Simply by structuring components in folders. Each folder located in the /app directory maps to a URL path. Such an organization gives features such as nested layouts and group routes, while being easier on data fetching when dealing with larger applications and thus making route management better.

Setting Up the App Router

Create a new Next.js project (If you haven't already):
npx create-next-app@latest
Enable the App router:
In Next.js 14, the /app directory is set up by default, and this enables the App Router. No extra configuration is needed.

Basic Routing

Each folder and file inside the app/ directory automatically maps to a route in your application.

app/
 ├── page.tsx           # Home page (e.g., "/")
 ├── about/
 │    └── page.tsx      # About page (e.g., "/about")
 └── blog/
      ├── page.tsx      # Blog index page (e.g., "/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog post (e.g., "/blog/my-post")

Static Routes: app/about/page.tsx will automatically be available at /about.
Dynamic Routes: You can create dynamic routes using square brackets ([ ]). For example, app/blog/[slug]/page.tsx will dynamically render pages at paths like /blog/my-first-post or /blog/hello-world.

Layout and Nesting

The App Router lets you define layouts in just one place and reuse them across different pages, so it is rather effortless to consistently design UI elements throughout sections of your app.

Create a Layout:

To create a layout, add a layout.tsx file in a folder. This layout will apply to all pages and components within that folder.

app/
 ├── layout.tsx         # Root layout for the entire app
 ├── about/
 │    ├── layout.tsx    # About page-specific layout
 │    └── page.tsx      # About page content

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My App</header>
        {children}
      </body>
    </html>
  );
}

Nested Routes and Layouts:

Each layout file applies to its folder and any nested folders, allowing for nested route structure with consistent layouts.

app/
 ├── dashboard/
 │    ├── layout.tsx         # Layout for the entire dashboard section
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings

("/dashboard/settings")

Dashboard Layout: The layout.tsx file inside /dashboard applies to both /dashboard and /dashboard/settings

Route Groups:

Route groups allow for organizing routes without affecting the URL structure by adding a group folder in parentheses. This is useful for structuring your app’s code without impacting the URLs.

app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"

The folders profile and settings will appear at /profile and /settings, but using (dashboard) groups them visually for the code structure.

Catch-All Routes.

Catch-all routes are used when you want to handle multiple URL segments under a single route file. This is achieved by using ... in the file name.

Example: [...slug].tsx captures multiple path segments like /blog/a/b/c.

Handling Errors and Loading States

Next.js 14 lets you manage errors and loading states using special components within each route.

Error Boundary:

To handle errors within a route, add error.tsx in a folder.

app/
 ├── blog/
 │    ├── error.tsx     # Error boundary for blog pages
 │    └── page.tsx      # Blog main page

Loading States: Use loading.tsx to show loading indicators for specific routes.

Data Fetching in App Router

With Next.js 14, you can fetch data server-side directly in the component using the use hook or async/await.

// app/dashboard/page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function DashboardPage() {
  const data = await getData();
  return <div>{JSON.stringify(data)}</div>;
}

Server Actions

Server Actions allow you to handle server-side logic directly within component code, such as handling form submissions.

// app/contact/page.tsx
"use client";

import { useForm } from 'react-hook-form';

export default function ContactForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    "use server";
    await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Deploying the App Router

Deploying an app using the App Router is the same as any Next.js app. Platforms like Vercel are optimized for Next.js applications and offer the best performance and integration.

Deployment Process:

Configure Environment Variables for API keys or other sensitive data.
Build and Export the project with:

npm rum build

Deploy to Vercel: Use the Vercel CLI or connect your repository for seamless deployment.

App Router in Next.js 14 is flexible and modular in terms of building scalable and fast applications with cleaner code. So, with the approach described above, you would have the ability to tap all the power of the App Router in your Next.js projects.

Forem: Ghulam Murtaza

What I Wish I Knew Before Learning TypeScript

1. TypeScript Isn't Just About Types — It's About Mindset

2. You Don’t Need to Type Everything

3. Start Small — Migrate Incrementally

4. The Type System Is Deep — But You Don't Need It All (Yet)

5. Errors Are Your Friends (Seriously)

6. You’ll Still Need JavaScript Knowledge

7. Tooling Is a Game Changer

Final Thoughts: The Struggle Is Worth It

The Evolution of Next.js: Advanced Caching, Partial Prerendering, and Better DX

Introduction

The Big Picture: Next.js Caching Evolution

Enabling the New Caching System

Using use cache for Smarter Caching

Smart Caching with Tags

Custom Cache Profiles

Advanced Caching Techniques

Partial Prerendering (PPR): The Next Big Thing

Type-Safe Cache Management

Conclusion

Authentication and Authorization Best Practices

Understanding Authentication and Authorization

Best Practices for Authentication

Best Practices for Authorization

Emerging Trends in Authentication and Authorization

Conclusion

A Beginner's Guide to Learning and Excelling in Programming

Introduction

Step 1: Choose a Programming Language

Step 2: Learn the Basics

Step 3: Work on Small Projects

Step 4: Read and Write Code Every Day

Step 5: Learn Problem-Solving and Algorithms

Step 6: Join a Coding Community

Step 7: Never Stop Learning

Conclusion

DeepSeek AI: Privacy Risks and Safety Measures You Should Know!

What is DeepSeek AI?

Key Privacy Concerns with DeepSeek AI

1. Data Collection and Storage

2. Third-Party Data Sharing

3. Security Vulnerabilities

4. Lack of Transparency

5. Compliance With Data Protection Laws

How to Use DeepSeek AI Safely

Conclusion

How to Build a Custom Hook in React JS

🚀 Introduction

🤔 What is a Custom Hook in React?

🏗️ How to Create a Custom Hook

Example 1: 🗄️ useLocalStorage (Managing Local Storage in React)

Step 1: 🛠️ Create the Hook (useLocalStorage.js)

Step 2: 🎯 Use It in a Component

Example 2: 🌐 useFetch (Handling API Requests in React)

Step 1: 🛠️ Create the Hook (useFetch.js)

Step 2: 🎯 Use It in a Component

🏆 Best Practices for Writing Custom Hooks

🎉 Conclusion

Mastering the Art of Clean and Readable Code

1. Follow Consistent Naming Conventions

2. Keep Functions Small and Focused

3. Write Meaningful Comments

4. Use Consistent Formatting

5. Avoid Hardcoding Values

6. Use DRY (Don’t Repeat Yourself) Principle

7. Handle Errors Gracefully

8. Write Tests

9. Refactor Regularly

10. Leverage Tools and Linters

Final Thought

Routing in Next.js – How to Use App Router in Your Next Apps

What is the App Router?

Setting Up the App Router

Basic Routing

Layout and Nesting

Create a Layout:

Nested Routes and Layouts:

Route Groups:

Catch-All Routes.

Using `use cache` for Smarter Caching