Next.js

리액트를 다루면 한번쯤은 들어보게 되는 프레임워크이다. 왜 쓰는지 설명하자면 대표적으로 두가지 정도 있다.
1. 편하고 쉬운 라우팅
2. 편하고 쉬운 SSR, SSG

그리고 거의 zero-config 수준의 설정까지.. 근데 그러다보니 조금 내 입맞에 맞추기는 어려운 경우들이 있다. 물론 대부분은 다 있다.

문제

RN으로 된 프로젝트에 webview 를 꽂아넣어야 하는 일이 생겼다. 그러다 보니 특정 상황에선 webview ==> RN 으로 메시지를 보내야 하는데 (뭐 바텀시트 좀 올려줘 등등..) 그럴 때 사용하는 것이 window.ReactNativeWebView.postMessage('블라블라') 이런 것이다. 일반 JS에서는 뭐 별 문제가 없다. 하지만 TS 상황에서는 ReactNativeWebView 에 뻘겋게 밑줄이 생기면서 뭐라뭐라 에러를 낸다. 그래도 돌아가긴 한다.

이유

이유는 바로 ReactNativeWebView 에 대한 타입이 없다. 라는 뜻이다. 그러면 TS가 알아듣게 개발자가 넣어줘야 하는데 이때 사용하는게 global.d.ts 라는 녀석이다. 이 파일에 이렇게 저렇게 뭔가를 적는다. 그렇게 하면 보통의 리액트나 ts 프로젝트에서는 잘 가져다 쓰는데 Next.js 는 조금 다르다.

Next.js 에 끼얹는 방법

Next.js 는 next-env.d.ts 라는 자기만의 파일이 있다. 왠지 next.config.js 안에다 기존의 webpack.config.js 설정이 다 들어가는 것 같은 그런 느낌이다. 하지만 next-env.d.ts 그렇지 않다. 생긴 것도 다르고 계속 알아서 바뀐다. 그래서 저 안에는 넣을 수 없다.

공식 문서를 찾아보니 별도의 d.ts 를 만들고 그 안에 원하는 세팅을 넣고 tsconfig.json 안에서 include 항목의 배열에 만들 파일을 넣으라고 한다.

최종

// global.d.ts
declare global {
  interface Window {
    ReactNativeWebView: any;
  }
}

export const ReactNativeWebView = window.ReactNativeWebView;

// tsconfig.json
{
  "include": ["global.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
}

이런 식으로 했다. 이러니까 바로 빨간 줄이 사라졌다.
한글로 된 자료가 별로 없는 거 같아서 만들어봤다.