먼저, Next.js 프로젝트에 next-compose-plugins 패키지를 설치해야 합니다. 이 패키지는 Next.js 플러그인을 쉽게 구성할 수 있도록 도와줍니다. 아래의 명령어를 사용하여 next-compose-plugins를 설치합니다:

npm install next-compose-plugins

이제 파일 압축을 위한 플러그인을 작성할 수 있습니다. Next.js 프로젝트의 루트 디렉토리에 next.config.js 파일을 생성하고 다음과 같이 플러그인을 작성합니다:

const withPlugins = require('next-compose-plugins');
const withCompression = require('next-plugin-compression');

module.exports = withPlugins([
  [withCompression, {
    compression: 'gzip', // 압축 방식 ('gzip' 또는 'brotli' 사용 가능)
    threshold: 1024, // 압축을 적용할 파일 크기 (1KB 이상의 파일에 대해서만 압축)
  }],
  // 다른 플러그인이 있다면 여기에 추가
]);

위의 코드에서, next-plugin-compression 패키지를 사용하여 파일 압축 플러그인을 생성했습니다. compression 옵션으로 ‘gzip’ 압축 방식을 선택하고, threshold 옵션으로 1KB 이상의 파일에 대해서만 압축을 적용합니다.

이제 Next.js 애플리케이션을 실행하면 정적 파일에 자동으로 압축이 적용된 상태로 서빙됩니다. 이를 통해 사용자의 네트워크 대역폭을 줄이고 웹 페이지의 로딩 속도를 개선할 수 있습니다.

참고 문서:

• Next.js 공식 문서
• next-plugin-compression 패키지