fix(nextjs): building nextjs app by dynamic importing nivo chart

  ## problem
  - the nextjs app was unable to build because `@nivo/core` was using a
    file that used commonJS format where nextjs used ESmodule
  - this caused the build to fail
  - probably cause after upgrading `@nivo/core` to v0.83.0

  ## solution
  - lazy load nivo chart component
  - solution obtained from
    - https://nextjs.org/docs/messages/import-esm-externals#possible-ways-to-fix-it
    - plouc/nivo#2310 (comment)

  ## why
  - this will solve the issue of building nextjs app

  ## where
  - ./src/components/Charts/ForwardDestinations.tsx
  - ./src/components/Charts/QueryTypes.tsx

  ## usage

src/components/Charts/ForwardDestinations.tsx

@@ -4,11 +4,15 @@ import CardContent from '@mui/material/CardContent';
 import Grid from '@mui/material/Grid';
 import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
-import { ResponsivePie } from '@nivo/pie';
+import dynamic from 'next/dynamic';
 
 import { nivoChartsDarkTheme, chartThemeColours } from '@utils/darkTheme';
 import { IForwardedDestinations } from '@utils/url/upstream.types';
 
+const ResponsivePie = dynamic(() => import('@nivo/pie').then((m) => m.ResponsivePie), {
+  ssr: false,
+});
+
 interface Props {
   data: IForwardedDestinations | undefined;
   isLoading: boolean;

src/components/Charts/QueryTypes.tsx

@@ -4,11 +4,16 @@ import CardContent from '@mui/material/CardContent';
 import Grid from '@mui/material/Grid';
 import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
-import { ResponsivePie } from '@nivo/pie';
+import dynamic from 'next/dynamic';
+
 
 import { nivoChartsDarkTheme, chartThemeColours } from '@utils/darkTheme';
 import { IQueryTypes } from '@utils/url/upstream.types';
 
+const ResponsivePie = dynamic(() => import('@nivo/pie').then((m) => m.ResponsivePie), {
+  ssr: false,
+});
+
 interface Props {
   data: IQueryTypes | undefined;
   isLoading: boolean;