Next.js Static Paths Working Locally But Returning 404 on Azure Deployment

Question

Using Free Hosting plan in Azure.

I am using Next.js features like getStaticPaths and getStaticProps to optimize my web application by pre-rendering pages. The application works perfectly locally, but when deployed to Azure using a free Static Web Apps account, specific dynamic routes are returning a 404 error.

Here is a simplified example of how I'm using getStaticPaths and getStaticProps in my app:

    export async function getStaticPaths() {
    return {
        paths: [
            { params: { id: 'rice' } },
            { params: { id: 'okele' } },
            // more paths...
            { params: { id: 'beers' } }
        ],
        fallback: false
    };
}

export async function getStaticProps({ params }) {
    const menuData = await API.fetchMenu();
    const categoryData = menuData.Categories.find(item => item.CategoryName.toLowerCase() === params.id);

    return {
        props: {
            category: categoryData,
        },
        revalidate: 3600  // ISR
    };
}

The build output on Azure indicates that all pages under /menu/[id] are generated correctly:

├ ● /menu/[id] (ISR: 3600 Seconds) (2532 ms)
├   ├ /menu/rice (592 ms)
├   ├ /menu/okele
├   └ [+5 more paths]

Despite this, navigating to domain.com/menu/rice or any other specified path under /menu/[id] results in a 404 error, while other paths like /contact or /more/faqs work without any issues.

Questions:

Why would these paths return a 404 only when deployed on Azure, despite working locally and the build logs indicating successful page generation?

Could this be related to Azure's handling of static paths or a specific configuration needed for Next.js apps on Azure Static Web Apps?

Is there a known issue or workaround that specifically addresses Next.js dynamic routing on Azure platforms?

Any insights or advice on troubleshooting this issue would be greatly appreciated.

UPDATE: I have added a staticwebapp.config.json file I didn't have one in the project before. this is what it looks like:

"routes": [ { "route": "/menu/*", "serve": "/menu/[id].html", "statusCode": 200 } ] }

The dynamic roots are not working when deployed to Azure, but it is still working on my local machine.

@AyoAdesina How are you deploying your app to azure? Github?Vs Code? any other? — Vivek Vaibhav Shandilya
– Vivek Vaibhav Shandilya, Commented Apr 19, 2024 at 2:54

Vivek Vaibhav Shandilya · Accepted Answer · 2024-04-26 12:53:19Z

0

Fetching data using API.fetchMenu() requires either backend server or severless function to executethe script fetch data. which is not possible in Static web app unless you use serverless function.

This worked for me.

This is how I am using dynamic routes, passing the values for id and its being updated.

I deployed a static web app.

My Directory :

[id].js:


import { useRouter } from 'next/router';

export default function MenuItem() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Hello, {id}!</h1>
      <p>This is the {id} page.</p>
    </div>
  );
}

`OUTPUT`:

Note :- Make sure to use
"engines": {
"node": ">=18.0.0"
},
in your package.json file, if you you app requires specific version of the node

answered Apr 26, 2024 at 12:53

Vivek Vaibhav Shandilya

2,8262 gold badges4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js Static Paths Working Locally But Returning 404 on Azure Deployment

1 Answer 1

`OUTPUT`:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

OUTPUT:

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`OUTPUT`: