Next js does not load dynamic page in build

I have a next js app that uses dynamic routes. The dynamic routes work perfectly on dev mode but when I build it and ship it to netlify they throw a 404

here is my code : in __app.js

import { useEffect } from 'react';
import Router from 'next/router';
import { useRouter } from 'next/router'
import { initGA, logPageView } from 'analytics';
import 'rc-drawer/assets/index.css';
import 'rc-tabs/assets/index.css';
import 'swiper/swiper-bundle.css';
import 'react-toastify/dist/ReactToastify.css';
import { MantineProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';


export default function CustomApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    initGA();
    logPageView();
    Router.events.on('routeChangeComplete', logPageView);
  }, []);

  if(router == '/') {return <Component {...pageProps} />;}
  else {return  <MantineProvider withGlobalStyles withNormalizeCSS> <NotificationsProvider> <Component {...pageProps} /></NotificationsProvider></MantineProvider> }
}

and here is my next config:

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

const nextConfiguration = {
  target: 'serverless', //will output independent pages that don't require a monolithic server. It's only compatible with next start or Serverless deployment platforms (like ZEIT Now) — you cannot use the custom server API.
};

module.exports = withPlugins([optimizedImages], nextConfiguration);

What I need is for the [calendar].jsx to be able to run when accessed

from Next js does not load dynamic page in build