I am developing a multilingual website using Next.js and next-translate, deployed on Cloudflare. Here is the structure of my pages:

• Dynamic page: [path].jsx
• Homepage: index.jsx
• APP page: app.jsx

The homepage and dynamic pages are loaded using SSR, with export const runtime = 'experimental-edge'; set. The APP page is loaded using SSG. Everything worked fine until I added localeDetection: false in the i18n.js configuration file, which caused the following issue:

• The APP page opens normally
• The dynamic page also opens normally
• The homepage does not open and returns a 500 status code

The error message indicates that the request to the homepage is being routed to the dynamic page, causing the 500 error.

This issue only occurs after deploying to Cloudflare; local testing works fine.

I hope someone can help me resolve this issue, thank you very much!

Here are the relevant configurations and code:

// i18n.js
module.exports = {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'zh-CN', 'es', 'de', 'ru', 'ja', 'ar'],
    localeDetection: false,
    pages: {
        '*': ['common'],
    },
    loadLocaleFrom: async (lang, ns) => {
        let current = null;
        try {
            current = (await import(`./public/locales/${lang}/${ns}.json`)).default;
        } catch (e) {
            console.error(`Translation file not found: ./public/locales/${lang}/${ns}.json`, e);
        }
        let en = (await import(`./public/locales/en/${ns}.json`)).default;
        return current ?? en;
    },
}

// next.config.mjs
/** @type {import('next').NextConfig} */
import nextTranslate from "next-translate-plugin";

const nextConfig = nextTranslate({
    reactStrictMode: true,
    experimental: {
        scrollRestoration: true
    },
    trailingSlash: false,
    images: {
        unoptimized: true
    },
    async rewrites() {
        return [
            {
                source: '/',
                destination: '/index'
            },
        ];
    },
})

export default nextConfig;

// Dynamic page [path].jsx
const PathPage = ({...props}) =>  {
    return (
        <Page {...props}/>
    );
}

export async function getServerSideProps(context) {
    let path = context.params.path;
    const locale = context.locale ?? 'en';
    const pageInfo = getPageInfo(path, locale);
    if (!pageInfo) {
        // 404
        return {
            notFound: true,
        };
    }
    return {
        props: {
            ...pageInfo,
            path,
        },
    };
}

export default PathPage

export const runtime = 'experimental-edge';

// Dynamic page index.jsx
import React from "react";
import useTranslation from 'next-translate/useTranslation';
import {listSecondaryPageBySource} from "@/utils/secondaryPageArticle";
import {Footer} from "@/components/Footer";

function Index({secondaryPageFooterList}) {
    const {t} = useTranslation('home')
    return (
        <div>
            {t('home.title')}
            <Footer secondaryPageFooterList={secondaryPageFooterList}/>
        </div>

    )
}

export const getServerSideProps = async ({locale}) => {
    return {
        props: {
            secondaryPageFooterList: await listSecondaryPageBySource()
        },
    }
}

export default Index

export const runtime = 'experimental-edge';

// Dynamic page app.jsx
import React from "react";

const GenerateApp = ({}) => {
    return (
        <div>app</div>
    )
}

export default GenerateApp



I hope someone can help me resolve this issue, thank you very much!