0

I have this NextJS SPA that I want to deploy in Azure Static Web Apps. It's a fairly simple app with some dynamic routes (e.g. /pages/requests/[id]/*). Data in my components/routes is fetched through client-side only (no SSR or SSG).

At first, I tried to do a static export by setting output: 'export' in next.config.js and that worked well for static routes (e.g. https://myapp.azurestaticapps.net/requests/) however it gave me a 404 error on dynamic routes (e.g. https://myapp.azurestaticapps.net/requests/7ecf58774844). I thought this has something to do with static exports and since I do not have a file called 7ecf58774844 (or 7ecf58774844.html) in requests folder, I am getting this error. I am wondering if routes in staticwebapp.config.json can help me here.

So I removed output: 'export' in next.config.js and tried to rebuild the application. The build directory looks something like the following:

enter image description here

What I am not sure about is how to deploy this application manually using SWA CLI.

When I do something like:

swa deploy --deployment-token my-deployment-token ./build --env production

I get the following error messages:

✖ Failed to find a default file in the app artifacts folder (build). Valid default files: index.html,Index.html.
✖ If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
✖ If your application requires build steps, please validate that a default file exists in the build output directory.

I believe I am missing something really trivial but I am at a complete loss here. All the examples I have seen are for SSG and make use of GitHub/Azure DevOps which is not my case. Mine is a completely static application and I have to deploy it manually using SWA CLI.

UPDATE

Here's next.config.json:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  distDir: 'build',
  output: 'export',//tried with and without the output attribute
  trailingSlash: true,
  images: { unoptimized: true },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

and here's staticwebapp.config.json:

{
  "routes": [
    {
      "route": "/requests/[id]",
      "rewrite": "/requests/[id]/index.html"
    }
  ],
  "mimeTypes": {
    ".json": "text/json"
  }
}

Tried different combination of routes but to no avail. For example, these are the route settings I tried:

{
  "route": "/requests/:id",
  "rewrite": "/requests/[id]/index.html"
}

{
  "route": "/requests/:id",
  "rewrite": "/requests/:id/index.html"
}

Please note that above settings are when output: 'export' in next.config.js. In this case, the build directory looks something like the following:

enter image description here

Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241

1 Answers1

1

Have you tried building the application from the SWA CLI before deploying the application?

  • swa build --auto - This generates a default out folder with the application build.
  • swa deploy --deployment-token <token> ./out --env production - like you did but here with the out folder.

Of course you can rename the output of the build, take a look at: https://azure.github.io/static-web-apps-cli/docs/cli/swa-build

Florian Vuillemot
  • 500
  • 1
  • 4
  • 10
  • Thank you for the answer. I tried doing that but there is no difference. In fact, `swa build --auto` calls `rpm run build` command to build the app. So I am getting the same compiled application in both cases. – Gaurav Mantri May 21 '23 at 16:03
  • Can you please, share your `staticwebapp.config.json` and your `next.config.js`? – Florian Vuillemot May 21 '23 at 17:13
  • Thanks. Updated my answer and provided more details. – Gaurav Mantri May 22 '23 at 03:08
  • 1
    Have you tried with the wildcard pattern and client side routing? https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#wildcards This sounds like a common question unfortunately: https://github.com/Azure/static-web-apps/issues/803 or even https://stackoverflow.com/questions/67022988/can-i-redirect-with-wildcard-in-azure-static-web-app – Florian Vuillemot May 22 '23 at 06:25
  • Thanks. Yes, I did try the wildcard route but in rewrite, it doesn’t dynamically replace “*” with the value in the URL. I’ve also asked this question on SWA discussions on GitHub. Let’s wait to hear from Microsoft regarding this. I really appreciate your help. – Gaurav Mantri May 22 '23 at 07:03
  • I don't know if this helps but I just realized that there is dynamic routing in the next.js tutorial https://github.com/staticwebdev/nextjs-starter#dynamic-routes – Florian Vuillemot May 22 '23 at 13:21
  • Thanks but unfortunately I cannot use SSG in my application as the pages are dynamic in nature. I think I’ll have to implement the routing logic in the application code only unless I hear a proper solution for the problem I’m facing. – Gaurav Mantri May 22 '23 at 14:03
  • I ended up replacing Next.JS with CRA + React Router. I opted for Next.JS only for the convenience of its file based routing but in the end it was not worth the time spent on making it work. Routing available through React Router was more than sufficient for my use case. Thanks for all your help. I really appreciate it. – Gaurav Mantri May 25 '23 at 10:56