Next JS 13 App router based not working on azure static web app

Question

Next JS 13 App router based not working on azure static web app

Tinasoa RAJAONARIVELO 25

Hello,

I tried to follow this tutorial https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid but using App router based instead of Pages router and using next js 13.4.6.

The app is already live here : https://mango-coast-048dbb510.3.azurestaticapps.net/ . When I implement nested route sample like this "src/app/test/page.tsx" it works, but when using dynamic routing like adding "id" (src/app/test/[id]/page.tsx) or using routes groups, I got 500 error.

Then I tried to implement pages router based on the same project and it's fully work. You can test it with the following link : https://mango-coast-048dbb510.3.azurestaticapps.net/pages-test and https://mango-coast-048dbb510.3.azurestaticapps.net/pages-testdetail/1

NB : I set standalone mode on true.

brtrach-MSFT 17,731 Reputation points Microsoft Employee Moderator

2023-06-22T03:41:57.66+00:00

@Tinasoa RAJAONARIVELO I wanted to check and see if you have ever been able to get dynamic routing to work? I do not believe this is supported based on my own testing today but if you had this working previously, this might be a regression. I wanted to check with you first.
Tinasoa RAJAONARIVELO 25 Reputation points

2023-06-22T06:08:52.7066667+00:00

Hi, if I used the pages-based, the dynamic routing work perfectly, but when I switch to the app-based , it's not working. Unfortunately, the link of my live application that I shared upside is not working anymore.
felix 0 Reputation points

2023-07-07T12:00:02.32+00:00

I have the same issue!
felix 0 Reputation points

2023-07-07T12:04:12.83+00:00

@brtrach-MSFT Hi, I still have this issue and counld solve it, please help me, My email is: ******@gmail.com

1 answer

Your answer

brtrach-MSFT 17,731 Reputation points Microsoft Employee Moderator

2023-06-22T03:41:57.66+00:00

@Tinasoa RAJAONARIVELO I wanted to check and see if you have ever been able to get dynamic routing to work? I do not believe this is supported based on my own testing today but if you had this working previously, this might be a regression. I wanted to check with you first.
Tinasoa RAJAONARIVELO 25 Reputation points

2023-06-22T06:08:52.7066667+00:00

Hi, if I used the pages-based, the dynamic routing work perfectly, but when I switch to the app-based , it's not working. Unfortunately, the link of my live application that I shared upside is not working anymore.
felix 0 Reputation points

2023-07-07T12:00:02.32+00:00

I have the same issue!
felix 0 Reputation points

2023-07-07T12:04:12.83+00:00

@brtrach-MSFT Hi, I still have this issue and counld solve it, please help me, My email is: ******@gmail.com

Answer 1

Paula A 0

Edit: I managed to get dynamic routes to work in Azure Static web app. You need to have two things in your project.

Remember to add the function of generateStaticParams in the page.tsx of your dynamic route. It is a nextjs13 app router function to create the static bundle. More info here in Static Export for App Router documentation and in generateStaticParams documentation.
Add staticwebapp.config.json file in the project root. More info in the Azure SWA documentation. (Really only you need the next code):

 "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  },

If you have pipeline:

Upload this file in the section pipeline/library
Update your pipeline to includes the artifact (Replace {BUILD} by your build name folder)

// ... first steps of your pipeline 

- task: DownloadSecureFile@1
  name: staticwebapp
  inputs:
    secureFile: 'staticwebapp.config.json'
  displayName: 'Obtain the staticwebapp file from the library'

- task: Bash@3
  inputs:
    targetType: 'inline'
    script: 'cp $(staticwebapp.secureFilePath) {BUILD}/'
    workingDirectory: '$(System.DefaultWorkingDirectory)'
  displayName: 'Copy staticwebapp.config.json file to app location'

// ... Here you code of connect your Azure SWA with your repo.

Authorize the security file one time when you run your pipeline (you will see the option after run the pipeline with an alert message).

I hope to help somebody with this.

Scherwin Salehi 0 Reputation points

2023-08-20T12:43:47.34+00:00
Hey

Thanks a lot for your help, it has already helped me a lot. I had the same problem and was able to get part of the application running again on Azure.

Strangely, all route.js (API endpoints) work although they are also dynamic.

Is there another way than to use GenerateStaticParams? In one Dynamic Page of mine, for example, I only have 17 different possibilities of ids (slugs), so GenerateStaticParams is not a problem. But there I also have the following behaviour:

/centers/17 => works if 17 was a slug in generateStaticParams

/centers/1231231 => throws 500 status code if 1231231 was not in generateStaticParams...

But I also have other pages where new id's are possible all the time or for example on the server side headers or cookies are used on page level or even on layout level so I can't use GenerateStaticParams. I can't anticipate what the headers of every possible user might look like, since they partly contain cookies that are generated randomly.

Here is an example of a layout file of mine (using next-auth):

import React from "react"; import { getServerSession } from "next-auth/next"; import SessionProvider from "@/components/Auth/SessionProvider"; import AuthSettings from "@/services/AppVariants/Auth"; import ResponsiveThemeProvider from "@/components/ResponsiveThemeProvider"; // export const dynamic = "force-dynamic"; export default async function NextAuthLayout({ children, }: { children: React.ReactNode; }) { // return { children }; const session = await getServerSession(AuthSettings.authOptions); return ( <html lang="de"> <body> <ResponsiveThemeProvider options={{ key: "mui" }}> <SessionProvider session={session}>{children}</SessionProvider> </ResponsiveThemeProvider> </body> </html> ); }

In doing so I get the following errors

Dynamic server usage: The page could not be rendered statically because it uses 'headers'.

Since in this call headers and cookies are used:

const session = await getServerSession(AuthSettings.authOptions);
Paula A 0 Reputation points

2023-08-22T20:03:38.0333333+00:00
Hi! I'm very happy than my answer can help. About the other concerns:

Unfortunately cookies and headers are not compatible with static exports, you can see more info in the deploying static export documentation, in this case, you must search alternatives to this feature, for example you could save session settings in the LocalStorage or Cache.

You have reason, I can have problems with the id routes in the future too when this can change. I have not yet tried options for that case or if it were possible, but in the documentation you can try with function getStaticProps() (but it is not available in Nextj13 then you can see this stackoverflow ticketthat I found in internet) or dynamics option in the Route Segment Config. For example using 'force-static' in the dynamic config or sometime. The documentation said that you can use dynamicParams to "control what happens when a dynamic segment is visited that was not generated with generateStaticParams" and "if the dynamic = 'error' and dynamic = 'force-static' are used, it'll change the default of dynamicParams to false." I can help more in the future when I put it into practice.

Paula A 0

Hi! Again me! Maybe is very late for you, but this could be to help somebody. If you have dinamyc objects to route, you use searchParameters (they are like query params). You can see the function here in search params in nextjs documentation: For example (by Nextjs documentation):

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // This will not be logged on the server when using static rendering
  console.log(search)
 
  return <>Search: {search}</>
}

import { Suspense } from 'react'
import SearchBar from './search-bar'
 
// This component passed as a fallback to the Suspense boundary
// will be rendered in place of the search bar in the initial HTML.
// When the value is available during React hydration the fallback
// will be replaced with the `<SearchBar>` component.
function SkeletonFallback() {
  return <>Loading</>
}
 
export default function Page() {
  return (
    <>
      <nav>
        <Suspense fallback={<SkeletonFallback />}>
          <SearchBar />
        </Suspense>
      </nav>
      <h1>Dashboard</h1>
    </>
  )
}

Share via

Next JS 13 App router based not working on azure static web app

1 answer

Your answer