Adding Typescript loader in next.config.js

[jagreehal]

With #222 merged any ideas how to add a loader for TypeScript in next.config.js?

I've tried adding a TypeScript specific loader like this

const path = require('path');
const nextPagesDir = path.join(__dirname, 'pages');

const typescriptLoader = {
  test: /\.ts(x?)$/,
  loader: ['ts-loader'],
  exclude: /node_modules/,
  include: [
    nextPagesDir
  ]
};

module.exports = {
  webpack: (config) => {
    config.module.rules.push(typescriptLoader);
    return config;
  }
}

but assume additional changes need to be made as well as additional entries for hot loading etc.

Another question is should the TypeScript loader be used in with babel e.g.

loaders: ['babel-loader', 'ts-loader']

If so I'd need to apply the same babel options as in webpack.js.

[rauchg]

This would be a terrific example to add! ./examples/with-typescript

[giacomorebonato]

I think that now the problem is that Next is looking only for files with .js extension in the pages folder, but with TypeScript we have .tsx

[timneutkens]

Duplicate of #96. Closing in favor of that one.
Regarding the extensions (.ts/.tsx). There is a comment about adding custom extensions here: #544 (at the bottom)

[nelak]

I was able to get this working in #2250 if anyone wants to take a look a it