Next js 지원 여부
안녕하세요.
klip api를 모바일 웹 앱에 연결하고자 sdk를 설치했으나 next js에서는 window is not defined라는 에러가 발생해서 sdk를 정상적으로 이용할 수가 없었습니다. 찾아보니 2021년도 기준 Next js는 지원하지 않는 것으로 보았는데 현재도 Next js에서 klip api를 사용할 수는 없는지 아니면 사용 방법이 잘못된 건지 그 외에 대체 수단이 존재하는지 궁금합니다.
현재 시도한 방법은
1.App 2 App sdk를 설치
2.prepare.auth를 사용하여 request_key 발급
3.request()를 이용해 klip 앱으로 이동하여 권한 획득
4.window is not defined 에러 발생 (여기서 권한 획득 여부에 따른 결과값을 어떻게 받는 것인지 확인을 할 수가 없었습니다)
위와 같습니다.
답변 기다리겠습니다.
-
테스트 결과 next js에서도 사용 가능할 것 같아 글 남깁니다.
첫째, window is not defined에 관한 문제입니다.
window is not defined는 next js 프레임워크를 사용했을 때, 컴포넌트를 pre rendering하면서 window를 찾지 못해 발생합니다. 따라서 해당 버그를 고치기 위해서는 window를 불러오는 페이지에 한해서는 ssr이 작동해야 하지 않아야 합니다.
그래서 'klip-sdk'를 사용하는 페이지를 컴포넌트로 따로 떼어내고 해당 컴포넌트를 next/dynamic의 dynamic으로 감싸준 뒤 ssr 옵션을 껐습니다.
// pages
import React from 'react'
const ComponentA = dynamic(() => import('klip sdk를 사용하는 컴포넌트 위치'), {ssr: false})
const MyPage = () => {
return <ComponentA />
}
export default MyPage해당 방법을 사용했을 때, window is not defined 버그는 해결할 수 있었습니다.
둘째, request를 통해 klip 앱으로 이동한 뒤 권한을 획득하고 확인하는 순서에서 문제가 있었습니다.
request()를 불러온 후에 klip 앱으로 이동하는 즉시 getResult()를 불러오는 바람에 제대로 된 데이터를 받지 못했던 것인데 이 부분은 getResult()를 따로 분리하는 버튼을 만들어 request() 작업이 끝난 뒤에 getResult()를 불러오니 정상적인 데이터를 받을 수 있었습니다.
1 -
안녕하세요,
next js를 저희가 아직 공식적으로 지원하지는 않지만, 이렇게 좋은 해결방법을 포럼에 공유해주셔서 정말로 감사합니다.
저희도 내부적으로 공유주신 내용을 참고하여 sdk에 반영할 부분이 있을지 검토하도록 하겠습니다.
감사합니다.
0
댓글을 남기려면 로그인하세요.
댓글
댓글 2개