Static app hosted on S3 while using dynamic routes. Possible with App Router?

[joncursi]

With the pages router, it used to be possible to deploy a static Next.js app to an S3 bucket, even if the static app was built with dynamic routes. See #17711 for the discussion on this topic, and how this can be achieved by sprinkling a little bit of business logic into the 404 page.

My team is in the process of migrating our Next.js app, which is built in this ^^ way, from the Pages Router over to the App Router. However, we noticed that when exporting our app-router-based application, we are no longer seeing the dynamic segment HTML files in our out folder anymore.

For example, let's say I have an app route named app/hey/[slug]/page.tsx, with the contents of:

import React from 'react';

const Page = () => {
  return <div>Nothing special here</div>;
};

export default Page;

We expect to find an out/hey/[slug].html appearing in the build as a result of running next build. However, we get this build result:

This route is interpreted as a server route, thus no out/hey/[slug].html file is created.

I was able to get next build to detect this dynamic segment as a static route by adding the following to app/hey/[slug]/page.tsx:

import React from 'react';

// Added:
export const dynamic = 'force-static';

const Page = () => {
  return <div>Nothing special here</div>;
};

export default Page;

However, I still don't see out/hey/[slug].html appearing in the build.

Does the Next.js team have plans to address this issue with the App Router, or is this viewed more as an "anti-pattern" (static export + dynamic routes) and thus have no plans to allow this going forward with the app router?

Thanks!

[joncursi]

I have created a minimum viable reproduction to showcase this difference in behavior of next build between the pages router and the app router: https://github.com/joncursi/next-app-router-testing

[icyJoseph]

Hi,

AFAIK, this is a known issue. You can follow it here #48022

[JuanLouTech]

Hi there! I have an easy fix for this.

I'm having this issue too but what I made was a script that removes the ".html" part of the name of all the html files in the out/pages folder. This worked like a charm. If you want to test this without the script automation simply rename the html files in the pages folder in the S3 bucket to remove the ".html" part.

Hope this helps someone.