sos-nextjs/next.config.js

const path = require('path')
const withImages = require('next-images')

class CustomResolver {
  constructor(source, target){
    this.source = source || 'resolve';
    this.target = target || 'resolve';
  }

  apply(resolver) {
		const target = resolver.ensureHook(this.target);
		resolver
			.getHook(this.source)
			.tapAsync("CustomResolver", (request, resolveContext, callback) => {
        // request.request is the string path we're resolving
        // match ~/[dir]/[component]
        const match = request.request.match(/^\~\/([^/]*)\/([^/]*)$/)
        if(!match)
          return callback();
        
        // Create a new request, and turn it into
        // ./[dir]/[component]/[component].js
        const newRequest = {
          ...request,
          request: path.join(__dirname, match[1], match[2], match[2] + '.js')
        }

				resolver.doResolve(target, newRequest, null, resolveContext, callback);
			});
  }
}

module.exports = withImages({
  webpack: (config) => {
    config.resolve.plugins.push(new CustomResolver())

    return config
  }
})