This example shows how to integrate react-azure-maps into your Next.js application.

Prerequisite

1. Install react-azure-maps to your dependencies.

yarn add react-azure-maps

2. Import the following style sheet to your component or page

import 'azure-maps-control/dist/atlas.min.css'

3. Since azure-maps-control is a client side library and it cannot be imported in your server side code. Therefore, you will need to use next/dynamic to load your Map component at client side.

// pages/index.tsx
import type { NextPage } from "next";
import dynamic from "next/dynamic";

const DynamicMap = dynamic(() => import("../components/Map"), {
  ssr: false,
});

const Home: NextPage = () => <DynamicMap />;

export default Home;

How to run this demo

1. Update your AzureMaps subscriptionKey in `/components/Map.tsx``

2. Run the development server

yarn dev

3. Open http://localhost:3000 with your browser to see the result.