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...