CLI to build and develop Next.js apps for Cloudflare Pages
### next-on-pages environment related information I couldn't run this command on my Windows machine, the error was similar to https://github.com/cloudflare/next-on-pages/issues/863 Dependencies: "@cloudflare/next-on-pages": "^1.13.8", "@cloudflare/workers-types": "^4.20250224.0", "next": "15.1.6", "wrangler": "^3.111.0" ### Description I am having problems with deploying my NextJS app, which is using an API endpoint for chat completions from OpenRouter AI or OpenAI SDK. The API endpoint below worked well on my local, but when I wanted to deploy my app on Cloudflare Pages, the Internal Server Error 500 keeps showing up. ``` import { NextResponse } from "next/server"; import OpenAI from "openai"; // Specify Edge runtime export const runtime = "edge"; export async function POST(req: Request) { try { const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); const completion = await openai.chat.completions.create({ model: 'gpt-4o-mini', messages: [ { role: 'user', content: systemPrompt, }, ], }); return NextResponse.json({ content: completion.choices[0].message.content }); } catch (error: any) { console.error("AI API error:", error.message); return NextResponse.json({ error: error.message }, { status: 500 }); } } ``` and the client call is just basic: ``` try { const res = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ messages: transformedData }), }); toast.dismiss(); if (!res.ok) { const errorText = await res.text(); toast.error(`AI failed to think..., ${errorText}`); throw new Error(errorText); } const responseText = await res.json(); const clean = DOMPurify.sanitize(responseText.content, { USE_PROFILES: { html: true }, }); setResponse(clean); toast.success("AI has responded!"); } finally { setProcessing(false); } ``` I am suspecting some problems with the Edge runtime compatibility between Cloudflare and NextJS. But I still struggle a lot and can't still figure it out. I have tried to deploy just a bare simple app which only has the UI and the API on Vercel, but the error Internal Server Error 500 is still there. I also tried to make the API call's base URL through AI gateway of Cloudflare (https://developers.cloudflare.com/ai-gateway/providers/openrouter/), but it is not helping. Please can someone have a look. Thanks a lot! ### Reproduction Call the API with Edge runtime on the Nextjs App. Worked on local, but 500 Internal Server Error on Cloudflare Pages production Production page: https://viet80s.co.uk/ai-chat (fill random answers --> submit --> internal server error) ### Pages Deployment Method Pages CI (GitHub/GitLab integration) ### Pages Deployment ID ba974068-b0d6-4973-be93-e9d776f79ff3 ### Additional Information _No response_ ### Would you like to help? - [x] Would you like to help fixing this bug?
This issue appears to be discussing a feature request or bug report related to the repository. Based on the content, it seems to be still under discussion. The issue was opened by AndrewThien and has received 1 comments.