How to Integrate WordPress with V0

Before writing any code, confirm that your WordPress site's REST API is accessible and returning data. Open a browser and navigate to https://your-wordpress-site.com/wp-json/wp/v2/posts — replace the domain with your actual WordPress URL. You should see a JSON response containing an array of your recent posts with fields like id, title, content, excerpt, date, author, featured_media, and link. If you see an empty array, your WordPress site may have no published posts yet. If you see an error like 'rest_no_route' or 'no_route', the REST API may have been disabled by a security plugin. Common culprits are plugins like Wordfence or Disable REST API — you may need to whitelist certain endpoints in those plugins or re-enable the API for public endpoints. Also check the /wp-json/wp/v2/pages endpoint for pages, and if you use custom post types, they are typically available at /wp-json/wp/v2/{custom-post-type}. Take note of the URL structure and the fields returned — you will use this when crafting your API route. The WordPress REST API documentation at developer.wordpress.org/rest-api is the best reference for available endpoints and query parameters like per_page, orderby, order, categories, and search.

Create a Next.js API route that proxies requests to your WordPress REST API. This proxy layer serves two purposes: it keeps any authentication credentials server-side so they are never exposed to the browser, and it gives you a place to transform or filter the WordPress data before it reaches your V0 components. Create the file app/api/wordpress/posts/route.ts. This route accepts GET requests, fetches from your WordPress REST API using the native fetch() function (available in Next.js without any additional imports), and returns the data as JSON. The WORDPRESS_API_URL environment variable holds your WordPress site's base URL so you do not hardcode it. For public posts, no authentication headers are needed. For private drafts or password-protected content, add an Authorization header using a WordPress Application Password. Generate an Application Password in your WordPress admin by going to yoursite.com/wp-admin/profile.php, scrolling to the Application Passwords section at the bottom, typing a name for the app (like 'V0 Frontend'), and clicking Add New Application Password. WordPress generates a space-separated password string — store it in Vercel as WORDPRESS_APP_PASSWORD along with your WordPress admin username as WORDPRESS_APP_USERNAME. The Authorization header format is Basic followed by a base64 encoding of username:password. The API route also handles pagination — WordPress's REST API returns 10 posts by default, and you can request more with the per_page parameter (maximum 100 per request). Pass through the page query parameter from the incoming request so your V0 component can implement pagination.

1import { NextRequest, NextResponse } from 'next/server';
2
3export async function GET(request: NextRequest) {
4  const { searchParams } = new URL(request.url);
5  const page = searchParams.get('page') || '1';
6  const perPage = searchParams.get('per_page') || '10';
7  const category = searchParams.get('category') || '';
8
9  const wordpressUrl = process.env.WORDPRESS_API_URL;
10
11  if (!wordpressUrl) {
12    return NextResponse.json(
13      { error: 'WordPress API URL not configured' },
14      { status: 500 }
15    );
16  }
17
18  // Build the WordPress REST API URL
19  const apiUrl = new URL(`${wordpressUrl}/wp-json/wp/v2/posts`);
20  apiUrl.searchParams.set('page', page);
21  apiUrl.searchParams.set('per_page', perPage);
22  apiUrl.searchParams.set('_embed', 'true'); // includes featured images and author data
23  if (category) apiUrl.searchParams.set('categories', category);
24
25  // Build headers — add auth only if credentials are configured
26  const headers: Record<string, string> = {
27    'Content-Type': 'application/json',
28  };
29
30  const username = process.env.WORDPRESS_APP_USERNAME;
31  const password = process.env.WORDPRESS_APP_PASSWORD;
32
33  if (username && password) {
34    const credentials = Buffer.from(`${username}:${password}`).toString('base64');
35    headers['Authorization'] = `Basic ${credentials}`;
36  }
37
38  try {
39    const response = await fetch(apiUrl.toString(), {
40      headers,
41      next: { revalidate: 300 }, // Cache for 5 minutes
42    });
43
44    if (!response.ok) {
45      throw new Error(`WordPress API returned ${response.status}`);
46    }
47
48    const posts = await response.json();
49    const totalPages = response.headers.get('X-WP-TotalPages');
50    const total = response.headers.get('X-WP-Total');
51
52    return NextResponse.json({
53      posts,
54      pagination: {
55        totalPages: Number(totalPages),
56        total: Number(total),
57        currentPage: Number(page),
58      },
59    });
60  } catch (error) {
61    console.error('WordPress API error:', error);
62    return NextResponse.json(
63      { error: 'Failed to fetch posts from WordPress' },
64      { status: 500 }
65    );
66  }
67}

