How to Integrate Bolt.new with WordPress

1# .env — add to project root
2WP_API_URL=https://yoursite.com/wp-json/wp/v2
3WP_APP_USER=your_wp_username
4WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

1// app/api/wordpress/posts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface WPPost {
5  id: number;
6  title: { rendered: string };
7  excerpt: { rendered: string };
8  content: { rendered: string };
9  slug: string;
10  date: string;
11  link: string;
12  _embedded?: {
13    'wp:featuredmedia'?: Array<{ source_url: string; alt_text: string }>;
14    author?: Array<{ name: string }>;
15  };
16}
17
18export async function GET(request: NextRequest) {
19  const apiUrl = process.env.WP_API_URL;
20  if (!apiUrl) {
21    return NextResponse.json({ error: 'WP_API_URL not configured' }, { status: 500 });
22  }
23
24  const { searchParams } = new URL(request.url);
25  const page = searchParams.get('page') || '1';
26  const perPage = searchParams.get('per_page') || '10';
27  const category = searchParams.get('category');
28
29  const url = new URL(`${apiUrl}/posts`);
30  url.searchParams.set('page', page);
31  url.searchParams.set('per_page', perPage);
32  url.searchParams.set('_embed', '1');
33  if (category) url.searchParams.set('categories', category);
34
35  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
36  if (process.env.WP_APP_USER && process.env.WP_APP_PASSWORD) {
37    const creds = Buffer.from(
38      `${process.env.WP_APP_USER}:${process.env.WP_APP_PASSWORD}`
39    ).toString('base64');
40    headers['Authorization'] = `Basic ${creds}`;
41  }
42
43  try {
44    const response = await fetch(url.toString(), { headers });
45    if (!response.ok) {
46      return NextResponse.json(
47        { error: `WordPress API error: ${response.status}` },
48        { status: response.status }
49      );
50    }
51    const posts: WPPost[] = await response.json();
52    const totalPages = response.headers.get('X-WP-TotalPages');
53    const total = response.headers.get('X-WP-Total');
54
55    const normalized = posts.map((post) => ({
56      id: post.id,
57      title: post.title.rendered,
58      excerpt: post.excerpt.rendered,
59      slug: post.slug,
60      date: post.date,
61      featuredImage: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || null,
62      author: post._embedded?.author?.[0]?.name || 'Unknown',
63    }));
64
65    return NextResponse.json({ posts: normalized, totalPages, total });
66  } catch (error) {
67    const message = error instanceof Error ? error.message : 'Unknown error';
68    return NextResponse.json({ error: message }, { status: 500 });
69  }
70}

1// app/blog/[slug]/page.tsx
2'use client';
3
4import { useEffect, useState } from 'react';
5import { useParams } from 'next/navigation';
6
7interface Post {
8  id: number;
9  title: string;
10  content: string;
11  date: string;
12  author: string;
13  featuredImage: string | null;
14}
15
16export default function BlogPostPage() {
17  const { slug } = useParams<{ slug: string }>();
18  const [post, setPost] = useState<Post | null>(null);
19  const [loading, setLoading] = useState(true);
20
21  useEffect(() => {
22    fetch(`/api/wordpress/posts/${slug}`)
23      .then((r) => r.json())
24      .then((data) => setPost(data.post))
25      .finally(() => setLoading(false));
26  }, [slug]);
27
28  if (loading) return <div className="max-w-3xl mx-auto p-8">Loading...</div>;
29  if (!post) return <div className="max-w-3xl mx-auto p-8">Post not found.</div>;
30
31  return (
32    <article className="max-w-3xl mx-auto px-4 py-12">
33      {post.featuredImage && (
34        <img src={post.featuredImage} alt={post.title} className="w-full h-64 object-cover rounded-xl mb-8" />
35      )}
36      <h1 className="text-4xl font-bold text-gray-900 mb-4" dangerouslySetInnerHTML={{ __html: post.title }} />
37      <div className="text-sm text-gray-500 mb-8">
38        {new Date(post.date).toLocaleDateString()} · {post.author}
39      </div>
40      <div
41        className="prose prose-lg max-w-none"
42        dangerouslySetInnerHTML={{ __html: post.content }}
43      />
44    </article>
45  );
46}

1// app/api/wordpress/graphql/route.ts
2import { NextResponse } from 'next/server';
3
4export async function POST(request: Request) {
5  const graphqlUrl = process.env.WP_GRAPHQL_URL;
6  if (!graphqlUrl) {
7    return NextResponse.json({ error: 'WP_GRAPHQL_URL not configured' }, { status: 500 });
8  }
9
10  const body = await request.json();
11
12  const headers: Record<string, string> = {
13    'Content-Type': 'application/json',
14  };
15
16  if (process.env.WP_APP_USER && process.env.WP_APP_PASSWORD) {
17    const creds = Buffer.from(
18      `${process.env.WP_APP_USER}:${process.env.WP_APP_PASSWORD}`
19    ).toString('base64');
20    headers['Authorization'] = `Basic ${creds}`;
21  }
22
23  try {
24    const response = await fetch(graphqlUrl, {
25      method: 'POST',
26      headers,
27      body: JSON.stringify(body),
28    });
29
30    const data = await response.json();
31    return NextResponse.json(data);
32  } catch (error) {
33    const message = error instanceof Error ? error.message : 'Unknown error';
34    return NextResponse.json({ error: message }, { status: 500 });
35  }
36}
37
38// Example GraphQL query to use from a component:
39export const POSTS_QUERY = `
40  query GetRecentPosts($first: Int!) {
41    posts(first: $first) {
42      nodes {
43        id
44        title
45        slug
46        date
47        excerpt
48        featuredImage {
49          node {
50            sourceUrl
51            altText
52          }
53        }
54        author {
55          node { name }
56        }
57        categories {
58          nodes { name slug }
59        }
60      }
61    }
62  }
63`;

1// app/api/wordpress/revalidate/route.ts
2import { NextResponse } from 'next/server';
3import { revalidatePath } from 'next/cache';
4
5export async function POST(request: Request) {
6  const secret = request.headers.get('x-revalidate-secret');
7  if (secret !== process.env.WP_REVALIDATE_SECRET) {
8    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
9  }
10
11  try {
12    const body = await request.json();
13    const slug = body?.post?.post_name;
14
15    // Revalidate the blog listing page
16    revalidatePath('/blog');
17
18    // Revalidate the specific post if slug is provided
19    if (slug) {
20      revalidatePath(`/blog/${slug}`);
21    }
22
23    return NextResponse.json({ revalidated: true, slug });
24  } catch {
25    return NextResponse.json({ error: 'Revalidation failed' }, { status: 500 });
26  }
27}