혼자 적어보는 노트

[Next.js] 카카오톡 공유하기 본문

NextJS

[Next.js] 카카오톡 공유하기

jinist 2022. 8. 13. 03:26

 

이전에 React에서 카카오톡 공유하기 기능을 추가해본 적이 있긴 했지만

그때는 template을 사용하지 않고 코드를 조금 길게 작성했었어서

이번 기회에 template을 사용해보기로 했다.

 

 

1. _document.tsx에 script 추가

: 컴포넌트 내부에서도 script를 추가할 수도 있겠지만 전역으로 사용할 script기 때문에 _document에 추가했다.

 render() {
    return (
      <Html>
        <Head />
        <script defer src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

 

 

2. 상위 컴포넌트에서 kakao init 하기

const Layout = ({ children }: LayoutProps) => {

  useEffect(() => {
    const kakao = window.Kakao;
    if (!kakao.isInitialized()) {
      kakao.init(process.env.NEXT_PUBLIC_KAKAO_SHARE_KEY);
    }
  }, []);

  return (
    <div>
      {children}
    </div>
  );
};

export default Layout;

이미 init이 된 경우에는 다시 실행하지 않도록 조건을 추가해주었고

KAKAO_SHARE_KEY는 내 애플리케이션의 JavaScript 키를 담아주었다.

 

 

❗❗ 추가 작성 (22.09.01)

 

이렇게 상위 컴포넌트인 Layout에 작성했을 때 로컬에서는 문제가 없었지만

배포를 하고 가끔 사이트에 들어갈 때(랜덤으로) isInitialized를 읽을 수 없다는 에러가 발생했다.

 

if (kakao && !kakao.isInitialized()) {
   kakao.init(process.env.NEXT_PUBLIC_KAKAO_SHARE_KEY);
}

일단 kakao 객체가 존재하는지 한번 더 확인을 하고

이 코드를 layout이 아닌 공유 버튼 컴포넌트에 넣었더니 해결되었다.

 

 

 

3. 사용할 Button에 onClick 이벤트 추가

import type { NextPage } from 'next';
import Head from 'next/head';
import React, { useEffect } from 'react';

const Test: NextPage = () => {
  const onClick = () => {
    const { Kakao } = window;
    Kakao.Link.sendCustom({
      templateId: '' // template 아이디 입력
    });
  };

  return (
    <React.Fragment>
      <main>
        <button id="kakao-link-btn" onClick={onClick}>
          버튼
        </button>
      </main>
    </React.Fragment>
  );
};

export default Test;

 

template는 Kakao developers의 내 애플리케이션에서 제품설정-메시지-메시지 템플릿을 통해

템플릿을 만들고 id를 적어주면 간편하게 사용할 수 있다.

 

 

저작자표시

'NextJS' 카테고리의 다른 글

[Next.js] Shallow: true 뒤로가기 시 데이터 패칭  (0) 2022.08.31
[Next.js] 페이지 이동 시 로딩  (0) 2022.08.19
[Next.js] router.query 값 가져오기  (0) 2022.08.04
[Next.js] 페이지마다 다른 Layout  (0) 2022.08.03
[Next.js] Image height auto 사용  (0) 2022.07.30
'NextJS' Related Articles more
Comments