How to Integrate Receipt Bank (Dext) with V0

Start by prompting V0 to build the front-end interface for document submission. You need two main UI elements: a file upload component and an expense list or dashboard to display the results. V0 is well suited for building polished file upload interfaces with drag-and-drop support and a fallback file picker button — both are standard patterns in Tailwind CSS and React. When prompting V0, specify that the upload button should POST to /api/dext/upload with the file as multipart form data. Critically, the frontend should use FormData to send the file rather than JSON encoding — binary file content cannot be sent as JSON. The V0-generated component should build a FormData object, append the file to it, and fetch the API route without setting a Content-Type header (the browser automatically sets the correct multipart/form-data boundary when you omit it). For the expense list section, tell V0 to fetch from /api/dext/items and render the returned data in a table or card grid. Include a refresh button or auto-polling every 10-15 seconds so users see when Dext finishes processing their document. V0 can generate the polling logic using a useEffect hook with setInterval — ask it to fetch the items list every 15 seconds and stop once the item status changes from 'processing' to 'completed'. Review V0's generated fetch call to confirm it sends FormData correctly. The fetch should look like: const formData = new FormData(); formData.append('file', file); fetch('/api/dext/upload', { method: 'POST', body: formData }). If V0 adds a Content-Type header manually, remove it — the browser must set this automatically to include the multipart boundary.

Create the server-side API route that receives the file from the browser and forwards it to Dext's document ingestion endpoint. In your project's file structure, create app/api/dext/upload/route.ts. This route runs as a Vercel serverless function, meaning it has access to your Dext API key via process.env and its code is never exposed to the browser. The Dext API accepts document uploads at POST https://api.dext.com/v1/items with the file as multipart form data. The request must include an Authorization header with your API key in the format Bearer {DEXT_API_KEY}. You also need to set the correct supplier context — Dext organizes documents by client or user, so if you have a multi-tenant app, you will need to include the relevant inbox or client identifier in the request. In the Next.js App Router, handling incoming multipart form data uses request.formData(). This gives you a FormData object from which you can extract the file using formData.get('file'). The returned value is a File or Blob object. To forward this to Dext, construct a new FormData with the file appended, then pass that FormData as the body to your fetch call to the Dext API. Handle errors carefully in this route. Dext returns specific HTTP status codes: 201 for successful document submission, 400 for invalid file types, 401 for authentication failures, and 422 for malformed requests. Return meaningful error responses to the client so the V0-generated UI can display helpful messages instead of a generic 'Something went wrong' alert. For larger files or slow connections, be aware that Vercel's default serverless function timeout is 10 seconds on the Hobby plan. Dext document uploads typically complete quickly, but if you experience timeouts on large PDF files, consider upgrading to a Pro plan for the longer 60-second limit or compress images before upload on the client side.

1import { NextRequest, NextResponse } from 'next/server';
2
3export async function POST(request: NextRequest) {
4  try {
5    const formData = await request.formData();
6    const file = formData.get('file') as File | null;
7
8    if (!file) {
9      return NextResponse.json(
10        { error: 'No file provided' },
11        { status: 400 }
12      );
13    }
14
15    // Validate file type
16    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'];
17    if (!allowedTypes.includes(file.type)) {
18      return NextResponse.json(
19        { error: 'Invalid file type. Accepted: JPEG, PNG, GIF, PDF' },
20        { status: 400 }
21      );
22    }
23
24    // Forward to Dext API
25    const dextFormData = new FormData();
26    dextFormData.append('file', file);
27
28    const response = await fetch('https://api.dext.com/v1/items', {
29      method: 'POST',
30      headers: {
31        Authorization: `Bearer ${process.env.DEXT_API_KEY}`,
32      },
33      body: dextFormData,
34    });
35
36    if (!response.ok) {
37      const errorText = await response.text();
38      console.error('Dext API error:', response.status, errorText);
39      return NextResponse.json(
40        { error: `Dext API error: ${response.status}` },
41        { status: response.status }
42      );
43    }
44
45    const data = await response.json();
46    return NextResponse.json({ itemId: data.id, status: data.status });
47  } catch (error) {
48    console.error('Upload error:', error);
49    return NextResponse.json(
50      { error: 'Failed to upload document' },
51      { status: 500 }
52    );
53  }
54}