Your API route reads configuration from environment variables. You need to add these to Vercel so they are available in production. Go to your Vercel Dashboard, open your project, click the Settings tab, then click Environment Variables in the left sidebar. Add WORDPRESS_API_URL as the base URL of your WordPress site without a trailing slash, for example https://your-wordpress-site.com. This is not a secret (it is your public website URL), but keeping it in an environment variable makes it easy to change without editing code. Set it to apply to Production, Preview, and Development environments. If you need to access private content, also add WORDPRESS_APP_USERNAME (your WordPress admin username, typically admin or a dedicated API user) and WORDPRESS_APP_PASSWORD (the Application Password you generated in WordPress admin — it looks like abcd efgh ijkl mnop with spaces). Store both as environment variables in Vercel. The password in particular should be treated as a secret — do not put it in your code or commit it to GitHub. For a smooth local development experience, also create a .env.local file in your project root with the same variables. V0's generated .gitignore already excludes this file from version control. After adding all variables in Vercel, trigger a redeployment by pushing a commit or clicking Redeploy in the Vercel Dashboard.

1# .env.local — for local development only, never commit to Git
2WORDPRESS_API_URL=https://your-wordpress-site.com
3WORDPRESS_APP_USERNAME=your-admin-username
4WORDPRESS_APP_PASSWORD=your-app-password-from-wordpress

With your API route in place and environment variables configured, prompt V0 to generate the React components that consume the data. The key is to tell V0 the exact shape of the data your API returns so it can write correct TypeScript types and access the right fields. For a blog listing page, you need a component that fetches from /api/wordpress/posts on component mount (or at the page level), maps over the posts array, and renders each post as a card with title, excerpt, featured image, date, and author. For individual post pages, create a dynamic route at app/blog/[slug]/page.tsx that fetches a single post by slug from a second API route at /api/wordpress/posts/[slug]/route.ts. WordPress post titles and content fields may contain HTML — the title.rendered and content.rendered fields from the WordPress API are HTML strings, not plain text. To render them safely in React, use dangerouslySetInnerHTML={{ __html: post.content.rendered }} for the content area. V0 should generate this correctly if you mention it in your prompt, but it is worth verifying in the generated code. For featured images, WordPress returns them in the _embedded['wp:featuredmedia'] array when you use the _embed=true parameter in your API route. Ask V0 to handle the case where no featured image is set by using a fallback placeholder image. Also ask V0 to generate good loading states (skeleton loaders while content fetches), error states (a message if the API is unavailable), and empty states (a message if no posts are found). These make the integration feel polished and handle real-world edge cases gracefully.

A complete headless WordPress integration needs dynamic post pages — individual URLs for each blog post or article. In Next.js App Router, this is a dynamic route at app/blog/[slug]/page.tsx where [slug] matches the WordPress post slug (the URL-friendly version of the post title). Create a companion API route at app/api/wordpress/posts/[slug]/route.ts that accepts GET requests and fetches a single post from WordPress by slug using the filter query parameter: /wp-json/wp/v2/posts?slug={slug}&_embed=true. WordPress returns an array even for single slug lookups, so your API route should return the first element. For good SEO, use Next.js's generateMetadata function to set the page title and description from the WordPress post data. This is one of the major advantages of the headless approach — you can use the WordPress SEO metadata (or Yoast SEO plugin data if installed) while still having full control over how it is rendered in the HTML head. For improved performance, consider adding generateStaticParams to pre-render your most recent posts at build time. This generates static HTML for those posts during Vercel's build process, making them load instantly instead of being generated on-demand. For a blog with hundreds of posts, you might only statically generate the most recent 20-50 and let the rest be server-rendered on demand.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface RouteParams {
4  params: { slug: string };
5}
6
7export async function GET(
8  request: NextRequest,
9  { params }: RouteParams
10) {
11  const { slug } = params;
12  const wordpressUrl = process.env.WORDPRESS_API_URL;
13
14  if (!wordpressUrl) {
15    return NextResponse.json(
16      { error: 'WordPress API URL not configured' },
17      { status: 500 }
18    );
19  }
20
21  const apiUrl = `${wordpressUrl}/wp-json/wp/v2/posts?slug=${encodeURIComponent(slug)}&_embed=true`;
22
23  const headers: Record<string, string> = {};
24  const username = process.env.WORDPRESS_APP_USERNAME;
25  const password = process.env.WORDPRESS_APP_PASSWORD;
26
27  if (username && password) {
28    const credentials = Buffer.from(`${username}:${password}`).toString('base64');
29    headers['Authorization'] = `Basic ${credentials}`;
30  }
31
32  try {
33    const response = await fetch(apiUrl, {
34      headers,
35      next: { revalidate: 600 }, // Cache individual posts for 10 minutes
36    });
37
38    if (!response.ok) {
39      throw new Error(`WordPress API returned ${response.status}`);
40    }
41
42    const posts = await response.json();
43
44    if (!posts || posts.length === 0) {
45      return NextResponse.json({ error: 'Post not found' }, { status: 404 });
46    }
47
48    return NextResponse.json(posts[0]);
49  } catch (error) {
50    console.error('WordPress single post fetch error:', error);
51    return NextResponse.json(
52      { error: 'Failed to fetch post' },
53      { status: 500 }
54    );
55  }
56}