When I access the link by clicking, the page opens, but when I access it directly, I receive a 404 error. Here is my next.config.js:

/** @type {import('next').NextConfig} */

const nextConfig = {
reactStrictMode: false,
images: {
domains: ['assets.vercel.com', 'cdn.discordapp.com'],
formats: ['image/avif', 'image/webp'],
unoptimized: true
},
distDir: './build-app',
transpilePackages: [],
trailingSlash: true
}

module.exports = nextConfig

Here is my firebase.json:

{
"hosting": [
{
"site": "bnr-milfitas-batuq",
"public": "sites/bnr-milfitas-batuq.botanarede.com.br"
}
],
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"hosting": {
"port": 5000
},
"ui": {
"enabled": true,
"port": 5002
},
"singleProjectMode": true,
"firestore": {
"port": 8080
}
}
}

Detail, I don't have this issue locally, only in production (I am exporting the site statically and deploying it on Firebase Hosting).