프론트엔드/Next.js
[Next.js] Next.js + Typescript 환경에서 카카오 JS SDK 사용하기
순코딩
2025. 5. 8. 12:03
카카오 디벨로퍼 접속
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
애플리케이션 생성
내 애플리케이션 > 애플리케이션 추가하기
애플리케이션 정보를 입력하고 애플리케이션을 추가합니다.
플랫폼 등록
생성한 애플리케이션 클릭 > 좌측 사이드바 '플랫폼' 클릭 > Web 플랫폼 등록 클릭
카카오 JS SDK를 사용할 도메인을 입력합니다.
필자는 배포 도메인, 개발 도메인을 설정 후 저장하였습니다.
환경변수 설정
NEXT_PUBLIC_KAKAO_SDK_KEY={애플리케이션의 JavaScript 키}예시) NEXT_PUBLIC_KAKAO_SDK_KEY=1asdfkabse45프로젝트 폴더에 .env 파일을 생성하여 위 애플리케이션의 JavaScript 키를 붙여넣습니다.
SDK 다운로드
https://developers.kakao.com/docs/latest/ko/javascript/download
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
SDK 설정
src / lib / KakaoInitializer.tsx
"use client";
import Script from "next/script";
declare global {
interface Window {
Kakao: {
init: (key: string) => void;
isInitialized: () => boolean;
Share: {
sendScrap: (options: { requestUrl: string; templateId: number; templateArgs: Record<string, string> }) => void;
};
};
}
}
export default function KakaoInitializer() {
return (
<Script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.5/kakao.min.js"
integrity="sha384-dok87au0gKqJdxs7msEdBPNnKSRT+/mhTVzq+qOhcL464zXwvcrpjeWvyj1kCdq6"
crossOrigin="anonymous"
strategy="afterInteractive"
onLoad={() => {
window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_SDK_KEY as string);
console.log(window.Kakao.isInitialized());
}}
/>
);
}
// ✨ 위 'SDK 다운로드' 과정에서 복사한 스크립트의 src와 integrity 속성을 붙여넣기하세요.
src / app / layout.tsx
import type { Metadata } from "next";
import KakaoInitializer from "@/lib/KakaoInitializer";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
{children}
<KakaoInitializer />
</body>
</html>
);
}
SDK 사용(카카오톡 공유하기)
src / components / KakaoShareButton.tsx
const KakaoShareButton = () => {
function shareMessage() {
window.Kakao.Share.sendScrap({
requestUrl: `${window.location.origin}`,
});
}
return (
<button onClick={shareMessage}>카카오톡 공유하기 버튼</button>
);
};
export default KakaoShareButton;