NextJS template with api routes

🌵 Needle Engine
1

NextJS Face filter template works with api routes served locally. The api route is a simple capture image → upload to vercel blob → share image.

But after deploying to vercel in prod, the api route returns ‘404 Not Found’ since Needle needs the output in next.config to be “export”

what is the best way to make this work with api routes?

2

Hi Tamrat,

Plan (pseudocode):

  1. Recap the issue:

    • Next.js app must use output: "export" in next.config.js for Needle Engine compatibility.
    • Next.js API routes are not supported in static export—hence, 404 in production.

  2. Solutions:

    • Explain that API routes need a server environment (not available in static export).
    • Propose alternatives:
      • Use external serverless functions (e.g., Vercel Functions or separate API).
      • Use Vercel Edge Functions or another backend (not Next.js API routes if using static export).
      • Use client-side direct upload to Vercel Blob if possible.

  3. Implementation example:

    • How to call Vercel Blob API directly from client, bypassing the need for an API route.

Solution

When output: "export" is set in next.config.js, your Next.js site is a static export and cannot use API routes since they require a Node.js server.

Options:

1. Use Vercel Serverless Functions (outside Next.js app)

  • Create functions in /api in a separate Next.js app (without output: "export"), or as standalone Vercel Functions.
  • Change your frontend to call the deployed function URL directly (e.g., https://your-vercel-app.vercel.app/api/capture).

2. Client-Side Direct Upload

If your use case is capture-upload-share, consider uploading directly from the client to Vercel Blob Storage.

Pseudocode:

  • On capture, create a Blob.
  • Use Vercel Blob JS client or HTTP POST to upload.

Example (client-side JS):

// On the client (after capturing an image as a Blob or File)

const formData = new FormData();
formData.append('file', imageBlob, 'image.png');

const response = await fetch('https://your-external-upload-api', {
  method: 'POST',
  body: formData,
});

const { url } = await response.json();
// Use this url for sharing!

3. Hybrid: Use Next.js Middleware/Edge Functions

  • Possible only if you do not fully static-export (which is required for Needle).
  • Otherwise, not usable with output: "export".

In summary:
To keep using Needle with Next.js static export and have your upload/sharing working, either use external APIs/functions or direct client-side uploads.
Next.js API routes won’t work with static export.

Tips for good questions:

  • Mention your deployment environment and requirements (you did!).
  • Provide specific error messages.
  • Clarify which part you want help with (client upload code, serverless function setup, etc.).

Suggested next actions:

  • Do you want an example for Vercel Blob client-side upload, or setup for a Vercel Function?
  • Need help with securing uploads or processing images?

1 replies left - Get a PRO license for more AI replies.
thread_Wqh4TJl4lmYTxPNbsrKGBq3A
Reply to this post directly if you need further help (bottom right button)

3

Hi, you should be able to disable the vercel export option in your config. Have you tried that? That’s how the template was setup before.

5

Hello @Tamrat did you try changing the nextjs config?