Integrating Next.js

In this recipe we will integrate next.js - The popular React framework that comes with a simple SSR solution built in.

Warning: This recipe is highly unstable as long as the following issues within next.js are not properly solved, integrate it at your own risk!

• Webpack config does not get loaded when specifying a custom dir in CLI commands
• Make minify(uglify) opt-in or use a substitute
• The build assumes that all js files under /pages is a page
• Add configuration to specify the name of the pages directory
• Add support to transpile modules inside node_modules

Table of Contents

• Installation of dependencies
• Adding the next scripts
• Adding the next config
• Adjusting the babel config
• Cleaning up the scaffold

Installation of dependencies

Since next.js is a framework, we luckily don't need to install a lot of new dependencies, change into the main application package, e.g. packages/my-fancy-ui, and execute the following command

yarn add next uglifyjs-webpack-plugin

Adding the next scripts

Afterwards we add the lifecycle scripts into the same package, replace the existing ones with the ones provided by next.js, e.g.

{
  "scripts": {
    "dev": "next src",
    "build": "next build src",
    "start": "next start src"
  }
}

Adding the next config

Currently next.js crashes if you use newer features of EcmaScript, therefore we need to add a next.config.js in the main application package and override the internally used UglifyJsPlugin with a newer version.

// next.config.js
const Uglify = require('uglifyjs-webpack-plugin');

module.exports = {
  webpack: (config, { buildId, dev }) => {
    config.plugins = config.plugins.filter(
        (plugin) => (plugin.constructor.name !== 'UglifyJsPlugin')
    )

    config.plugins.push(
      new Uglify()
    );

    return config;
  }
}

Cleaning up the scaffold

Since next.js comes with it's own server and rendering, we can safely execute the following commands from the root of the scaffold, as always please replace the my-fancy-ui with your scaffolds name.

# Remove the old entry points since next.js has entries placed in pages/
rm packages/my-fancy-ui/src/app.* packages/my-fancy-ui/src/index.*
# Remove the hypernova rendering microservice
rm -rf packages/my-fancy-ui-hypernova
# Remove the regular http web server
rm -rf packages/my-fancy-ui-server