Blog link with trailing slash is broken https://ruffle.rs/blog/

[n0samu]

https://ruffle.rs/blog/ was the main page of the blog in the previous version of the site, but now it's a 404 page. I couldn't find a way to create an index.html redirect with output: "export" enabled in nextConfig. I tried creating an index.tsx file in the blog folder, using exportPathMap, and using a redirects() function, but none of these seem to work with our setup. Most people say to just add trailingSlash: true to the nextConfig, but I'm not sure if that would break other previously-working URLs on the site.

[danielhjacobs]

I think trailingSlash: true would mostly be fine, but the issue is it would break https://ruffle.rs/avm2.html. It would also break https://ruffle.rs/downloads.html etc, but I'm not so worried about those pages as they didn't previously exist. Unfortunately, https://ruffle.rs/avm2.html did exist.

[danielhjacobs]

https://github.com/ruffle-rs/ruffle-rs.github.io/blob/master/src/app/avm2/page.tsx is what allows https://ruffle.rs/avm2.html to redirect, but according to https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash, "When used with output: "export" configuration, the /about page will output /about/index.html (instead of the default /about.html)."

[danielhjacobs]

Though that page also says "By default Next.js will redirect urls with trailing slashes to their counterpart without a trailing slash." Not sure why that is not happening.

[danielhjacobs]

We might be able to accomplish this with middleware: https://nextjs.org/docs/app/building-your-application/routing/middleware#advanced-middleware-flags

[n0samu]

Middleware is not supported for static builds: https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
As long as we're using GitHub Pages I don't think there is any solution to this issue. Just wanted to log it for posterity.

[danielhjacobs]

Just realized there is technically a solution, not sure it's worth it. The "use client;" is already being added by the i18n PR.

Change this https://github.com/ruffle-rs/ruffle-rs.github.io/blob/master/src/app/not-found.tsx:

"use client";

import classes from "./not-found.module.css";
import { Stack, Text, Title } from "@mantine/core";
import React, { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    if (document.location.pathname === "/blog/") {
      document.location.href = "/blog";
    }
  }, []);

  return (
    <Stack align="center">
      <Title className={classes.title}>404</Title>
      <Title order={2}>Page not found :(</Title>
      <Text>The requested page could not be found.</Text>
    </Stack>
  );
}