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

[gmantri]

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.

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:

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.

[vivekjilla]

Hi @gmantri Thanks for the detailed info. I can see two usecases here:

1. using the static HTML export feature of Next.js and don't have any hybrid scenarios
   Here, looks like it worked as expected initially, but seems like you have some hybrid scenarios as well because the requests folder doesn't have expected files.

2. Using the Hybrid feature of Next.js
   You shouldn't set output:'export' in next.config.js. You can remove the distDir option as well, as it's not supported fully yet in SWA CLI.
   And to deploy the app, run it from a folder above the root folder of the app and pass the root folder location to the deploy command, something like: swa deploy --deployment-token my-deployment-token ./rootfolder --env production

Please let us know if this works or if you have any other queries. Thanks!

[gmantri]

@vivekjilla - Thanks. So my project folder is 'guardrails-frontend'. I made the changes as mentioned by you in #2 (Using the Hybrid feature of Next.js) and built the application. After building the application, I moved to one folder above the application folder ('guardrails-frontend') and ran the following command: swa deploy --deployment-token my-deployment-token ./guardrails-frontend --env production but encountered the following error:

✖ Failed to find a default file in the app artifacts folder (/). 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.
✖ 

This is my current next.config.js file:

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

With static HTML export, the problem I am running into is with dynamic routes. For example, I have a route like requests/<request-id>/. I can easily access requests/ route but when I try to access requests/<request-id>/ route, I get 404 error. This is probably because the output contains a folder called [id] however static web app runtime is not able to replace this [id] with the request id included in the request.

[vivekjilla]

Apologies for the inconvenience. I'm checking to see if the SWA CLI support to deploy the hybrid Next.js is available or not yet. I will get back to you on this.

For the case 1 to work correctly, I believe the output folder shouldn't contain the [id] but the actual files with the right IDs once the app is built.

[vivekjilla]

@gmantri the case 2 should have ideally worked. Is it possible to share more logs you see from the SWA CLI for deploy command or to share your code repo structure or template to investigate this further? TIA!

[gmantri]

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.

@vivekjilla - Thanks for all your help. I really appreciate it.