Next.js를 사용 중에 일부 node_modules 들에 대해 Transpile 해야될 필요가 있어서 next-transpile-modules을 사용하고 있었습니다. 별도로 정리할 내용도 없을 정도로 간단한 설정으로 사용할 수 있는 모듈이어서 별도로 정리하거나 하지 않았습니다. 다만 근래에 코드를 정리하다보니 해당 모듈을 사용하고 있다는 존재 자체를 잊어버리고 있어서 간단하게 나마 정리해보고자 합니다.
모듈의 설치는 무척이나 간단합니다. next-transpile-modules을 설치해 주시고 next.config.js에 하단과 같이 사용할 모듈과 함께 설정해 주시면 됩니다.
const withTM = require('next-transpile-modules')(['somemodule', 'and-another'], { unstable_webpack5: true });
module.exports = withTM();하지만 보통은 다른 plugin도 함께 쓰는 경우가 많기 때문에 Next.js에서 여러 plugin의 사용을 도와주는 next-compose-plugins를 사용하게 됩니다. next-compose-plugins을 사용하여 설정하는 방법은 아래와 같습니다.
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['some-module', 'and-another']);
module.exports = withPlugins([withTM], {
// ...
});기능 자체가 명확하고 설정도 어렵지 않기 때문에 더 이상 작성할 내용이 없습니다. 필자는 이 모듈을 빌드되지 않은 형태의 TypeScript 파일이나 flow가 적용된 파일들을 직접 Import해서 사용하기 위해 사용하였습니다. Next.js에서 다른 모듈의 원본 파일들을 이 모듈을 사용함으로써 손쉽게 주입해서 사용할 수 있었습니다.