next js with typescript via babel

conf.js

{
  "presets": ["@babel/preset-typescript", "next/babel"],
}
  
  
/* tslint:disable */
const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withTypescript = require("@zeit/next-typescript");
const withSourceMaps = require("@zeit/next-source-maps");
const withProgressBar = require("next-progressbar");
const withGraphql = require("next-plugin-graphql");
const withPlugins = require("next-compose-plugins");
const withOptimizedImages = require("next-optimized-images");
const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const webpack = require("webpack");
const path = require("path");

// fix: patched commonsChunkConfig until it's merged into master
const commonsChunkConfig = (config, test = /\.css$/) => {
  // Extend the default CommonsChunkPlugin config
  config.plugins = config.plugins.map(plugin => {
    if (plugin.constructor.name === "CommonsChunkPlugin" && typeof plugin.minChunks !== "undefined") {
      const defaultMinChunks = plugin.minChunks;
      plugin.minChunks = (module, count) => {
        // Move all styles to commons chunk so they can be extracted to a single file
        if (module.resource && module.resource.match(test)) {
          return true;
        }
        // Use default minChunks for non-style modules
        return typeof defaultMinChunks === "function" ? defaultMinChunks(module, count) : count >= defaultMinChunks;
      };
    }
    return plugin;
  });
  return config;
};

const customWithTypescript = (nextConfig = {}) => {
  if (!nextConfig.pageExtensions) {
    nextConfig.pageExtensions = ["jsx", "js"];
  }

  if (nextConfig.pageExtensions.indexOf("ts") === -1) {
    nextConfig.pageExtensions.unshift("ts");
  }

  if (nextConfig.pageExtensions.indexOf("tsx") === -1) {
    nextConfig.pageExtensions.unshift("tsx");
  }

  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      if (!options.defaultLoaders) {
        throw new Error(
          "This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade"
        );
      }

      const { dir, defaultLoaders, dev, isServer } = options;

      config.resolve.extensions.push(".ts", ".tsx");

      if (dev && !isServer) {
        config.module.rules.push({
          test: /\.(ts|tsx)$/,
          loader: "hot-self-accept-loader",
          include: [path.join(dir, "pages")],
          options: {
            extensions: /\.(ts|tsx)$/
          }
        });
      }

      if (!defaultLoaders.babel.options.babelrc) {
        defaultLoaders.babel.options.presets.unshift("@babel/preset-typescript");
      }

      config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: [dir],
        exclude: /node_modules/,
        use: defaultLoaders.babel
      });

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });
};

// fix: prevents error when .css files are required by node
if (process.env !== "production") {
  if (typeof require !== "undefined") {
    require.extensions[".css"] = file => {
      // ignore
    };
  }
}

const nextJsConfig = {
  webpack: (config, { dev }) => {
    if (dev) {
      // This is being worked on as part of improved source maps support
      // https://github.com/zeit/next.js/pull/4156/
      // eslint-disable-next-line no-param-reassign
      config.devtool = "cheap-module-source-map";
    }

    // Add support for both css and scss
    // https://github.com/zeit/next-plugins/issues/127
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
    return dev ? config : commonsChunkConfig(config, /\.(sass|scss|css)$/);
  }
};

module.exports = withPlugins(
  [
    [
      withBundleAnalyzer,
      {
        analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
        bundleAnalyzerConfig: {
          browser: {
            analyzerMode: "static",
            reportFilename: "../bundles/client.html"
          }
        }
      }
    ],

    [withSourceMaps, {}],
    [withOptimizedImages, {}],
    [withGraphql, {}],
    //[withProgressBar, {}],
    [customWithTypescript, {}],
    [withSass, {}],
    [withCss, {}]
  ],
  nextJsConfig
);