Building a headless front end

Integrate TejRank into modern web frameworks:

Next.js (App Router Example)

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

type Props = { params: { slug: string } };

async function getPost(slug: string) {
  const res = await fetch(`https://tejrank.com/api/v1/public/posts/${slug}`, {
    headers: { 'X-API-Key': process.env.BLOG_API_KEY! },
    next: { revalidate: 3600 },
  });
  const data = await res.json();
  return data.data?.post;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);
  if (!post) return {};
  return {
    title: post.seo.metaTitle,
    description: post.seo.metaDescription,
    alternates: { canonical: post.seo.canonical },
    openGraph: post.seo.openGraph,
    twitter: post.seo.twitter,
  };
}

export default async function BlogPostPage({ params }: Props) {
  const post = await getPost(params.slug);
  if (!post) return <div>Post not found</div>;

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(post.jsonLd) }}
      />
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
    </article>
  );
}