Next.js + Inferno

Use Inferno 🔥 with Next.js to get even faster ⚡ rendering.

Installation

npm install --save next-inferno inferno inferno-compat inferno-clone-vnode inferno-create-class inferno-create-element

or

yarn add next-inferno inferno inferno-compat inferno-clone-vnode inferno-create-class inferno-create-element

Usage

Create a next.config.js in your project

// next.config.js
const withInferno = require('next-inferno')
module.exports = withInferno()

Then create a server.js

// server.js
require('next-inferno/alias')()
const { createServer } = require('http')
const next = require('next')

const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler()
const port = process.env.PORT || 3000

app.prepare()
.then(() => {
  createServer(handle)
  .listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`)
  })
})

Then add or change "scripts" section of your package.json:

...
"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
},
...

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withInferno = require('next-inferno')
module.exports = withInferno({
  webpack(config, options) {
    return config
  }
})

TypeScript support

Looking for TypeScript support? Just follow that easy steps to use it in your Next projects:

1. Install typescript and @zeit/next-typescript:

npm install --save typescript @zeit/next-typescript

or

yarn add typescript @zeit/next-typescript

2. Edit next.config.js:

// next.config.js
const withInferno = require('next-inferno')
const withTypescript = require('@zeit/next-typescript')

module.exports = withInferno(withTypescript())

3. Create 'tsconfig.json' file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "removeComments": false,
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}

4. Write code 🔥

Check on compile

By default, next's TypeScript plugin only transpiles your code without type checks. It means that you can see type errors only in your IDE or code editor (for example VS Code can do it out of the box).

If you want to enable typechecks on compile to see type errors in terminal or browser, make the following changes in 'next.config.js':

// next.config.js
const withInferno = require('next-inferno')
const withTypescript = require('@zeit/next-typescript')

module.exports = withInferno(withTypescript({
  webpack(config, options) {
    return config
  },
  typescriptLoaderOptions: {
    transpileOnly: false
  }
}))

Alternatively to decrease compile time you can use fork-ts-checker-webpack-plugin to fork type checks in a separate process:

// next.config.js
const withInferno = require("next-inferno")
const withTypescript = require("@zeit/next-typescript")
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = withInferno(withTypescript({
  webpack(config, options) {
    if (options.isServer) config.plugins.push(new ForkTsCheckerWebpackPlugin())
    return config
  }
}))