You May Need an Appropriate Loader to Handle This File Type, Currently No Loaders Are Configured to Process This File."

You may need an appropriate loader to handle this file type with Webpack and Babel

You need to install the es2015 preset:

npm install babel-preset-es2015

and then configure babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

How to fix You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

This issue occurs when you have fewer configurations than what you want to use.

In your case, you are trying to use Typescript on your NextJS project. Unfortunately, your Webpack configuration doesn't have a Typescript file loader.

There are two ways to solve this issue:

Use NextJS Typescript project start example from here
Add TS file loader on your Webpack configuration (reference in here)

Typescript with Webpack - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

So I think your issue here is that your webpack config file is written in typescript. I think your webpack config itself looks okay, but basically your webpack file is telling your system how to handle typescript files, but nothing is telling your system how to handle a webpack.config.ts file.

One quick test would be to remove the small bit of typescript in your config file and change it to webpack.config.js and see if that works. Then at least you've confirmed the issue.

As for getting the typescript config file you might just need to install ts-node as an npm dev dependency.

Here is the documentation for using a typescript config file though https://webpack.js.org/configuration/configuration-languages/