DEV Community: Chandu Bobbili

Say Goodbye to Changelog Chaos: Introducing changesetgoo

Chandu Bobbili — Mon, 23 Feb 2026 18:43:22 +0000

If you ship libraries or APIs, you’ve undoubtedly felt the release day pain: “What actually changed in this release?” “Did we bump major, minor, or patch correctly?” “Wait, who was supposed to update the changelog?”

Tracking these changes manually is tedious and error-prone, which is exactly why the Changesets workflow was created. By letting you record each change (along with its semver impact and a description) as you work, these entries are automatically merged into a single changelog at release time. This guarantees that users and tools know exactly what changed and how "breaking" a release actually is.

Having spent time in the JS ecosystem working heavily with frameworks like React and Next.js, I've come to rely on the standard JS Changesets workflow. It provides a fantastic developer experience. But when stepping outside of that ecosystem, I hit a snag: I wanted that exact same workflow, but I didn't want to drag Node.js and npm into non-JavaScript projects.

So, I built a solution.

Enter changesetgoo

I built changesetgoo -- a lightweight, standalone Go CLI for managing changesets and changelogs. It brings the excellent JS Changesets workflow to Go projects (and any other repository, really) without the heavy frontend tooling dependencies.

Why you might want to use it:

Zero Node.js Dependency: It's a single compiled binary. You can install it with go install and run it anywhere. No extra runtimes, no node_modules.
Centralized Semver: Add your changesets as you code (major, minor, or patch + description). When you're ready, let the tool compute the exact next version and update your CHANGELOG.md automatically.
Streamlined Release Workflow: You can execute a full release cycle with a single command. It will apply your changesets, bump the version, update the changelog, commit the changes, and tag the release. It's built to be equally at home in a CI pipeline or run locally.
Git-Friendly by Design: It creates semantic tags locally, leaving you in complete control of when to push to your remote.

Quick Usage
Getting started is as simple as running a few commands:

changesetgoo add          # Add a changeset (prompts for type + description)
changesetgoo version      # Merge changesets into CHANGELOG, bump version
changesetgoo publish --push   # Full release: apply, bump, commit, tag, push

If you care about keeping your versioning predictable and your changelogs pristine in Go—or any other repository where you want a lightweight CLI—give it a try.

Feedback, issues, and contributions are always welcome!

🔗 GitHub: github.com/ChanduBobbili/changesetgoo
📦 pkg.go.dev: pkg.go.dev/github.com/ChanduBobbili/changesetgoo

🚀 Biome Has Entered the Chat: A New Tool to Replace ESLint and Prettier

Chandu Bobbili — Mon, 07 Apr 2025 05:16:15 +0000

If you’ve ever set up a JavaScript or TypeScript project, chances are you've spent way too much time configuring ESLint, Prettier, and their dozens of plugins. We’ve all been there — fiddling with .eslintrc, fighting with formatting conflicts, and installing what feels like half the npm registry just to get decent code quality tooling.

But what if you could replace all of that with a single, fast, zero-dependency tool?

Meet Biome — the new kid on the block that’s here to clean up the JavaScript tooling mess.

🧠 What is Biome?

Biome is an all-in-one toolchain for JavaScript and TypeScript projects that combines:

A blazing-fast formatter : Supports JS, TS, JSX, TSX, JSON, CSS and GraphQL.
A powerful linter : Has 293 linting rules to perform detailed diagnostics.
And an extensible parser : 15x faster linting compared to the ESLint and 35x faster formatting compared to the Prettier.

The best part? It’s written in Rust, which means it’s not just fast — it’s ridiculously fast.

🔯 Quick Benchmark

To give you an idea of how fast Biome really is:

# ESLint + Prettier (cold start)
Time: ~4.2s

# Biome (cold start)
Time: ~0.6s

Note: Performance may vary depending on project size and system specs.

🧰 Why Biome is a Game-Changer

Let’s be real: the JS tooling ecosystem has gotten bloated. ESLint + Prettier + TypeScript support + plugin configuration = a mess.

Biome offers:

Unified Toolchain
Better Performance
Simplified Configuration

Feature	Biome	ESLint + Prettier
🔧 Formatting	✅ Built-in	✅ Prettier (separate)
🧺 Linting	✅ Built-in rules	✅ ESLint + plugins
⚡ Speed	🚀 Super fast (Rust)	🐢 Slower (Node.js)
🧰 Setup	🟢 Minimal config	🔴 Plugin jungle
🔀 Dependencies	❌ Zero	⛓️ Lots of dev deps
🧪 TypeScript	✅ First-class support	✅ With `@typescript-eslint`
🛠️ Extensible?	🔒 Not yet (planned)	✅ Fully extensible

