fix and upgrade: bump next js to v14, remove public mapbox token

src/pages/breweries/[id]/index.tsx

@@ -11,6 +11,7 @@ import useMediaQuery from '@/hooks/utilities/useMediaQuery';
 import { Tab } from '@headlessui/react';
 
 import dynamic from 'next/dynamic';
+import { MAPBOX_ACCESS_TOKEN } from '@/config/env';
 
 const [BreweryInfoHeader, BreweryBeersSection, BreweryCommentsSection, BreweryPostMap] = [
   dynamic(() => import('@/components/BreweryById/BreweryInfoHeader')),
@@ -21,9 +22,10 @@ const [BreweryInfoHeader, BreweryBeersSection, BreweryCommentsSection, BreweryPo
 
 interface BreweryPageProps {
   breweryPost: z.infer<typeof BreweryPostQueryResult>;
+  mapboxToken: string;
 }
 
-const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
+const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken }) => {
   const [longitude, latitude] = breweryPost.location.coordinates;
   const isDesktop = useMediaQuery('(min-width: 1024px)');
   return (
@@ -67,13 +69,19 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
                   <BreweryCommentsSection breweryPost={breweryPost} />
                 </div>
                 <div className="w-[40%] space-y-3">
-                  <BreweryPostMap latitude={latitude} longitude={longitude} />
+                  <BreweryPostMap
+                    coordinates={{ latitude, longitude }}
+                    token={mapboxToken}
+                  />
                   <BreweryBeersSection breweryPost={breweryPost} />
                 </div>
               </div>
             ) : (
               <>
-                <BreweryPostMap latitude={latitude} longitude={longitude} />
+                <BreweryPostMap
+                  coordinates={{ latitude, longitude }}
+                  token={mapboxToken}
+                />
                 <Tab.Group>
                   <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
                     <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
@@ -105,9 +113,11 @@ export const getServerSideProps: GetServerSideProps<BreweryPageProps> = async (
   context,
 ) => {
   const breweryPost = await getBreweryPostById(context.params!.id! as string);
+  const mapboxToken = MAPBOX_ACCESS_TOKEN;
+
   return !breweryPost
     ? { notFound: true }
-    : { props: { breweryPost: JSON.parse(JSON.stringify(breweryPost)) } };
+    : { props: { breweryPost: JSON.parse(JSON.stringify(breweryPost)), mapboxToken } };
 };
 
 export default BreweryByIdPage;

src/pages/breweries/map.tsx

@@ -1,4 +1,4 @@
-import { NextPage } from 'next';
+import { GetServerSideProps, NextPage } from 'next';
 import { useEffect, useMemo, useState } from 'react';
 import Map, { Marker, Popup } from 'react-map-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -11,10 +11,15 @@ import BreweryPostMapQueryResult from '@/services/BreweryPost/schema/BreweryPost
 import { z } from 'zod';
 import useBreweryMapPagePosts from '@/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts';
 import ControlPanel from '@/components/ui/maps/ControlPanel';
+import { MAPBOX_ACCESS_TOKEN } from '@/config/env';
 
 type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>;
 
-const BreweryMapPage: NextPage = () => {
+interface BreweryMapPageProps {
+  token: string;
+}
+
+const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ token }) => {
   const [popupInfo, setPopupInfo] = useState<z.infer<
     typeof BreweryPostMapQueryResult
   > | null>(null);
@@ -84,7 +89,7 @@ const BreweryMapPage: NextPage = () => {
           initialViewState={{ zoom: 3, latitude: 48.3544, longitude: -99.9981 }}
           style={{ width: '100%', height: '100%' }}
           mapStyle={mapStyles[theme]}
-          mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
+          mapboxAccessToken={token}
           scrollZoom
         >
           <ControlPanel />
@@ -121,3 +126,7 @@ const BreweryMapPage: NextPage = () => {
 };
 
 export default BreweryMapPage;
+
+export const getServerSideProps: GetServerSideProps<BreweryMapPageProps> = async () => ({
+  props: { token: MAPBOX_ACCESS_TOKEN },
+});