How to manually deploy a NextJS SPA in Azure Static Web Apps

Question

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:

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:

Answer 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