Azure / Azure/static-web-apps

Next.js App Router Page Not Found

Open
#1,437 9 comments 5 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
346
Forks
67
PR merge metrics
No merged PRs in 30d

Description

Hello,
yesterday I wanted to re-deploy our Next.js project as Static Web App, but I only get "404 - Page not found" on my page routes. The last successful deployment was on March the 4th, so I guess it's related to #1428. I already tried to deploy an older branch, which was previously successful, but now results with the same issue. Creating a new Static Web App in Azure also doesn't work.

Help would be appreciated. Thanks in advance

If any more information is needed, please let me know.

**Describe the bug**

Using Next.js App Router.
Trying to navigate to any page in our Next.js project results in an "404 - Page not found".
Accessing Next.js Route Handler (e.g. /api/my-custom-route/) works.

Depyloment via Azure DevOps Pipeline doesn't show any error, even tho the step "Polling on deployment" now takes longer than on previous runs of the pipeline.

Azure Pipeline config
```
parameters:
major: ""
minor: ""
packageName: ""
packagePath: ""
azure_static_web_apps_api_token: ""

jobs:
- template: ./version-npm.yaml
parameters:
major: ${{parameters.major}}
minor: ${{parameters.minor}}
- job: "${{parameters.packageName}}_CI"
displayName: Build ${{ parameters.packageName }} and push it to static web app
dependsOn: Version
condition: succeeded()
pool:
vmImage: "ubuntu-latest"

steps:
- bash: 'sed -i ''s/"version": "0.0.1"/"version": "$(Build.BuildNumber)"/'' ${{ parameters.packagePath }}/package.json'
displayName: Update Version in package.json
- task: NodeTool@0
inputs:
versionSpec: "18.x"
- task: npmAuthenticate@0.208.1
displayName: Npm Authenticate
inputs:
workingFile: "${{ parameters.packagePath }}/.npmrc"
- task: AzureStaticWebApp@0
inputs:
app_location: "${{ parameters.packagePath }}"
config_file_location: "${{ parameters.packagePath }}"
azure_static_web_apps_api_token: "${{ parameters.azure_static_web_apps_api_token }}"
```

staticwebapp.config.json
```
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["*.{png,jpg,gif,svg}", "*.css"]
}
}
```

package.json
```
{
"name": "XY",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.0.3",
"react": "^18",
"react-dom": "^18",
"swr": "^2.2.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.0.3",
"sass": "^1.69.5",
"typescript": "^5"
},
"engines": {
"node": "^18.17.0"
}
}
```

**Expected behavior**
Page routes should show the content and not result in "404 - Page not found"

**Screenshots**
![image](https://github.com/Azure/static-web-apps/assets/140148262/9cd9075e-ad57-466d-b7db-98e57cb52a97)

**EDIT:**
Solution found by @Dennis-Rosenbaum

> @koell-casa I have found the problem, it has to do with the navigationFallback property in staticwebapp.config.json.
> If you remove that property and push it again all will work well.

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.