How to Integrate Confluence with V0

Open V0 at v0.dev and describe the documentation interface you want to create. Confluence integrations typically fall into a few patterns: a full documentation browser with sidebar navigation and space hierarchy, a searchable knowledge base with article listings, or a specific documentation page renderer. Describe which pattern suits your use case and include the visual style you're targeting — documentation sites often use minimal design with high readability and good typography. When prompting V0, specify the API routes your interface will call: /api/confluence/spaces to list available spaces, /api/confluence/pages to list pages in a space, /api/confluence/page/{id} to fetch a specific page's content, and /api/confluence/search to search across pages. V0 will scaffold fetch calls to these routes in the generated component. For the content rendering component, ask V0 to create a div that will receive HTML content and apply Tailwind's prose classes (from the @tailwindcss/typography plugin) for readable formatting. Confluence's view-format HTML uses standard HTML elements (h1-h6, p, ul, ol, table) that map well to Tailwind prose styles. After generating in V0, push to GitHub using V0's Git panel before creating the API routes.

Create the Next.js API routes that proxy requests to the Confluence REST API. The Confluence Cloud REST API base URL follows the pattern https://{domain}.atlassian.net/wiki/rest/api. All requests use Basic Authentication with your Atlassian account email and API token encoded as base64(email:token) in the Authorization header. Create app/api/confluence/spaces/route.ts for fetching available spaces, app/api/confluence/pages/route.ts for listing pages within a space (accepts spaceKey query param), app/api/confluence/page/[id]/route.ts for fetching a specific page's content, and app/api/confluence/search/route.ts for full-text search. For the page content endpoint, add expand=body.view to the query parameters so Confluence returns the rendered HTML body instead of just page metadata. The response body is in data.body.view.value as an HTML string. Important: sanitize this HTML before rendering it in your React component. While your own Confluence content is trusted, building the sanitization habit protects against future content issues. Install DOMPurify (or use its server-side variant isomorphic-dompurify) and call DOMPurify.sanitize(htmlContent) before passing to dangerouslySetInnerHTML. For the search endpoint, the Confluence REST API exposes a CQL (Confluence Query Language) search at /wiki/rest/api/search. Pass a cql parameter like text ~ "your search query" AND type = page to search page content. The response includes an array of results with title, excerpt, and page URL.

1// app/api/confluence/page/[id]/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4function getAuthHeader() {
5  const domain = process.env.CONFLUENCE_DOMAIN;
6  const email = process.env.CONFLUENCE_EMAIL;
7  const token = process.env.CONFLUENCE_API_TOKEN;
8  if (!domain || !email || !token) {
9    throw new Error('Confluence credentials not configured');
10  }
11  const encoded = Buffer.from(`${email}:${token}`).toString('base64');
12  return { auth: `Basic ${encoded}`, domain };
13}
14
15export async function GET(
16  _request: NextRequest,
17  { params }: { params: { id: string } }
18) {
19  const { id } = params;
20
21  if (!id) {
22    return NextResponse.json({ error: 'Page ID is required' }, { status: 400 });
23  }
24
25  try {
26    const { auth, domain } = getAuthHeader();
27    const url = `https://${domain}.atlassian.net/wiki/rest/api/content/${id}?expand=body.view,version,ancestors,space`;
28
29    const response = await fetch(url, {
30      headers: {
31        Authorization: auth,
32        Accept: 'application/json',
33      },
34      next: { revalidate: 300 }, // Cache pages for 5 minutes
35    });
36
37    if (!response.ok) {
38      return NextResponse.json(
39        { error: `Confluence API error: ${response.statusText}` },
40        { status: response.status }
41      );
42    }
43
44    const data = await response.json();
45
46    return NextResponse.json({
47      id: data.id,
48      title: data.title,
49      body: data.body?.view?.value ?? '',
50      version: data.version?.number,
51      lastModified: data.version?.when,
52      author: data.version?.by?.displayName,
53      space: data.space?.name,
54      ancestors: data.ancestors?.map((a: { id: string; title: string }) => ({
55        id: a.id,
56        title: a.title,
57      })),
58    });
59  } catch (error) {
60    const msg = error instanceof Error ? error.message : 'Unknown error';
61    return NextResponse.json({ error: msg }, { status: 500 });
62  }
63}

