<p dir="auto">With <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="187731663" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/222" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/222/hovercard" href="https://github.com/vercel/next.js/pull/222">#222</a> merged any ideas how to add a loader for TypeScript in next.config.js?</p>
<p dir="auto">I've tried adding a TypeScript specific loader like this</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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) =&gt; {
    config.module.rules.push(typescriptLoader);
    return config;
  }
}"><pre class="notranslate"><code class="notranslate">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) =&gt; {
    config.module.rules.push(typescriptLoader);
    return config;
  }
}
</code></pre></div>
<p dir="auto">but assume additional changes need to be made as well as additional entries for hot loading etc.</p>
<p dir="auto">Another question is should the TypeScript loader be used in with babel e.g.</p>
<p dir="auto"><code class="notranslate">loaders: ['babel-loader', 'ts-loader']</code></p>
<p dir="auto">If so I'd need to apply the same babel options as in webpack.js.</p>
<p dir="auto">this looks <em>awesome</em> but I also really like TypeScript.<br>
is there any way to integrate typescript into the workflow?</p>