🧩 What About Plugins?

While Biome isn’t extensible yet, plugin support is on the roadmap. The team is actively working toward allowing custom rules and framework-specific integrations. If you rely on advanced linting or want to build custom rules, now’s a great time to get involved and contribute.

⚙️ Getting Started with Biome

Getting up and running with Biome is incredibly simple:

1. Installation

Biome instructs the package manager to pin an exact version:

npm install --save-dev --save-exact @biomejs/biome

2. Initialization

npx @biomejs/biome init

3. Usage

Formatting:

npx @biomejs/biome format --write <files>

Linting:

npx @biomejs/biome lint --write <files>

Combined Check:

npx @biomejs/biome check --write <files>

4. Migration from ESLint and Prettier

Biome offers dedicated commands to ease the migration:

npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

💬 My Experience Migrating to Biome

I migrated one of my TypeScript projects (~5k LOC) from ESLint + Prettier to Biome and saw:

4x faster linting & formatting.
Removed 10+ npm packages.
No more config conflicts between ESLint and Prettier.
Built-in type-aware linting just worked.

Before:

"devDependencies": {
  "eslint": "...",
  "eslint-plugin-react": "...",
  "eslint-config-prettier": "...",
  "prettier": "...",
  ...
}

After:

"devDependencies": {
  "biome": "^1.0.0"
}

🧪 Is Biome Ready for Production?

Short answer: Yes, especially for new projects.

Longer answer: Biome is still evolving. While it's stable and production-ready for many common setups, it doesn’t yet have the plugin ecosystem ESLint offers. If you rely on complex linting rules, custom plugins, or framework-specific tools — you might want to wait or contribute.

But for 80% of use cases? Biome is already a better experience.

🌞 The Future of JavaScript Tooling?

Biome is more than just fast. It’s simpler, cleaner, and more developer-friendly than anything else out there. It’s taking the best parts of ESLint and Prettier, cutting the bloat, and delivering a smoother developer experience.

And it’s just getting started.

Mastering SEO for Next.js: A Practical Optimization Checklist

Chandu Bobbili — Thu, 13 Mar 2025 04:22:27 +0000

SEO (Search Engine Optimization) is one of the key factors to rank your website higher on Google and receive more traffic.

I've been on a deep dive into Next.js SEO, and I'm excited to share what I've learned. This tutorial provides a clear, actionable checklist to help you optimize your blog and see real results in search engine rankings. Let's make your content shine!

1. Meta Tags

Ensure your website's SEO and social media presence are strong by implementing this meta tag checklist:

Standard Meta Tags : title, description, keywords, robots, viewport, charSet
Open Graph Meta Tags : og:site_name, og:local, og:title, og:description, og:type, og:url, og:image, og:image:alt, og:image:type, og:image:width, og:image:height
Article Meta Tags (Open Graph): article:published_time, article:modified_time, article:author
Twitter Meta Tags: twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image

For optimal compatibility with social media platforms, utilize PNG or JPG image formats in the og:image and twitter:image meta tags, as WebP support is inconsistent.

Meta Tags for Next.js App Router

The App Router provides export const metadata for static metadata and generateMetadata for dynamic metadata generation, simplifying meta tag implementation in Next.js.

Want to know how? The metadata docs have all the info.

Static Metadata

You can define static metadata by adding the export const metadata argument inside page.tsx or layout.tsx:

import type { Viewport, Metadata } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#ffffff"
};

