이미지 최적화에 대한 에러문구

기록을 해두지 않아서 정확한 에러 메시지가 기억나진 않지만
이미지 최적화를 하지 못하여 빌드가 실패한다는 메시지가 나올 때가 있습니다.

next.config.js 에 아래 내용을 추가하여 해결했습니다.

module.exports = {
  images: {
    loader: 'imgix',
    path: '/',
  },
};

github pages에 배포했더니 실패 메일이 온다.

이런 이메일이 오면서 배포가 실패합니다.
원인을 찾아보니 next.config.js 에 도메인 명을 입력해주지 않아서 그렇다고 합니다.

module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://til.juunini.xyz' : '',
};

이렇게 해결했습니다.

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/juunini/Desktop/til/lib'

위 에러문구를 만나며 빌드가 실패합니다.

next.config.js 에 아래 내용을 추가하여 해결했습니다.

module.exports = {
  webpack: (config) => {
    config.node = {
      fs: 'empty'
    };
    
    return config;
  },
};

getStaticProps로 동적 페이지를 생성할 때 next.config.js에 정의해달라는 에러 메시지

이 에러도 기록해두지 않아서 정확히 어떤 내용이었는지는 기억나진 않습니다.

검색했을 때 static-site-generator-webpack-plugin 라는 플러그인이 getStaticProps 에 의해 생성되는 동적 페이지들을
자동으로 찾아서 생성해주어서 해당 에러를 해결해준다는 것을 발견하고 사용하였습니다.

yarn add -D static-site-generator-webpack-plugin

next.config.js 에 아래 내용을 추가하여 해결했습니다.

const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');

module.exports = {
  plugins: [
    new StaticSiteGeneratorPlugin({
      crawl: true
    })
  ],
};