Configuring Webpack

Webpack is the bundler used to produce the Next.js dev server and builds. It can be configured to bundle more things than by default. As an example, let's add TypeScript.

Create tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "skipLibCheck": true,
    "target": "esnext",
    "typeRoots": [
      "./node_modules/@types"
    ]
  }
}

We need to install the required packages (loader, compiler, and typings):

$ npm install ts-loader@3 typescript @types/react @types/next --save-dev

Note

As of Next 5.0.1, TS Loader should be from the 3.x branch, because Next works on Webpack 3.

Next, modify the config:

module.exports = {
  webpack(config, {dir, defaultLoaders}) {
    config.module.rules.push({ // add a custom loader rule
      test: /\.+...