How to Integrate Jira with V0

JIRA's REST API uses Basic Authentication: your Atlassian account email combined with an API token. API tokens are separate from your account password and can be revoked independently — always use a token rather than your actual password. To create one, go to id.atlassian.com/manage-profile/security/api-tokens (you must be logged in to your Atlassian account). Click Create API token, give it a descriptive label like 'V0 Dashboard Integration', and click Create. Copy the token immediately — Atlassian only shows it once. Store it somewhere secure like 1Password or your password manager. The token is used in Basic Auth as a base64-encoded string: your email address as the username and the API token as the password. In your Next.js API routes, you'll construct the Authorization header as: Authorization: Basic base64(email:apiToken). Also note your JIRA Cloud base URL — it looks like https://your-company.atlassian.net. For Jira Server, your URL is your organization's self-hosted domain. You'll also need your project key — look at any issue in your project and note the prefix before the dash (e.g., in 'PROJ-123', the project key is PROJ). With these three pieces — email, API token, and base URL — you can authenticate against any JIRA REST API v3 endpoint.

Open V0 at v0.dev and describe the JIRA project interface you want to build. JIRA data revolves around issues, which have fields like key (PROJ-123), summary (the title), status, priority, assignee, issue type, and story points. Sprint data adds a layer with sprint name, start date, end date, and sprint goal. Describe your desired UI to V0 using these field names — issue cards with the key badge, status chips color-coded by status name, priority icons. Ask V0 to generate the component with mock data that mimics JIRA's response structure: an array of issues where each has an id, key, fields object containing summary, status.name, priority.name, assignee.displayName, and story_points. Using this structure in your mock data means the live component integration is a direct drop-in — no data transformation needed beyond mapping the JIRA REST API response. Use Design Mode to polish colors and spacing. Sprint board layouts work especially well with V0's layout generation. Request a header row showing sprint name and dates, columns for each status, and scrollable issue card stacks within columns.

Now build the Next.js API routes that call JIRA's REST API. JIRA Cloud uses the base URL https://your-company.atlassian.net/rest/api/3/ for core issue operations and https://your-company.atlassian.net/rest/agile/1.0/ for sprint and board data. Authentication is Basic Auth — encode your email and API token as base64 and pass it in the Authorization header. Create a utility function in lib/jira.ts that builds the authorization header and provides a typed fetch wrapper. Your main routes are: GET /api/jira/issues — uses JQL (JIRA Query Language) to query issues. JQL is a SQL-like query language: 'project = PROJ AND sprint in openSprints() ORDER BY priority ASC'. GET /api/jira/sprints/active — calls the Agile API to get the active sprint for a board. POST /api/jira/issues — creates a new issue with summary, description, issue type, and priority. The JIRA REST API returns paginated results with startAt, maxResults, and total fields for issue searches. Handle pagination in your API routes by passing startAt and maxResults as query parameters from your frontend. For JQL queries, URL-encode the query string before passing it as a query parameter. JIRA's error responses include a detailed errors object — log these in your API route's catch block for easier debugging.

1// lib/jira.ts
2const JIRA_BASE_URL = process.env.JIRA_BASE_URL; // e.g., https://company.atlassian.net
3const JIRA_EMAIL = process.env.JIRA_EMAIL;
4const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN;
5
6function getAuthHeader(): string {
7  const credentials = Buffer.from(`${JIRA_EMAIL}:${JIRA_API_TOKEN}`).toString('base64');
8  return `Basic ${credentials}`;
9}
10
11export async function jiraFetch(path: string, options?: RequestInit) {
12  const res = await fetch(`${JIRA_BASE_URL}/rest/api/3${path}`, {
13    ...options,
14    headers: {
15      Authorization: getAuthHeader(),
16      'Content-Type': 'application/json',
17      Accept: 'application/json',
18      ...options?.headers,
19    },
20  });
21  if (!res.ok) {
22    const error = await res.json();
23    throw new Error(JSON.stringify(error));
24  }
25  return res.json();
26}
27
28// app/api/jira/issues/route.ts
29import { NextRequest, NextResponse } from 'next/server';
30import { jiraFetch } from '@/lib/jira';
31
32export async function GET(req: NextRequest) {
33  const jql = req.nextUrl.searchParams.get('jql') ||
34    `project = ${process.env.JIRA_PROJECT_KEY} AND sprint in openSprints() ORDER BY priority ASC`;
35
36  try {
37    const data = await jiraFetch(
38      `/search?jql=${encodeURIComponent(jql)}&fields=summary,status,priority,assignee,story_points,issuetype&maxResults=50`
39    );
40    return NextResponse.json({ issues: data.issues, total: data.total });
41  } catch (error) {
42    return NextResponse.json({ error: 'Failed to fetch JIRA issues' }, { status: 500 });
43  }
44}
45
46export async function POST(req: NextRequest) {
47  try {
48    const body = await req.json();
49    const issue = await jiraFetch('/issue', {
50      method: 'POST',
51      body: JSON.stringify({
52        fields: {
53          project: { key: process.env.JIRA_PROJECT_KEY },
54          summary: body.summary,
55          description: body.description ? {
56            type: 'doc',
57            version: 1,
58            content: [{ type: 'paragraph', content: [{ type: 'text', text: body.description }] }]
59          } : undefined,
60          issuetype: { name: body.issuetype || 'Story' },
61          priority: { name: body.priority || 'Medium' },
62        },
63      }),
64    });
65    return NextResponse.json({ key: issue.key, id: issue.id }, { status: 201 });
66  } catch (error) {
67    return NextResponse.json({ error: 'Failed to create issue' }, { status: 500 });
68  }
69}

