Dynamic routing for Azure Static Web Apps in Next.js

Question

I am building a static, multi-page website for hosting some documentation. I am using Next.js v13 (/app router) for routing and rendering and Azure Static Web Apps for hosting. I was able to deploy the site to SWA and can see the root page, but navigating to any of the sub-pages/ routes returns 404.

I have the following two lines in my next.config.js:

{
	...
	output: "export",
	distDir: 'out',
	...
}

and the following staticwebapp.config.json:

{
	routes: [
		{
			route: "/*",
			methods: ["GET"]
		}
	]
}

My next.js app/ dir contains [...slug]/ to match multiple levels of dynamic routes. In [...slug]/page.tsx I am using generateStaticParams() to build the route pages at build time.

When I run npm run build locally and check the out/ dir I see the "index.html" static output, but none of the sub-pages that should be generated from the dynamic routes.

Am I missing something that is required for hosting Next apps in SWA? Would greatly appreciate any direction!

edit: add Next.js version number

Answer 1

@Jack H Nemitz Thanks for asking question-

For Dynamic routes, The pages/project/[slug].js file implements code that tells Next.js what pages to generate based on associated data. In Next.js, each page powered by dynamic routes needs to implement getStaticPaths and getStaticProps to give Next.js the information it needs to build pages that match possible route values.

Inside getStaticPaths, each data object is used to create a list of paths all possible pages.

export async function getStaticPaths() {
  const paths = projects.map((project) => ({
    params: { path: project.slug },
  }))
  return { paths, fallback: false };
}

The getStaticProps function is run each time a page is generated. Based off the parameter values, the function matches the full data object to the page being generated. Once the data object is returned, it is used as the context for the generated page.

export async function getStaticProps({ params }) {
  const project = projects.find(proj => proj.slug === params.path);
  return { props: { project } };
}

Reference: https://github.com/staticwebdev/nextjs-starter

Let us know if further query or issue remains.

Answer 2

I have been fighting this same issue and after finding numerous complaints about this same issue decided to consider work-arounds. At this point I have converted all of my dynamic pages to take query parameters so that the page for routing purposes is static and the dynamic parts are carried in the query parameters (e.g.):

http://localhost:3000/formerly-dynamic-page?slug="dynamic-value"&ref="more dynamic data"

This works very well with the latest nextsj (14.0.3) and was relatively easy to refactor. I am using the old pages router so I cannot verify that this works in the new app router.

Hopeful this might help someone out there.