How to Integrate Bolt.new with Yoast SEO

1// lib/wordpress.ts
2export interface YoastHeadJson {
3  title?: string;
4  description?: string;
5  canonical?: string;
6  og_title?: string;
7  og_description?: string;
8  og_image?: Array<{ url: string; width?: number; height?: number }>;
9  og_type?: string;
10  robots?: Record<string, string>;
11  schema?: {
12    '@context': string;
13    '@graph': unknown[];
14  };
15  article_published_time?: string;
16  article_modified_time?: string;
17}
18
19export interface WPPost {
20  id: number;
21  slug: string;
22  date: string;
23  modified: string;
24  title: { rendered: string };
25  excerpt: { rendered: string };
26  content: { rendered: string };
27  yoast_head_json: YoastHeadJson;
28  _embedded?: {
29    author?: Array<{ name: string }>;
30    'wp:featuredmedia'?: Array<{ source_url: string }>;
31  };
32}
33
34const WP_API = process.env.NEXT_PUBLIC_WP_API_URL
35  ?? process.env.WP_API_URL
36  ?? '';
37
38export async function getPosts(perPage = 10, page = 1): Promise<WPPost[]> {
39  const res = await fetch(
40    `${WP_API}/posts?per_page=${perPage}&page=${page}&_embed=true`,
41    { next: { revalidate: 3600 } }
42  );
43  if (!res.ok) throw new Error(`WP API error: ${res.status}`);
44  return res.json();
45}
46
47export async function getPostBySlug(slug: string): Promise<WPPost | null> {
48  const res = await fetch(
49    `${WP_API}/posts?slug=${slug}&_embed=true`,
50    { next: { revalidate: 3600 } }
51  );
52  if (!res.ok) return null;
53  const posts: WPPost[] = await res.json();
54  return posts[0] ?? null;
55}

1// app/api/wp/posts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getPosts, WPPost } from '@/lib/wordpress';
4
5function transformPost(post: WPPost) {
6  const yoast = post.yoast_head_json ?? {};
7  return {
8    id: post.id,
9    slug: post.slug,
10    title: post.title.rendered.replace(/<[^>]+>/g, ''),
11    excerpt: post.excerpt.rendered.replace(/<[^>]+>/g, '').trim(),
12    publishedAt: post.date,
13    modifiedAt: post.modified,
14    featuredImage: post._embedded?.['wp:featuredmedia']?.[0]?.source_url ?? null,
15    author: post._embedded?.author?.[0]?.name ?? 'Anonymous',
16    seo: {
17      title: yoast.title ?? post.title.rendered.replace(/<[^>]+>/g, ''),
18      description: yoast.description ?? post.excerpt.rendered.replace(/<[^>]+>/g, ''),
19      canonical: yoast.canonical ?? '',
20      ogImage: yoast.og_image?.[0]?.url ?? null,
21      robots: yoast.robots ?? {},
22      jsonLd: yoast.schema ?? null,
23    },
24  };
25}
26
27export async function GET(request: NextRequest) {
28  const page = parseInt(request.nextUrl.searchParams.get('page') ?? '1');
29  const perPage = Math.min(
30    parseInt(request.nextUrl.searchParams.get('per_page') ?? '10'),
31    50
32  );
33
34  try {
35    const posts = await getPosts(perPage, page);
36    return NextResponse.json(
37      { posts: posts.map(transformPost) },
38      { headers: { 'Cache-Control': 's-maxage=3600, stale-while-revalidate' } }
39    );
40  } catch (error) {
41    const message = error instanceof Error ? error.message : 'Unknown error';
42    return NextResponse.json({ error: message }, { status: 500 });
43  }
44}

1// app/blog/[slug]/page.tsx
2import type { Metadata } from 'next';
3import { getPostBySlug } from '@/lib/wordpress';
4import { notFound } from 'next/navigation';
5
6interface Props {
7  params: { slug: string };
8}
9
10export async function generateMetadata({ params }: Props): Promise<Metadata> {
11  const post = await getPostBySlug(params.slug);
12  if (!post) return { title: 'Not Found' };
13
14  const yoast = post.yoast_head_json;
15  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? '';
16
17  return {
18    title: yoast.title ?? post.title.rendered,
19    description: yoast.description ?? undefined,
20    alternates: {
21      canonical: yoast.canonical
22        ? yoast.canonical.replace(
23            new URL(yoast.canonical).origin,
24            siteUrl
25          )
26        : `${siteUrl}/blog/${params.slug}`,
27    },
28    openGraph: {
29      title: yoast.og_title ?? yoast.title,
30      description: yoast.og_description ?? yoast.description,
31      images: yoast.og_image?.map((img) => ({ url: img.url })) ?? [],
32      type: 'article',
33      publishedTime: post.date,
34      modifiedTime: post.modified,
35    },
36    robots: yoast.robots ?? undefined,
37  };
38}
39
40export default async function BlogPost({ params }: Props) {
41  const post = await getPostBySlug(params.slug);
42  if (!post) notFound();
43
44  const yoast = post.yoast_head_json;
45
46  // Rewrite canonical URL to point to Bolt frontend, not WordPress
47  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? '';
48  const schema = yoast.schema
49    ? JSON.stringify(yoast.schema).replace(
50        /https?:\/\/[^"]+\/wp-json/g,
51        siteUrl
52      )
53    : null;
54
55  return (
56    <article>
57      {schema && (
58        <script
59          type="application/ld+json"
60          dangerouslySetInnerHTML={{ __html: schema }}
61        />
62      )}
63      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
64      <div
65        className="prose"
66        dangerouslySetInnerHTML={{ __html: post.content.rendered }}
67      />
68    </article>
69  );
70}

1// app/api/revalidate/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { revalidatePath } from 'next/cache';
4
5export async function POST(request: NextRequest) {
6  const { slug, secret } = await request.json();
7
8  if (secret !== process.env.REVALIDATION_SECRET) {
9    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
10  }
11
12  if (!slug) {
13    return NextResponse.json({ error: 'slug is required' }, { status: 400 });
14  }
15
16  revalidatePath(`/blog/${slug}`);
17  revalidatePath('/blog');
18
19  return NextResponse.json({ revalidated: true, slug });
20}
21
22// Register this as a WordPress webhook:
23// In WordPress, use a plugin like WP Webhooks or custom code:
24// POST https://yourboltapp.com/api/revalidate
25// Body: { "slug": "post-slug", "secret": "your-secret" }
26// Trigger: on_post_publish, on_post_update