export const metadata: Metadata = {
  title: "This is meta title",
  description: "This is meta description.",
  metadataBase: new URL("https://example.com"),
  keywords: [
    "example",
    "seo",
    "javascript",
    "nextjs",
  ],
  robots: {
    index: true,
    follow: true,
    "max-image-preview": "large",
    "max-snippet": -1,
    "max-video-preview": -1,
    googleBot: "index, follow"
  },
  alternates: {
    canonical: "https://example.com",
    types: {
      "application/rss+xml": "https://example.com/rss.xml"
    }
  },
  applicationName: "Example | Chandu Bobbili",
  appleWebApp: {
    title: "Example | Chandu Bobbili",
    statusBarStyle: "default",
    capable: true
  },
  verification: {
    google: "YOUR_DATA",
    yandex: ["YOUR_DATA"],
    other: {
      "msvalidate.01": ["YOUR_DATA"],
      "facebook-domain-verification": ["YOUR_DATA"]
    }
  },
  icons: {
    icon: [
      {
        url: "/favicon.ico",
        type: "image/x-icon"
      },
      {
        url: "/favicon-16x16.png",
        sizes: "16x16",
        type: "image/png"
      }
      // add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png
    ],
    shortcut: [
      {
        url: "/favicon.ico",
        type: "image/x-icon"
      }
    ],
    apple: [
      {
        url: "/apple-icon-57x57.png",
        sizes: "57x57",
        type: "image/png"
      },
      {
        url: "/apple-icon-60x60.png",
        sizes: "60x60",
        type: "image/png"
      }
      // add apple-icon-72x72.png, apple-icon-76x76.png, apple-icon-114x114.png, apple-icon-120x120.png, apple-icon-144x144.png, apple-icon-152x152.png, apple-icon-180x180.png
    ]
  },
  openGraph: {
    url: "https://example.com",
    type: "website",
    title: "This is title",
    description: "This is the description",
    images: [
      {
        url: "https://example.com/images/home/thumbnail.png",
        width: 1200,
        height: 630,
        alt: "image"
      }
    ]
  },
  twitter: {
    card: "summary_large_image",
    title: "This is title",
    description: "This is the description",
    creator: "@ChanduBobbili",
    site: "@ChanduBobbili",
    images: [
      {
        url: "https://example.com/images/home/thumbnail.png",
        width: 1200,
        height: 630,
        alt: "dminhvu"
      }
    ]
  },
};

Dynamic Metadata

Implement the generateMetadata function to define dynamic metadata for pages with dynamic route segments, such as [slug]/page.tsx or [id]/page.tsx.

import type { Metadata, ResolvingMetadata } from "next";

type Params = {
  slug: string;
};

type Props = {
  params: Params;
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { slug } = params;

  const post: Post = await fetch(`YOUR_ENDPOINT`, {
    method: "GET",
    next: {
      revalidate: 60 * 60 * 24
    }
  }).then((res) => res.json());

  return {
    title: `${post.title} | Webpage`,
    authors: [
      {
        name: post.author || "Chandu"
      }
    ],
    description: post.description,
    keywords: post.keywords,
    openGraph: {
      title: `${post.title} | Webpage`,
      description: post.description,
      type: "article",
      url: `https://example.com/${post.slug}`,
      publishedTime: post.created_at,
      modifiedTime: post.modified_at,
      authors: ["https://example.com/about"],
      tags: post.categories,
      images: [
        {
          url: `https://example/assets/${post.slug}/thumbnail.png?tr=f-png`,
          width: 1024,
          height: 576,
          alt: post.title,
          type: "image/png"
        }
      ]
    },
    twitter: {
      card: "summary_large_image",
      site: "@ChanduBobbili",
      creator: "@ChanduBobbili",
      title: `${post.title} | webpage`,
      description: post.description,
      images: [
        {
          url: `https://example/assets/${post.slug}/thumbnail.png?tr=f-png`,
          width: 1024,
          height: 576,
          alt: post.title
        }
      ]
    },
    alternates: {
      canonical: `https://example.com/${post.slug}`
    }
  };
}

Next.js App Router automatically includes charSet and viewport, so you don't need to define them manually.

Meta Tags for Next.js Pages Router

You'll find these meta tags present on this page when using the Next.js Pages Router:

import Head from "next/head";

export default function Page() {
  return (
    <Head>
      <title>Example | Webpage</title>
      <meta
        name="description"
        content="Learn how to optimize your Next.js website for SEO by following this complete checklist."
      />
      <meta
        name="keywords"
        content="nextjs seo complete checklist, nextjs seo tutorial"
      />
      <meta name="robots" content="index, follow" />
      <meta name="googlebot" content="index, follow" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta charSet="utf-8" />
      <meta property="og:site_name" content="Blog | Webpage" />
      <meta property="og:locale" content="en_US" />
      <meta
        property="og:title"
        content="Enter your title here"
      />
      <meta
        property="og:description"
        content="Enter your description here"
      />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://example.com/nextjs-seo" />
      <meta
        property="og:image"
        content="https://example/assets/nextjs-seo/thumbnail.png?tr=f-png"
      />
      <meta property="og:image:alt" content="Next.js SEO" />
      <meta property="og:image:type" content="image/png" />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta
        property="article:published_time"
        content="2024-01-11T11:35:00+07:00"
      />
      <meta
        property="article:modified_time"
        content="2024-01-11T11:35:00+07:00"
      />
      <meta
        property="article:author"
        content="https://www.linkedin.com/in/chandu-bobbili-15863319b"
      />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="@ChanduBobbili" />
      <meta name="twitter:creator" content="@ChanduBobbili" />
      <meta
        name="twitter:title"
        content="Enter your title here"
      />
      <meta
        name="twitter:description"
        content="Enter your description here"
      />
      <meta
        name="twitter:image"
        content="https://example/assets/nextjs-seo/thumbnail.png?tr=f-png"
      />
    </Head>
  );
}

