Minimal Mapbox

map.js

import { useState } from "react";
import ReactMapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

export default function Home() {
  const [viewport, setViewport] = useState({
    latitude: 43,
    longitude: -79,
    zoom: 8,
  });

  return (
    <div>
      <ReactMapGL
        {...viewport}
        width="100%"
        height="100vh"
        onViewportChange={(nextViewport) => setViewport(nextViewport)}
        mapboxApiAccessToken={"YOUR_KEY"}
      ></ReactMapGL>
    </div>
  );
}