Root path broken when deployed

[anselanza]

I used this template/starter pretty much "as is" and tried to deploy the site on GitHub Pages (with a Tina Cloud backend). While everything worked normally in development, the root path was always broken when deployed.

Specifically, I would get the "404 - Page Not Found" page when first visiting the root of the site /, instead of the home page.

Clicking on any link from this point would work absolutely fine, including "Home". The browser would even display the root URL / (not /home), but you could reload the page and you would be back at the 404 page again.

A fellow web dev who knows Next.JS better than me advised that I add an index.tsx file in ./pages (for some reason this is missing in the template?), and this solved my problem immediately. The contents of the file were quite simple:

import Filename, { getStaticProps as FilenameStaticProps } from "./[filename]";

const Index = Filename;

export const getStaticProps = async ({ params }) => {
  return FilenameStaticProps({ params: { filename: "home" } });
};

export default Index;

No other changes were needed in configuration and code.

I'm curious whether anyone else has encountered a similar problem. Is this specific to GitHub Pages deployments somehow? If so, how come nobody else noticed this?