Next.js App Router Page Not Found
- 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**

**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.