Next.js API Routes Return 500 Internal Server Error once published to SWA
- Dominant language
- No language data
- Stars
- 346
- Forks
- 67
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
When deploying a Next.js v15.3.2 application with API routes to Azure Static Web Apps (SWA), the API routes return a 500 Internal Server Error. The application works perfectly in local development, but fails when deployed to Azure SWA.
**To Reproduce**
1. Create a Next.js 15.3.2 application with App Router
2. Add an API route at `/api/time` that fetches the current Date
3. Deploy to Azure Static Web Apps
4. Navigate to the deployed site
5. Trigger the fetch to `/api/time`
6. Observe the 500 Internal Server Error response
**YAML file**
```yml
name: Azure Static Web Apps CI/CD
pr:
branches:
include:
- master
trigger:
branches:
include:
- master
jobs:
- job: build_and_deploy_job
displayName: Build and Deploy Job
condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
pool:
vmImage: ubuntu-latest
variables:
- group: Azure-Static-Web-Apps
steps:
- checkout: self
submodules: true
- task: Cache@2
displayName: "Cache .next/cache"
inputs:
key: next | $(Agent.OS) | package-lock.json
path: "$(System.DefaultWorkingDirectory)/.next/cache"
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN)
app_location: "/"
api_location: ""
output_location: ".next"
```
**staticwebapp.config.json**
```json
{
"platform": {
"apiRuntime": "node:20"
}
}
```
**next.config.js**
```json
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'standalone',
productionBrowserSourceMaps: true,
}
export default nextConfig
```
**API Route**
```ts
import { NextResponse } from 'next/server'
export const dynamic = 'force-dynamic'
export async function GET(request: Request) {
return NextResponse.json(new Date())
}
```
**Page**
```tsx
'use client'
import { Button } from '@/components/ui/button'
import { useEffect, useState } from 'react'
export default function Page() {
const [time, setTime] = useState(new Date())
const [serverTime, setServerTime] = useState(null)
useEffect(() => {
const interval = setInterval(() => {
setTime(new Date())
}, 1000)
return () => clearInterval(interval)
}, [])
const fetchServerTime = () => {
fetch('/api/time')
.then((response) => response.json())
.then((data) => {
console.log('data', data)
setServerTime(new Date(data))
})
.catch((error) => {
console.error('Error fetching server time:', error)
})
}
return (
Current time: {time.toLocaleTimeString()}
Fetch Server Time
Server time:{' '}
{serverTime ? serverTime.toLocaleTimeString() : 'Loading...'}
)
}
```
**Expected behavior**
Shouldn't the API route work successfully and return the Date to the client? The client should display the server time fetched from the API.
**Screenshots**
When clicking the "Fetch Server Time" button, the browser receives a 500 Internal Server Error response with HTML content instead of the expected JSON data. The error page includes:
```html
500: Internal Server Error
500
Internal Server Error
.
{
"props": {
"pageProps": {
"statusCode": 500,
"hostname": "staticweba-0586454d"
}
},
"page": "/_error",
"query": {},
"buildId": "lMJCsVrKWsMhhgQFJNrw6",
"isFallback": false,
"isExperimentalCompile": false,
"err": {
"name": "Internal Server Error.",
"message": "500 - Internal Server Error.",
"statusCode": 500
},
"gip": true,
"scriptLoader": []
}
```
**Device info (if applicable):**
- OS: Windows 11
- Browser: Chrome 136.0.7103.93
- Next.js version: 15.3.2
- Azure Static Web Apps: Free tier
**Additional context**
- The application works perfectly in local development environment
- Similar issue has been reported in [issue #1196](https://github.com/Azure/static-web-apps/issues/1196)
- The application is using the App Router pattern introduced in Next.js 13+
- The output: 'standalone' configuration is being used as recommended for Azure SWA
- The apiRuntime is set to node:20 in the staticwebapp.config.json file
- No custom API functions are being used, only Next.js built-in API routes
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.