[Next.js] v13 이후 app router에서 카카오톡 공유하기 구현(feat.TypeScript)

프로그래밍/Next.js

[Next.js] v13 이후 app router에서 카카오톡 공유하기 구현(feat.TypeScript)

용뇽 2023. 12. 27. 15:50

📖 들어가며

최근 Next.14 버전 app router로 마이그레이션을 진행하면서 카카오톡 공유하기 기능을 구현하는 데 있어서 변경된 부분과 여러 오류를 맞이하여 새롭게 포스팅합니다.

이전 포스팅에서 1번 ~ 1-3번까지는 방법이 동일합니다.

이전 포스팅을 참고해서 플랫폼 등록까지 하고 읽어주시면 감사하겠습니다.

app router에서는 _document.tsx와 _app.tsx가 사라지고 이전에 해당 파일에서 작성되었던 코드는 layout.tsx에서 작성해주어야 합니다.

스크립트 컴포넌트 작성

카카오 디벨로퍼에서 플랫폼 등록을 완료했다면 이제 프로젝트로 돌아와서 적용을 해봅시다.

먼저 KakaoScript.tsx 파일을 생성하고 아래 코드를 생성합니다.

파일 위치는 프로젝트 구조에 맞게 생성하시면 됩니다.

// KakaoScript.tsx

'use client';

import Script from 'next/script';

function KakaoScript() {
  const onLoad = () => {
    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
  };

  return (
    <Script
      src="https://developers.kakao.com/sdk/js/kakao.js"
      async
      onLoad={onLoad}
    />
  );
}

export default KakaoScript;

이전(v11) page router에서는 최상단 컴포넌트에서 useEffect를 사용하여 Kakao.init을 진행했지만,

TypeScript 환경의 app router 에서는 해당 방법으로 동작하지 않고 Kakao.init이 제대로 실행되지 않는 문제를 겪었습니다.

함수를 사용하는 부분이 있기 때문에 'use clinet' 문법을 사용하여 해당 컴포넌트는 클라이언트 컴포넌트 사실을 알려줍니다.

next에서 제공하는 Script를 사용해서 적용시키는 방법입니다.

먼저,

Kakao Developers에서 애플리케이션 요약 탭에서 JavaScript 키를 env파일로 작성합니다.

다음으로,

Script의 src에 카카오 sdk를 넣어줍니다.

여기서 중요한 부분이 스크립트를 다 불러오는 즉시 실행할 수 있도록 하는 onLoad를 사용하여 Kakao.init을 적용시켜 줍니다.

이렇게 하게 되면 sdk를 성공적으로 불러오면 그 즉시 onLoad 함수를 실행하게 됩니다.

스크립트 컴포넌트 적용

// layout.tsx

import KakaoScript from 'components/common/KakaoScript';

declare global {
  interface Window {
    Kakao: any;
  }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
   return (
    <html>
      <body>
        <ClientComponentContainer>{children}</ClientComponentContainer>
      </body>
      <KakaoScript />
    </html>
  );
}

body 하단에 KakaScript 컴포넌트를 적용시켜 줍니다.

공유하기 기능 구현

이전 게시글 코드에서는 Kakao.Link를 사용했었지만 sdk도 업데이트되면서 Kakao.Share를 통해 구현했습니다.

Link -> Share 외에 달라진 점은 없는 것 같습니다.

const handleShearToKakao = () => {
    const { Kakao, location } = window;
    Kakao.Share.sendScrap({
      requestUrl: location.href,
    });
  };

위와 같이 구현할 수 있습니다.

해당 함수를 공유하기 버튼에 적용하면 현재 경로를 기반해서 og tag를 참조하여 카카오톡으로 공유를 하게 됩니다.

다른 옵션

og tag를 이용한 sendScript 메서드를 이용하지 않아도 직접 작성하여 내용을 만들 수 있으니 공식문서를 참고하시면 됩니다!

📕 마무리

app router 관련해서 자료가 너무 없었기 때문에 은근히 애를 먹었던 작업이었습니다,,

도움이 되셨으면 좋겠습니다.

저작자표시 비영리 변경금지