Next.js Awesome Typescript integration: how to add babel integration

next.config.js

module.exports = {
  webpack(config, options) {
    const { dir, defaultLoaders } = options
    
    config.pageExtensions.push(".ts", ".tsx");
    
    config.resolve.extensions.push(".ts", ".tsx");
    
    // ADDED THIS
    // cacheDirectory option is unavailable in case of useBabel option
    const fixBabelConfig = omit(defaultLoaders.babel.options, [
      "cacheDirectory",
    ]);

    config.module.rules.push({
      test: /\.tsx?$/,
      include: [dir],
      exclude: /node_modules/,
      use: [
        {
          loader: "awesome-typescript-loader",
          // AND ADDED THIS
          options: {
            useBabel: true,
            babelOptions: fixBabelConfig,
          },
        },
      ],
    });
    
    return config;
  }
}

// ALSO ADDED THIS
const omit = (obj, keysToOmit) =>
  Object.keys(obj)
    .filter(key => keysToOmit.indexOf(key) < 0)
    .reduce((newObj, key) => Object.assign(newObj, { [key]: obj[key] }), {});