카카오 디벨로퍼 접속
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;'프론트엔드 > Next.js' 카테고리의 다른 글
| [Next.js] 다이나믹(동적) 라우팅 예시 코드 (0) | 2025.07.21 |
|---|---|
| Next.js에서의 CORS와 API 통신: 웹서버와 WAS의 공존 (0) | 2025.05.10 |
| [Next.js] 다이나믹 임포트를 활용한 하이드레이션 오류 해결방법 | Error: Hydration failed because the server rendered HTML didn't match the client. (0) | 2025.04.30 |
| [Next.js] <Image/> 태그 사용방법 (이미지 원본 비율 유지하기 & 부모 요소 너비 꽉 채우기) (0) | 2025.04.21 |
| [Next.js] 파일 제출 버튼 스타일링 예시 코드 (1) | 2025.04.17 |
