DEV Community

Cover image for Adding structured data to a Next.js site without losing your mind:
Elyvora US
Elyvora US

Posted on

Adding structured data to a Next.js site without losing your mind:

#nextjs #typescript #webdev #seo

Google's rich results look great in search. Getting them? Not so great. I recently added structured data to a Next.js project and learned a few things the hard way.

The problem with JSON-LD

Schema.org documentation is... extensive. Too extensive. You'll find 800+ types and wonder which 3 you actually need.

For most content sites, it's:

  • Organization (who you are)
  • WebSite (with SearchAction for sitelinks)
  • Article or Product (your actual content)
  • BreadcrumbList (navigation context)

That's it. Ignore the rest until Google tells you otherwise.

Component approach

Instead of dumping JSON-LD strings everywhere, I created typed React components:

// components/seo/ArticleSchema.tsx
export function ArticleSchema({ post }: { post: BlogPost }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    datePublished: post.publishedAt,
    author: {
      "@type": "Person",
      name: post.author.name
    }
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

TypeScript catches missing fields before Google does.

The validation loop

Here's the workflow that actually works:

  1. Add schema component to page
  2. Deploy (or use next build && next start)
  3. Test with Google's Rich Results Test
  4. Fix warnings
  5. Repeat

Don't skip step 2. Localhost testing misses URL-related issues.

One gotcha that cost me hours

Dynamic dates in schema must be ISO 8601 format:

// Wrong - breaks validation
datePublished: new Date().toLocaleDateString()

// Right
datePublished: new Date().toISOString()
Enter fullscreen mode Exit fullscreen mode

Google's validator gives cryptic errors for this. Now you know.

Results

After implementing structured data on a small product review site, FAQ rich results started appearing within 2 weeks. No guarantees—Google decides—but eligibility is the first step. The full schema setup took about 4 hours. Most of that was reading documentation I didn't need.

What structured data types are you using? I'm curious if anyone's had luck with HowTo or Recipe schemas.

Top comments (0)