Added support for typescript loader

examples/with-typescript/next.config.js

@@ -0,0 +1,54 @@
+const path = require('path')
+const nextPagesDir = path.join(__dirname, 'pages')
+
+const babelLoader = {
+  loader: 'babel-loader',
+  options: {}
+}
+
+const emitLoader = {
+  loader: 'emit-file-loader',
+  options: {
+    name: 'dist/[path][name].js'
+  }
+}
+
+const typescriptLoader = {
+  test: /\.tsx?$/,
+  use: [
+    emitLoader,
+    babelLoader,
+    'ts-loader'
+  ],
+  exclude: /node_modules/,
+  include: [
+    nextPagesDir
+  ]
+}
+
+module.exports = {
+  webpack: (config) => {
+    // Add typescript extensions
+    config.resolve.extensions = [
+      '.js',
+      '.json',
+      '.tsx',
+      '.ts']
+
+    // Resolve to next babel-loader options
+    let {
+      options
+    } = config.module.rules.find((x) => x.loader === 'babel-loader')
+    babelLoader.options = options
+
+    // Resolve to next emit-file-loader options
+    let {
+      transform
+    } = config.module.rules.find((x) => x.loader === 'emit-file-loader').options
+    emitLoader.options.transform = transform
+
+    // Add typescript rules
+    config.module.rules = config.module.rules.concat(typescriptLoader)
+    return config
+  }
+}

examples/with-typescript/package.json

@@ -2,14 +2,14 @@
   "name": "with-typescript",
   "version": "1.0.0",
   "scripts": {
-    "dev": "concurrently \"tsc --watch\" next"
+    "dev": "next"
   },
   "dependencies": {
     "next": "latest"
   },
   "devDependencies": {
-    "@types/react": "^15.0.1",
-    "concurrently": "^3.1.0",
-    "typescript": "^2.1.5"
+    "@types/react": "^15.0.27",
+    "ts-loader": "^2.1.0",
+    "typescript": "^2.3.4"
   }
 }

server/build/webpack.js

@@ -48,7 +48,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       ]
     }
 
-    const pages = await glob('pages/**/*.js', { cwd: dir })
+    const pages = await glob('pages/**/*.{js,ts,tsx}', { cwd: dir })
     const devPages = pages.filter((p) => p === 'pages/_document.js' || p === 'pages/_error.js')
 
     // In the dev environment, on-demand-entry-handler will take care of
@@ -178,14 +178,14 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
   }
 
   const rules = (dev ? [{
-    test: /\.js(\?[^?]*)?$/,
+    test: /\.(js|tsx?)(\?[^?]*)?$/,
     loader: 'hot-self-accept-loader',
     include: [
       join(dir, 'pages'),
       nextPagesDir
     ]
   }, {
-    test: /\.js(\?[^?]*)?$/,
+    test: /\.(js|tsx?)(\?[^?]*)?$/,
     loader: 'react-hot-loader/webpack',
     exclude: /node_modules/
   }] : [])

server/resolve.js

@@ -28,19 +28,27 @@ function getPaths (id) {
 
   if (i.slice(-3) === '.js') return [i]
   if (i.slice(-5) === '.json') return [i]
+  if (i.slice(-3) === '.ts') return [i]
+  if (i.slice(-4) === '.tsx') return [i]
 
   if (i[i.length - 1] === sep) {
     return [
       i + 'index.js',
-      i + 'index.json'
+      i + 'index.json',
+      i + 'index.ts',
+      i + 'index.tsx'
     ]
   }
 
   return [
     i + '.js',
     join(i, 'index.js'),
     i + '.json',
-    join(i, 'index.json')
+    join(i, 'index.json'),
+    i + '.ts',
+    join(i, 'index.ts'),
+    i + '.tsx',
+    join(i, 'index.tsx')
   ]
 }
 

server/utils.js

@@ -1,8 +1,8 @@
 import { join } from 'path'
 import { readdirSync, existsSync } from 'fs'
 
-export const IS_BUNDLED_PAGE = /^bundles[/\\]pages.*\.js$/
-export const MATCH_ROUTE_NAME = /^bundles[/\\]pages[/\\](.*)\.js$/
+export const IS_BUNDLED_PAGE = /^bundles[/\\]pages.*\.(js|tsx?)$/
+export const MATCH_ROUTE_NAME = /^bundles[/\\]pages[/\\](.*)\.(js|tsx?)$/
 
 export function getAvailableChunks (dir, dist) {
   const chunksDir = join(dir, dist, 'chunks')