Next.js Awesome Typescript integration: how to add awesome-typescript-loader to Next.js webpack config

next.config.js

module.exports = {
  webpack(config, options) {
    const { dir, defaultLoaders } = options
    
    config.pageExtensions.push(".ts", ".tsx");
    
    config.resolve.extensions.push(".ts", ".tsx");
    
    config.module.rules.push({
      test: /\.tsx?$/,
      include: [dir],
      exclude: /node_modules/,
      use: [
        defaultLoaders.babel,
        {
          loader: "awesome-typescript-loader",,
        },
      ],
    });
    
    return config;
  }
}