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

The Problem ## The Solution ## Features ## Quick Example ## Supported Schema Types ## Results ## Try It When building hemenhesap.com - a Turkish financial calculator platform with 100+ calculator pages - I needed structured data for every page. Existing solutions were either: I built nextjs-jsonld-schema - a lightweight, type-safe JSON-LD builder specifically designed for Next.js (App & Pages Router). After implementing this on hemenhesap.com: 📦 NPM: https://www.npmjs.com/package/nextjs-jsonld-schema 🐙 GitHub: https://github.com/Aghefendi/nextjs-jsonld-schema Feedback and contributions welcome! Built with ❤️ for the Next.js community Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: 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} /> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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} /> CODE_BLOCK: 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} /> COMMAND_BLOCK: npm install nextjs-jsonld-schema Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm install nextjs-jsonld-schema COMMAND_BLOCK: npm install nextjs-jsonld-schema - 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. - 🎯 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. - ✅ Rich snippets appearing in Google Search - ✅ FAQ dropdowns increasing CTR in search results - ✅ HowTo steps showing up in mobile SERPs