Create a second API route to fetch processed expense data from Dext. Create app/api/dext/items/route.ts for fetching the full list of items, and optionally app/api/dext/items/[id]/route.ts for fetching a single item by ID. The items endpoint is what the V0-generated dashboard polls to show extracted receipt data. The Dext GET /v1/items endpoint returns an array of item objects. Each item includes fields like id, status (processing or completed), supplier_name, date, total, currency, tax, category, and a thumbnail_url. The status field is crucial for polling — only when status is completed will the extracted fields like supplier_name and total be populated. Items with status processing will have these fields as null or empty strings. For the single-item route (app/api/dext/items/[id]/route.ts), extract the id from the route params using the params argument passed to the GET function. Fetch from https://api.dext.com/v1/items/{id} and return the full item data. This is useful for the three-step invoice review flow where the user uploads a document, waits for processing, then reviews the extracted data in a pre-filled form. Consider adding pagination support to the items list endpoint. Dext's API supports page and per_page query parameters. For an expense dashboard that might have hundreds of items, you do not want to fetch everything at once. Accept page and limit as query parameters in your Next.js route, forward them to Dext, and include pagination metadata in your response so the V0-generated UI can show 'Load more' or page number controls. For production deployments, consider caching the items response in Vercel's data cache using Next.js fetch caching with revalidate: 30 to reduce the number of Dext API calls from your polling frontend, while still keeping data reasonably fresh.

1import { NextRequest, NextResponse } from 'next/server';
2
3export async function GET(request: NextRequest) {
4  try {
5    const { searchParams } = new URL(request.url);
6    const page = searchParams.get('page') || '1';
7    const perPage = searchParams.get('per_page') || '25';
8
9    const response = await fetch(
10      `https://api.dext.com/v1/items?page=${page}&per_page=${perPage}`,
11      {
12        headers: {
13          Authorization: `Bearer ${process.env.DEXT_API_KEY}`,
14          'Content-Type': 'application/json',
15        },
16        // Revalidate every 30 seconds to reduce API calls
17        next: { revalidate: 30 },
18      }
19    );
20
21    if (!response.ok) {
22      return NextResponse.json(
23        { error: `Dext API error: ${response.status}` },
24        { status: response.status }
25      );
26    }
27
28    const data = await response.json();
29    return NextResponse.json({
30      items: data.items || data,
31      total: data.total,
32      page: parseInt(page),
33    });
34  } catch (error) {
35    console.error('Items fetch error:', error);
36    return NextResponse.json(
37      { error: 'Failed to fetch items' },
38      { status: 500 }
39    );
40  }
41}

Your API routes read DEXT_API_KEY from environment variables. You need to add this to your Vercel project so it is available when your serverless functions run in production, and optionally create a .env.local file for local development. Go to your Vercel Dashboard and open your project. Click the Settings tab, then Environment Variables in the left sidebar. Add the following variable: DEXT_API_KEY with the value of your Dext API key, which you can find in Dext Dashboard → Settings → Integrations → API. Set the environment to Production, Preview, and Development so it is available across all deployments. Important: do NOT add the NEXT_PUBLIC_ prefix to DEXT_API_KEY. This is a server-only secret. Adding the NEXT_PUBLIC_ prefix would cause Next.js to embed this value directly in the compiled JavaScript bundle that is sent to every browser visitor — completely exposing your API key. The key should only exist in server-side code within your API routes, which run as Vercel serverless functions invisible to the browser. For local development, create a .env.local file in your project root with the same variable. This file is included in .gitignore by default in V0-generated projects, so it will not be committed to GitHub. When you run npm run dev, Next.js automatically loads variables from .env.local, making your local API routes work the same way as production. After adding the environment variable in Vercel, you must trigger a redeployment for the change to take effect. The easiest way is to push any small commit to your GitHub repository — Vercel auto-deploys on every push. Alternatively, in your Vercel project dashboard, go to Deployments, find your latest deployment, click the three-dot menu, and select Redeploy.

1# .env.local (for local development only — do NOT commit to git)
2DEXT_API_KEY=your_dext_api_key_here

Test the complete flow from receipt upload to extracted data display. Start with a clear, well-lit receipt photograph or a simple PDF invoice — Dext's OCR accuracy depends on image quality, so using a sharp, properly oriented image gives the most predictable results for initial testing. Navigate to your deployed V0 app and use the file upload UI to submit a test receipt. After clicking upload, your app should show a loading state while the file travels through your Next.js API route to Dext. If the upload succeeds, your API route returns an item ID which the UI can use to poll for the result. Open Vercel Dashboard → your project → Functions → View Logs in real time as you upload. You should see the POST request to /api/dext/upload appear in the logs. If the upload fails, the log will show the HTTP status code and error message returned from Dext's API. Common issues at this stage are authentication errors (wrong API key) or file format issues (Dext rejects certain HEIC or TIFF formats from iPhone cameras — convert to JPEG first). After a successful upload, wait 30-90 seconds and refresh the expense table. The item should appear with status 'processing' initially, then transition to 'completed' with extracted fields like supplier name, date, and total amount populated. If the status remains 'processing' for more than 5 minutes, check Dext's own dashboard to see if there is a processing error on their end. For complex receipt management workflows with approval chains, budget tracking, or multi-currency handling, RapidDev's team can help architect the integration and connect extracted Dext data to your accounting software or database schema.