How to Add JSON-LD to a Next.js 13/14 Project with TypeScript

Introduction

Structured data is essential for improving your website's search engine visibility. By adding JSON-LD (JavaScript Object Notation for Linked Data) to your Next.js application, you can help search engines understand your site content better. In this blog, we'll explore how to integrate JSON-LD into a Next.js 13/14 project using TypeScript.

Step-by-Step Guide to Adding JSON-LD

1. Setup Your Next.js Project

If you haven't already set up your Next.js project, create a new one using the following command:

npx create-next-app@latest my-next-app --typescript

Navigate to your project directory:

cd my-next-app

2. Install the schema-dts Library

The schema-dts library provides TypeScript types for Schema.org vocabulary, making it easier to define structured data in your TypeScript projects. Install it using the following command:

npm install schema-dts

For more information about schema-dts, you can visit its GitHub repository.

3. Create the JSON-LD Data

First, let's define the JSON-LD data for your site. We will use the schema-dts library for TypeScript types:

import { WithContext, Organization } from "schema-dts";

const jsonLdData: WithContext<Organization> = {
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Site Name",
  "url": "https://yoursite.com/",
  "logo": "yourlogourl",
  "description": "Your Site description",
  "sameAs": [
    "https://www.facebook.com/yourpage",
    "https://twitter.com/yourprofile",
    "https://www.linkedin.com/in/yourprofile/"
  ]
};

5. Integrate JSON-LD into the Page Component

Finally, we will integrate the JSON-LD data into the page component:

import React from "react";

const Home: React.FC = () => {
  return (
    <div className="">
      <div>
        your site content
      </div>
      
      {/* JSON-LD to page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdData) }}
      />
      {/* End JSON-LD */}
    </div>
  );
};

export default Home;

Full Example

Here’s the complete code for your page.tsx file:

import { Metadata } from "next";
import { Organization, WithContext } from "schema-dts";

const jsonLdData: WithContext<Organization> = {
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Site Name",
  "url": "https://yoursite.com/",
  "logo": "yourlogourl",
  "description": "Your Site description",
  "sameAs": [
    "https://www.facebook.com/yourpage",
    "https://twitter.com/yourprofile",
    "https://www.linkedin.com/in/yourprofile/"
  ]
};

const Home: React.FC = () => {
  return (
    <div className="">
      <div>
        your site content
      </div>

      {/* JSON-LD to page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdData) }}
      />
      {/* End JSON-LD */}
    </div>
  );
};

export default Home;

Conclusion

Integrating JSON-LD into your Next.js 13/14 project using TypeScript is a straightforward process that can significantly enhance your site's SEO. By providing structured data to search engines, you can improve how your site appears in search results, driving more traffic and engagement. Try this out in your Next.js project and see the difference it makes!