Create the remaining API routes for listing spaces and searching content. The spaces route is a GET request to https://{domain}.atlassian.net/wiki/rest/api/space that returns all spaces accessible with your credentials. Add a type=global parameter to filter out personal spaces (type=personal) which are individual user spaces rather than team spaces. Each space object includes key (the short identifier used in URLs and API calls), name, and description. The pages route accepts a spaceKey query parameter and calls https://{domain}.atlassian.net/wiki/rest/api/content?type=page&spaceKey={key}. Add expand=version to get last-modified information alongside page metadata. You can filter to only top-level pages (no parent) by adding ancestor=root to the query, or retrieve a nested page hierarchy by calling the space's page tree endpoint. The search route accepts a q query parameter and constructs a CQL query for the Confluence search endpoint at https://{domain}.atlassian.net/wiki/rest/api/search. Build the CQL as: text ~ "{searchTerm}" AND type = page — wrap the search term in quotes to handle phrases. URL-encode the CQL query before appending it to the request URL. The search results include a title, excerpt, url, and lastModified fields that your frontend displays in a search results dropdown or dedicated results page.

1// app/api/confluence/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4function getAuthHeader() {
5  const domain = process.env.CONFLUENCE_DOMAIN;
6  const email = process.env.CONFLUENCE_EMAIL;
7  const token = process.env.CONFLUENCE_API_TOKEN;
8  if (!domain || !email || !token) {
9    throw new Error('Confluence credentials not configured');
10  }
11  const encoded = Buffer.from(`${email}:${token}`).toString('base64');
12  return { auth: `Basic ${encoded}`, domain };
13}
14
15export async function GET(request: NextRequest) {
16  const { searchParams } = new URL(request.url);
17  const query = searchParams.get('q');
18
19  if (!query || query.length < 2) {
20    return NextResponse.json({ results: [] });
21  }
22
23  try {
24    const { auth, domain } = getAuthHeader();
25    // Build CQL search query
26    const cql = `text ~ "${query.replace(/"/g, '')}" AND type = page`;
27    const url = `https://${domain}.atlassian.net/wiki/rest/api/search?cql=${encodeURIComponent(cql)}&limit=10&expand=content.space`;
28
29    const response = await fetch(url, {
30      headers: {
31        Authorization: auth,
32        Accept: 'application/json',
33      },
34    });
35
36    if (!response.ok) {
37      return NextResponse.json(
38        { error: `Search failed: ${response.statusText}` },
39        { status: response.status }
40      );
41    }
42
43    const data = await response.json();
44
45    const results = data.results.map((r: {
46      content: { id: string; title: string; space: { name: string } };
47      excerpt: string;
48      url: string;
49    }) => ({
50      id: r.content.id,
51      title: r.content.title,
52      excerpt: r.excerpt,
53      space: r.content.space?.name,
54      url: r.url,
55    }));
56
57    return NextResponse.json({ results });
58  } catch (error) {
59    const msg = error instanceof Error ? error.message : 'Unknown error';
60    return NextResponse.json({ error: msg }, { status: 500 });
61  }
62}

Push your code to GitHub and configure Confluence credentials in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add three variables: CONFLUENCE_DOMAIN (just the subdomain part, e.g., 'mycompany' not 'mycompany.atlassian.net'), CONFLUENCE_EMAIL (your Atlassian account email address), and CONFLUENCE_API_TOKEN (the API token generated at id.atlassian.com/manage-profile/security/api-tokens). None of these variables should have the NEXT_PUBLIC_ prefix — all Confluence API calls must happen server-side since they use credentials that must not reach the browser. Add them for Production, Preview, and Development environments. For local development, also add them to .env.local in your project root. After saving the variables, click Redeploy in the Deployments tab. Once the deployment completes, open your app's URL and verify that spaces load in the navigation, page content renders correctly, and the search returns relevant results. If pages render with broken layout, it may be because Confluence's view format HTML references Atlassian CDN resources (images, attachments) that require authentication — those resources will not load in your embedded view. Work around this by fetching page attachments separately via the API and serving them through your own routes, or accept that some Confluence-hosted images won't display.