2. Sitemap

A sitemap helps search engines find and index your website's content, which is crucial for SEO.

Sitemap for Next.js App Router

For Next.js App Router, you can define the sitemap.ts file at app/sitemap.ts:

import {
  getAllCategories,
  getAllPostSlugsWithModifyTime
} from "@/utils/getData";
import { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const defaultPages = [
    {
      url: "https://example.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1
    },
    {
      url: "https://example.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9
    },
    {
      url: "https://example.com/contact",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9
    }
    // other pages
  ];

  const postSlugs = await getAllPostSlugsWithModifyTime();
  const categorySlugs = await getAllCategories();

  const sitemap = [
    ...defaultPages,
    ...postSlugs.map((e: any) => ({
      url: `https://example.com/${e.slug}`,
      lastModified: e.modified_at,
      changeFrequency: "daily",
      priority: 0.8
    })),
    ...categorySlugs.map((e: any) => ({
      url: `https://example.com/category/${e}`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.7
    }))
  ];

  return sitemap;
}

With this sitemap.ts file created, you can access the sitemap at https://example.com/sitemap.xml.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <lastmod>2024-01-11T02:03:09.613Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  <!-- other pages -->
</urlset>

Visit Next.js App Router Sitemap to learn more.

Sitemap for Next.js Page Router

If you're using the Pages Router in Next.js, next-sitemap is a convenient tool for sitemap creation following your build.

For example, running the following command will install next-sitemap and generate a sitemap for your app:

npm install next-sitemap
npx next-sitemap

next-sitemap requires a basic config file (next-sitemap.config.js) under your project root, checkout

A sitemap will be generated at public/sitemap.xml:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
  <loc>https://example.com</loc>
    <lastmod>2024-01-11T02:03:09.613Z</lastmod>
    <changefreq>daily</changefreq>
  <priority>0.7</priority>
</url>
<!-- other pages -->
</urlset>

3. robots.txt

A robots.txt file guides search engine crawlers by defining which pages they are allowed or disallowed to access.

robots.txt for Next.js App Router

For Next.js App Router, you don't need to manually define a robots.txt file. Instead, you can define the robots.ts file at app/robots.ts:

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: ["/"],
      disallow: ["/search?q=", "/admin/"]
    },
    sitemap: ["https://example.com/sitemap.xml"]
  };
}

With this robots.ts file created, you can access the robots.txt file at https://example.com/robots.txt.

robots.txt for Next.js Pages Router

For Next.js Pages Router, you can create a robots.txt file at public/robots.txt:

User-agent: *
Disallow:
Sitemap: https://example.com/sitemap.xml

For pages you don't want indexed, such as search results or those marked 'noindex', this line will block search engine crawlers:

User-agent: *
Disallow: /search?q=
Disallow: /admin

4. Link Tags

Beyond meta tags, your website requires the inclusion of several key link tags:

canonical
alternative
icon
apple-touch-icon
manifest

Link Tags for Next.js App Router

Link tags in Next.js App Router are handled in the same way as meta tags, via export const metadata or generateMetadata.

import type { Viewport, Metadata } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#ffffff"
};

export const metadata: Metadata = {
  // other parts
  alternates: {
    canonical: "https://example.com",
    types: {
      "application/rss+xml": "https://example.com/rss.xml"
    }
  },
  icons: {
    icon: [
      {
        url: "/favicon.ico",
        type: "image/x-icon"
      },
      {
        url: "/favicon-16x16.png",
        sizes: "16x16",
        type: "image/png"
      }
      // add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png
    ],
    shortcut: [
      {
        url: "/favicon.ico",
        type: "image/x-icon"
      }
    ],
    apple: [
      {
        url: "/apple-icon-57x57.png",
        sizes: "57x57",
        type: "image/png"
      },
      {
        url: "/apple-icon-60x60.png",
        sizes: "60x60",
        type: "image/png"
      }
      // add apple-icon-72x72.png, apple-icon-76x76.png, apple-icon-114x114.png, apple-icon-120x120.png, apple-icon-144x144.png, apple-icon-152x152.png, apple-icon-180x180.png
    ]
  },
};

