Azure / Azure/static-web-apps

Next.js API Routes Return 500 Internal Server Error once published to SWA

Open
#1,648 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.