Update your V0-generated sprint board or issue table to fetch from your JIRA API routes. Since the sprint board benefits from filtering and user interaction — clicking columns, filtering by assignee — mark these components as client components with 'use client'. Fetch from /api/jira/issues on mount with the default JQL for the current sprint. Let users change the JQL filter by adding a filter bar with preset buttons like 'My Issues', 'High Priority', and 'Bugs'. When a preset is clicked, append the new JQL as a query parameter to your fetch call. For issue creation, build a modal form that POSTs to /api/jira/issues with summary, issue type, and priority. Show optimistic updates in the UI — add the new issue to local state immediately with a 'Creating...' status, then replace it with the real response once the API call succeeds. For drag-and-drop status updates (moving cards between sprint columns), implement a PUT route at /api/jira/issues/[id]/transition that calls JIRA's transition endpoint to move an issue to a different status. JIRA transitions are workflow-specific — you need to fetch available transitions for an issue first, then trigger the correct transition ID. Handle loading and error states thoroughly since JIRA API calls can be slow (200–800ms) depending on your org size.

1'use client';
2
3import { useEffect, useState } from 'react';
4
5interface JiraIssue {
6  id: string;
7  key: string;
8  fields: {
9    summary: string;
10    status: { name: string };
11    priority: { name: string };
12    assignee: { displayName: string } | null;
13    issuetype: { name: string };
14  };
15}
16
17const COLUMNS = ['To Do', 'In Progress', 'In Review', 'Done'];
18
19export default function SprintBoard() {
20  const [issues, setIssues] = useState<JiraIssue[]>([]);
21  const [loading, setLoading] = useState(true);
22
23  useEffect(() => {
24    fetch('/api/jira/issues')
25      .then((r) => r.json())
26      .then((data) => { setIssues(data.issues || []); setLoading(false); })
27      .catch(() => setLoading(false));
28  }, []);
29
30  const byStatus = (status: string) =>
31    issues.filter((i) => i.fields.status.name === status);
32
33  if (loading) return <div className="p-8 text-center">Loading sprint data...</div>;
34
35  return (
36    <div className="grid grid-cols-4 gap-4 p-4">
37      {COLUMNS.map((col) => (
38        <div key={col} className="bg-gray-50 rounded-lg p-3">
39          <h3 className="font-semibold mb-3">{col} ({byStatus(col).length})</h3>
40          {byStatus(col).map((issue) => (
41            <div key={issue.id} className="bg-white rounded p-3 mb-2 shadow-sm">
42              <span className="text-xs text-blue-600 font-mono">{issue.key}</span>
43              <p className="text-sm mt-1">{issue.fields.summary}</p>
44              <div className="flex justify-between mt-2 text-xs text-gray-500">
45                <span>{issue.fields.priority.name}</span>
46                <span>{issue.fields.assignee?.displayName ?? 'Unassigned'}</span>
47              </div>
48            </div>
49          ))}
50        </div>
51      ))}
52    </div>
53  );
54}

JIRA credentials should be stored as server-only environment variables — no NEXT_PUBLIC_ prefix. Add four variables to your Vercel project: JIRA_BASE_URL (your Atlassian site URL, e.g., https://your-company.atlassian.net — no trailing slash), JIRA_EMAIL (your Atlassian account email address used for API token authentication), JIRA_API_TOKEN (the token you generated at id.atlassian.com), and JIRA_PROJECT_KEY (your project's key like 'PROJ' or 'DEV'). To add these in Vercel, go to your project page in the Vercel Dashboard, click Settings → Environment Variables, and add each key-value pair. Apply them to Production and Preview environments. For local development, add the same variables to your .env.local file. After saving all variables, push your code to GitHub to trigger a Vercel deployment. Once deployed, open the production URL and verify that the sprint board or issue table loads real JIRA data. If issues don't appear, check the Vercel Function Logs under your project's Functions tab — common issues are wrong base URLs (missing https://, trailing slashes) and base64 encoding errors in the auth header. Test issue creation via the New Issue form to confirm write access is working.

1# .env.local — never commit this file
2# JIRA credentials (all server-only, no NEXT_PUBLIC_ prefix)
3JIRA_BASE_URL=https://your-company.atlassian.net
4JIRA_EMAIL=you@yourcompany.com
5JIRA_API_TOKEN=ATATTx...
6JIRA_PROJECT_KEY=PROJ