NextJs에서 Kakao Map API 실행하기

Nextjs 14버전 app-router(앱라우터) 에서 카카오맵 API를 실행하는 방법입니다.

먼저, 카카오맵 API를 신청해야됩니다.

실행 방법은 2가지가 있으며 1개를 선택하시면 됩니다.

<Script>태그 이용하기 또는 useKakaoLoader 생성

개인적으로, app-router에서는 useKakaoLoader를 추천드립니다.

script태그 이용하기

스크립트 태그의 strategy='beforeInteractive'를 해줘야됩니다.

app/map/layout.tsx

import Script from 'next/script'
import React from 'react'
export const API = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAOJSKEY}&libraries=services,clusterer&autoload=false`

export default function layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Script
        src={API}
        strategy="beforeInteractive"
      />
      {children}
    </>
  )
}

useKakaoLoader 컴포넌트 생성하기

components/use-kakao-loader.tsx

import { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk"
// 참고 https://apis.map.kakao.com/web/guide/
export default function useKakaoLoader() {
  useKakaoLoaderOrigin({
    appkey: process.env.KAKAOJSKEY,
    libraries: ["clusterer", "drawing", "services"],
  })
}

page.tsx에서 Map 실행하기

npm install react-kakao-maps-sdk

app/map/page.tsx

'use client'

import { Map } from "react-kakao-maps-sdk"
import useKakaoLoader from "./useKakaoLoader"
export default function BasicMap() {
  useKakaoLoader()

  return (
    <Map // 지도를 표시할 Container
      id="map"
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "350px",
      }}
      level={3} // 지도의 확대 레벨
    />
  )
}

참고

공식 kakao maps sdk 깃허브

react kakao map sdk 공식 문서

REST API를 사용하는 방법

const url = `https://dapi.kakao.com/v2/local/geo/coord2regioncode.json?x=127.1086228&y=37.4012191`
const data = fetch(url, {
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'KakaoAK ' + process.env.KAKAORESTKEY,
  },
}).then((res) => res.json())