Forem: Ajin Varghese Chandy

How to Add JSON-LD Structured Data in Next.js for SEO

Ajin Varghese Chandy — Fri, 21 Feb 2025 05:40:53 +0000

Search engines like Google use structured data (JSON-LD) to better understand your website's content, enabling rich search results. In this tutorial, you'll learn how to implement JSON-LD in a Next.js application using the <Head> component.

Why Use JSON-LD?

Helps search engines index your site more effectively.
Enables rich snippets (FAQ, breadcrumbs, business info, etc.).
Improves visibility and click-through rates in search results.

Step-by-Step Guide to Adding JSON-LD in Next.js

1. Install Next.js (If Not Already Installed)

If you don’t have a Next.js project, create one by running:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

2. Add JSON-LD in Your Next.js Page

Next.js provides a built-in <Head> component to manage metadata. We will use this to inject our JSON-LD script dynamically.

Example: Implementing JSON-LD in `pages/index.tsx`

import Head from "next/head";

export default function Home() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "name": "ared.dev",
        "url": "https://ared.dev",
        "author": {
          "@type": "Person",
          "name": "Ajin Varghese Chandy",
          "url": "https://ared.dev"
        }
      },
      {
        "@type": "WebPage",
        "name": "Ajin Varghese Chandy | Web Developer",
        "description": "Ajin is a web developer proficient in Next.js, Svelte, Node.js, and Express. He has developed multiple websites and Chrome extensions.",
        "url": "https://ared.dev",
        "isPartOf": {
          "@type": "WebSite",
          "url": "https://ared.dev"
        }
      },
      {
        "@type": "Person",
        "name": "Ajin Varghese Chandy",
        "url": "https://ared.dev",
        "sameAs": [
          "https://github.com/aajinn",
          "https://x.com/ChandyAjin"
        ],
        "jobTitle": "Web Developer",
        "worksFor": {
          "@type": "Organization",
          "name": "ared.dev",
          "url": "https://ared.dev"
        },
        "image": {
          "@type": "ImageObject",
          "url": "https://ared.dev/path-to-your-profile-image.jpg"
        }
      }
    ]
  };

  return (
    <>
      <Head>
        <title>ared.dev | Web Developer</title>
        <meta name="description" content="Ajin Varghese Chandy - Web Developer proficient in Next.js, Svelte, Node.js, and Express." />
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      </Head>
      <main>
        <h1>Welcome to ared.dev</h1>
      </main>
    </>
  );
}

3. Explanation of the Code

Head** Component**: Used to add metadata inside <head>.
JSON-LD Object: Defines structured data for the website.
dangerouslySetInnerHTML: Injects JSON-LD as a script tag inside <Head>.
@graph** Property**: Contains multiple schema types (WebSite, WebPage, Person) for better SEO.

4. Validate Your JSON-LD Schema

After adding structured data, test it using:

Final Thoughts

By adding JSON-LD structured data in Next.js, you improve SEO and enhance how your site appears in search results. This method ensures your metadata is dynamically added and up-to-date.

Do you have questions or need further improvements? Let me know! 🚀

Simplifying Complex Systems: The Facade Pattern Explained

Ajin Varghese Chandy — Thu, 12 Dec 2024 14:25:59 +0000

The Facade pattern in software development acts as a simplified interface to a complex subsystem, hiding its intricacies from the user. This pattern is essentially good programming practice that promotes encapsulation by providing a clear and concise way to interact with a potentially convoluted system.

Understanding the Facade

Imagine ordering a product online. Clicking the "Buy Now" button triggers a series of intricate processes: payment processing, inventory checks, shipping calculations, and fraud detection. As a customer, you are shielded from this complexity, interacting solely with the straightforward "Buy Now" button.

This analogy illustrates the Facade pattern. It presents a simplified interface (the "Buy Now" button) while concealing the complex underlying mechanisms.

Facade Pattern in Code

Consider a scenario without the Facade pattern: interacting with a system comprising payment processing, inventory management, and fraud detection would require writing code to handle each component individually. This approach quickly becomes cumbersome and difficult to manage.

However, with the Facade pattern, you can create an OrderFacade class that encapsulates these subsystems. This facade provides a simplified placeOrder method that handles all the underlying complexity, making the user interaction straightforward.

Benefits of the Facade Pattern

Simplified Interaction: The Facade pattern shields users from the complexity of the underlying system, offering a clean and easy-to-use interface.
Improved Code Maintainability: Encapsulating complex logic within the Facade class makes the code more maintainable and less prone to errors.
Reduced Code Duplication: Using the Facade pattern avoids repetitive code by centralising the interaction with the subsystem in one place.

Potential Drawback: The God Object

One potential drawback of the Facade pattern is the risk of creating a "God Object" - a class that becomes overly large and unwieldy due to handling too much responsibility. However, this risk can be mitigated by careful design and refactoring.

Facades in Everyday Programming

Many common programming tools employ the Facade pattern. For instance, HTTP clients like fetch abstract away the complexities of TCP connections, retry logic, and header parsing, providing a simple interface for making API requests. Similarly, data structures like ArrayList in Java hide the complexities of array resizing behind a user-friendly interface.

