Structured Data (JSON-LD) Implementation in Server Components

1// app/nextjs/[category]/[slug]/page.tsx
2import { WithContext, Course } from 'schema-dts';
3
4export default async function LessonPage({
5  params,
6}: {
7  params: Promise<{ category: string; slug: string }>;
8}) {
9  const { category, slug } = await params;
10  const lesson = await getLessonData(slug);
11
12  // Strongly typed schema.org object
13  const jsonLd: WithContext<Course> = {
14    '@context': 'https://schema.org',
15    '@type': 'Course',
16    name: lesson.title,
17    description: lesson.interviewAnswer,
18    provider: {
19      '@type': 'Organization',
20      name: 'FAANGPrep',
21      sameAs: 'https://faangprep.com',
22    },
23    hasCourseInstance: {
24      '@type': 'CourseInstance',
25      courseMode: 'online',
26      courseWorkload: `PT${lesson.estimatedMinutes}M`,
27    },
28  };
29
30  return (
31    <article className="max-w-4xl mx-auto py-8">
32      {/* 
33        Inject JSON-LD structured data into the HTML payload.
34        Server-rendered so search engine bots parse it immediately!
35      */}
36      <script
37        type="application/ld+json"
38        dangerouslySetInnerHTML={{
39          // Sanitize to prevent script injection in hostile strings
40          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
41        }}
42      />
43
44      <h1 className="text-3xl font-bold">{lesson.title}</h1>
45      <p className="mt-4">{lesson.interviewAnswer}</p>
46    </article>
47  );
48}