Troubleshooting routing problems in a Next.js application hosted on Azure's static web app

I recently developed a Next.js application that connects to a database through an API in order to display data in the form of folder structures. If a row in the database is identified as a folder, it should be displayed as such, while if it is not, then it appears as a file. Clicking on a folder triggers an API call to reveal the files and subfolders contained within it. This structure allows for multiple nested folders.

The application is currently hosted on Azure's static web app platform. However, I am encountering an issue where upon refreshing the page while inside a folder, a 404 error occurs. It seems to be related to how the routes are configured. I have attempted to rectify this by adding a staticwebapp.config.json and defining a fallback route, but this only redirects me to the homepage.

Ideally, the page should remain on the same folder even after a refresh.

If anyone has insights or suggestions on setting up dynamic routes with Next.js and a static web app, I would greatly appreciate it.

Thank you, Rajesh

azurenext.jsroutesazure-static-web-appazure-static-web-app-routing

Answer №1

As detailed in the official documentation:

A customized filter can determine which requests will not return the fallback file. For example, requests for specific routes in the /images folder and all files in the /css folder are exempt from returning the fallback file.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

With the following directory structure, various outcomes can result from applying this rule.

├── images
│   ├── logo.png
│   ├── headshot.jpg
│   └── screenshot.gif
│
├── css
│   └── global.css
│
└── index.html

For further insights, check out this related discussion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the steps to retrieve Firestore data using Firebase Admin while utilizing Firebase emulators alongside Next.js

I am currently using Next.js along with firebase emulators. While I am able to add data to firestore successfully, I am facing issues when trying to retrieve data using firebase-admin. Can someone guide me on how to fetch API data using firebase-admin? / ...

node.jsfirebasegoogle-cloud-firestorenext.jsfirebase-admin

Is it possible to access the Express req object inside a Next.js app?

Let's say I have a middleware that includes additional data fields in the express.js req object. My goal is to pass these fields into my React components using my Next.js _app.js. How can I access the req object inside the _app.js file? ...

reactjsexpressnext.js

Troubleshooting problem with Material-UI and Next.JS in Webpack

I have encountered an error while trying to add the code from this file: https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js When I include the next.config.js code provided below, I receive ...

javascriptmaterial-uinext.js

Please pick up where I left off with the questions in SurveyJs

Each time the page is refreshed, the survey in surveyjs begins anew. Is there a way for the user to resume from where they left off? I am utilizing surveyjs in conjunction with React (Nextjs). Many thanks! ...

reactjsnext.jssurveyjs

Creating multilingual URLs in Next.js for both Latin and non-Latin languages

Our team is embarking on creating a react web app using next.js, but we're facing a challenge with implementing multilanguage URLs. Our objective is to ensure that the same content in different languages has unique URL slugs. For instance, www.tld.com ...

next.jsmultilinguali18nextnon-latin

Exploring the orderBy feature in the react-firebase-hooks library with NextJS

Recently, I've been utilizing the React Firebase Hooks package from this GitHub repository. The code snippet below has been functioning smoothly for me. const [posts, loading, error] = useCollection( firebase .firestore() .collection(& ...

javascriptreactjsgoogle-cloud-firestorereact-hooksnext.js

Adjust the border color of the <input> element when it is clicked on

I'm currently working on a login screen for my next.js application and I've encountered an issue where the border color changes to a mixture of white and blue when I select an input field. https://i.stack.imgur.com/R2yKa.png I attempted to reso ...

htmlcssnext.js

Error message when deploying with NextJS and Vercel: "Oops! The destination you are trying to access cannot be found in the Deployment Build Outputs."

I'm diving into the world of nextJS for the first time and I'm excited to share my progress on a simple pokemon team generator app with my friends. The app compiles successfully with $npm run build, and runs smoothly in localhost:3000 while I dev ...

next.jsdeploymenthttp-status-code-404vercelcustom-error-pages

Tips on showcasing a nested array in Next.js or converting it into an object

{ "count": 2, "rows": [ { "id": "5ab46e31-391c-46a7-8e45-db9ada07626d", "name": "admin", "email": "<a href="/cdn-cgi/l/email-p ...

javascriptarrayspostgresqlnext.js

How can I set up authentication with NestJS, GraphQL, and Next.js? Is next-auth a suitable option for this setup?

Recently, I've developed an API with Nest.js and GraphQL which includes an endpoint for authenticating users and generating access and refresh tokens (JWT). Now, my challenge is integrating this API with a Next.js front-end application. Although I&ap ...

authenticationnext.jsjwtnestjsnext-auth

Encountering an issue while attempting to locate an already existing product in the localStorage using JavaScript

I'm currently working on incorporating a cart system using localStorage and have provided the codes below. Can someone help me understand how to accomplish this? const data = { description: "Cum sociis natoque", mediaUrl: "/prod ...

javascriptreactjsnext.jscart

Simply input the URL with parameters directly into the search bar in Next.js to access the page

I understand how dynamic routing works within a Next.js app when using Link or Router.push(). However, I am unsure about what happens if I have a URL like this: http://localhost:3000/jhondoe If I paste this URL directly into the browser, how does Next ...

reactjsnext.js

Is it better to define a function within useEffect or externally?

What is the reason behind defining the fetchData function inside the useEffect instead of outside? Link: https://github.com/zeit/next.js/blob/canary/examples/with-graphql-faunadb/lib/useFetch.js import { useState, useEffect } from 'react' exp ...

javascriptreactjsreact-hooksnext.js

Tips for transferring the id from a delete button to a delete button in a popup dialog box

In my frontend application, there is a table where each row corresponds to an item. For every row, there is a "Remove" button that triggers a warning popup upon being clicked. The intention is to pass the item's ID in this popup so that if the user co ...

javascriptreactjsnext.jspopuptailwind-css

Incorporating a user ID (foreign key) into a MySQL table using NextJS and Prisma

Currently, I am in the process of developing an online recipe platform that allows users to log in and share their recipes. The technology stack I am using includes NextJS, Prisma, and MySQL DB. User authentication is handled with NextAuth and a credential ...

mysqlnext.jsprisma

Obtaining cookies on the client side with Next.js

I am currently struggling to verify the existence of a particular cookie and remove certain data from redux if it is not present. Despite utilizing a package named 'cookies-next', I am unable to access the cookies. My approach involves using a c ...

reactjsnext.jscookiesnext.js13

Customizing Laravel route with optional parameters

I am trying to set up a route with an optional parameter as the first one. Specifically, I want a route like this: students/service/123/detail & service/123/detail. Can anyone advise me on how to achieve this? Thank you in advance. Route::get('{option ...

phplaravelroutes

A more advanced approach to validating form input in React/Next Js

I have designed a basic form for my web application. I am considering adding a feature to validate all fields, ensuring they are not empty and displaying an error message if necessary. Here is the outline of what I have so far: import { useState } from &ap ...

reactjsnext.js

I am looking to utilize next/image to occupy half of the width within a div container

Currently, I am delving into the world of Next.js and Tailwind CSS. I have a challenge where I want to fill half width using the next/image component. However, it seems to be occupying the full width instead. function Slider() { return ( <div cl ...

next.jstailwind-cssnext-images

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

I'm currently developing a webapp dashboard using the latest version of Next.js 13 with app router. It features a dashboard and search bar at the top. I attempted to implement parallel routes. The @search folder contains the search bar and page.jsx wh ...

javascriptreactjsnext.jsvercel