I Built a Type-Safe JSON-LD Generator for Next.js to Automate SEO

#nextjs #typescript #seo #opensource

The Problem

When building hemenhesap.com - a Turkish financial calculator platform with 100+ calculator pages - I needed structured data for every page. Existing solutions were either:

Too verbose: next-seo requires tons of boilerplate for simple schemas.
Not type-safe: It's extremely easy to make syntax mistakes in complex JSON-LD objects.
Missing schemas: Hard to find lightweight builders for SoftwareApplication (Calculator) or HowTo schemas.

The Solution

I built nextjs-jsonld-schema - a lightweight, type-safe JSON-LD builder specifically designed for Next.js (App & Pages Router).

Features

🎯 Full TypeScript support: Autocomplete and type checking for all schema fields.
🚀 Framework Ready: Works perfectly with Next.js App Router and Metadata API.
📊 Google-Compliant: Generates structured data that passes Google's Rich Results Test.
🪶 Zero Dependencies: No extra bloat for your project.

Quick Example

import { buildCalculatorSchema, SchemaScript } from 'nextjs-jsonld-schema';

const schema = buildCalculatorSchema({
  siteUrl: "https://hemenhesap.com",
  url: "/hesap/kredi-hesaplama",
  title: "Loan Calculator",
  description: "Calculate your monthly payments instantly.",
  howtoSteps: [
    { title: "Enter amount", description: "Input your total loan amount." },
    { title: "Calculate", description: "Click the button to see the results." },
  ],
  faq: [
    { question: "Is it free?", answer: "Yes, all tools are 100% free!" },
  ],
});

// Just drop this into your component
<SchemaScript schema={schema} />

Supported Schema Types

Builder	Schema Type
`buildWebsiteSchema()`	WebSite + Organization
`buildCalculatorSchema()`	SoftwareApplication + HowTo + FAQ
`buildBlogPostSchema()`	BlogPosting + Article
`buildFAQSchema()`	FAQPage
`buildBreadcrumbSchema()`	BreadcrumbList