The Facade pattern is a valuable tool for simplifying interaction with complex systems. By understanding its principles and applying it judiciously, you can write cleaner, more maintainable, and less error-prone code.

Integrating Stellar Payments into a SvelteKit Web Application.

Ajin Varghese Chandy — Tue, 30 Jul 2024 14:12:21 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

Integrating Stellar Payments into a SvelteKit Web Application

Introduction

In this tutorial, we'll walk through the process of integrating Stellar payments into a SvelteKit web application. By the end, you'll have a functional web app that allows users to send payments on the Stellar network using a modern, reactive UI.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript
Familiarity with Svelte (not required but helpful)
Node.js and npm installed on your machine
A text editor or IDE of your choice

Step 1: Setting Up the Project

First, let's create a new SvelteKit project:

npm create svelte@latest stellar-payment-app
cd stellar-payment-app
npm install

When prompted, choose the following options:

Skeleton project
JavaScript with JSDoc for checking
No additional options

Now, let's install the necessary dependencies:

npm install stellar-sdk

Step 2: Creating the Payment Form Component

Create a new file at src/lib/PaymentForm.svelte and add the following code:

<script>
  import { StellarSdk } from 'stellar-sdk';

  let destination = '';
  let amount = '';
  let result = '';

  async function handleSubmit() {
    try {
      const server = new StellarSdk.Server('https://horizon-testnet.stellar.org');
      const sourceKeypair = StellarSdk.Keypair.random();

      // Fund the account (only for testnet)
      await fetch(`https://friendbot.stellar.org?addr=${sourceKeypair.publicKey()}`);

      const sourceAccount = await server.loadAccount(sourceKeypair.publicKey());
      const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {
        fee: StellarSdk.BASE_FEE,
        networkPassphrase: StellarSdk.Networks.TESTNET
      })
      .addOperation(StellarSdk.Operation.payment({
        destination: destination,
        asset: StellarSdk.Asset.native(),
        amount: amount.toString()
      }))
      .setTimeout(30)
      .build();

      transaction.sign(sourceKeypair);
      const transactionResult = await server.submitTransaction(transaction);

      result = `Payment sent! Transaction hash: ${transactionResult.hash}`;
    } catch (error) {
      result = `Error: ${error.message}`;
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <div>
    <label for="destination">Destination Address:</label>
    <input id="destination" bind:value={destination} required>
  </div>
  <div>
    <label for="amount">Amount (XLM):</label>
    <input id="amount" type="number" step="0.0000001" bind:value={amount} required>
  </div>
  <button type="submit">Send Payment</button>
</form>

{#if result}
  <p>{result}</p>
{/if}

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 300px;
    margin: 0 auto;
  }
  input {
    width: 100%;
    padding: 0.5rem;
  }
  button {
    padding: 0.5rem;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
</style>

Step 3: Updating the Main Page

Replace the contents of src/routes/+page.svelte with the following:

<script>
  import PaymentForm from '$lib/PaymentForm.svelte';
</script>

<main>
  <h1>Stellar Payment App</h1>
  <PaymentForm />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }
  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

Step 4: Running the Application

Now you can start your application:

npm run dev

Visit http://localhost:5173 in your browser to see the application running.

What I Created

This submission is a comprehensive tutorial that guides developers through the process of creating a web application for sending Stellar payments using SvelteKit. The tutorial covers the entire development process, from setting up a SvelteKit project to implementing Stellar payment functionality and creating a user-friendly interface.

This tutorial supports the Stellar developer experience in several key ways:

Modern Web Development: By using SvelteKit, we introduce Stellar developers to a modern, efficient web development framework. This helps bridge the gap between blockchain development and contemporary front-end practices.
Step-by-Step Guidance: The tutorial provides clear, detailed instructions for each stage of development, making it accessible for developers new to Stellar or SvelteKit.
Practical Application: Instead of abstract concepts, we focus on building a functional payment application, giving developers hands-on experience with Stellar's core features.
Best Practices: Throughout the tutorial, we emphasize best practices in both Stellar integration and web development, setting a solid foundation for future projects.
Scalable Architecture: The project structure we use is designed to be easily expandable, allowing developers to build upon this foundation for more complex applications.

How can it be used by other devs?

Other developers can use this tutorial in several ways:

Learning Resource: Developers new to Stellar can use this as a starting point to understand how to integrate Stellar payments into web applications.
Project Boilerplate: The completed project serves as a boilerplate for Stellar-based web applications. Developers can clone the repository and modify it for their specific needs.
Reference Implementation: Even for developers not using SvelteKit, the tutorial provides a clear reference for how to structure Stellar integration in a web application.
Inspiration for Further Development: The tutorial concludes with suggestions for next steps, inspiring developers to expand on the basic functionality and explore more of Stellar's features.
Community Resource: By providing a clear, modern example of Stellar integration, this tutorial can serve as a community resource, potentially being expanded or adapted by other developers in the Stellar ecosystem.

By combining the simplicity of Svelte with the power of Stellar, we hope to inspire a new wave of dApp in the Stellar ecosystem.

Journey

I'm prrety new to blockchain. i just want try new things.