Link Tags for Next.js Pages Router

To demonstrate the link tags, this page would contain the following when using the Pages Router:

import Head from "next/head";

export default function Page() {
  return (
    <Head>
      {/* other parts */}
      <link
        rel="alternate"
        type="application/rss+xml"
        href="https://example.com/rss.xml"
      />
      <link rel="canonical" href="https://example.com/nextjs-seo" />
      <link rel="icon" href="/favicon.ico" type="image/x-icon" />
      <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
      <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
      {/* add apple-touch-icon-72x72.png, apple-touch-icon-76x76.png, apple-touch-icon-114x114.png, apple-touch-icon-120x120.png, apple-touch-icon-144x144.png, apple-touch-icon-152x152.png, apple-touch-icon-180x180.png */}
      <link
        rel="icon"
        type="image/png"
        href="/favicon-16x16.png"
        sizes="16x16"
      />
      {/* add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png */}
    </Head>
  );
}

5. JSON-LD Schema

JSON-LD, a lightweight Linked Data format, facilitates machine parsing and generation, contributing to its widespread adoption.

This part can be applied to both Pages Router and App Router.

You can easily generate JSON-LD Schema for your website by using the Schema Markup Generator Tool.
And I can put it anywhere, whether inside the head tag or the body tag is fine:

import Head from "next/head";

export default function Page() {
  return (
    <div>
      {/* other parts */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </div>
  );
}

6. Script Optimization

Script Optimization for General Scripts

Next.js provides a built-in component called <Script> to add external scripts to your website.

For example, you can add Google Analytics to your website by adding the following script tag:

import Head from "next/head";
import Script from "next/script";

export default function Page() {
  return (
    <Head>
      {/* other parts */}
      {process.env.NODE_ENV === "production" && (
        <>
          <Script async strategy="afterInteractive" id="analytics">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-XXXXXXXXXX');
            `}
          </Script>
        </>
      )}
    </Head>
  );
}

Script Optimization for Common Third-Party Integrations

Next.js App Router introduces a new library called @next/third-parties for:

Google Tag Manager
Google Analytics
Google Maps Embed
Youtube Embed To use the @next/third-parties library, you need to install it:

npm install @next/third-parties

import { GoogleTagManager } from "@next/third-parties/google";
import { GoogleAnalytics } from "@next/third-parties/google";
import Head from "next/head";

export default function Page() {
  return (
    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
      {process.env.NODE_ENV === "production" && (
        <>
          <GoogleAnalytics gaId="G-XXXXXXXXXX" />
          {/* other scripts */}
        </>
      )}
      {/* other parts */}
    </html>
  );
}

7. Image Optimization

This part can be applied to both Pages Router and App Router.

Image optimization is also an important part of SEO as it helps your website load faster.

Faster image rendering directly influences your Google PageSpeed score, which in turn benefits user experience and SEO.

You can use next/image to optimize images in your Next.js website.

import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="https://example/assets/nextjs-seo/thumbnail.png?tr=f-webp"
      alt="Next.js SEO"
      width={1200}
      height={630}
    />
  );
}

For the image format, I prefer to use WebP because it has a smaller size than PNG and JPEG.

Conclusion

Here's a conclusion summarizing the key areas for website performance and SEO optimization in Next.js:

Meta Tags: Implement comprehensive meta tags for improved search engine understanding and display.
JSON-LD Schema: Utilize JSON-LD to provide structured data, enhancing search engine comprehension and rich results.
Sitemap: Generate and submit a sitemap to ensure search engines can effectively crawl and index your website.
robots.txt: Use robots.txt to control search engine crawler access, specifying which pages to crawl or ignore.
Link Tags: Implement <link> tags for canonical URLs, icons, and other essential link-related information.
Script Optimization:
- Leverage Next.js's <Script> component for efficient script loading.
- Utilize @next/third-parties for optimized handling of common third-party scripts.
Image Optimization:
- Use Next.js's <Image> component for optimized image loading and performance.
- Implement a CDN to cache images, improving loading speeds.
- Adopt modern image formats like WebP for reduced file sizes and faster delivery.