Krabs is an enterprise-ready Express.js middleware for serving hundreds of different websites from a single Next.js instance.

Installation

Krabs is available on npm and can be installed as follows:

yarn add krabs

# or

npm install --save krabs

Roadmap

Feature	Status
Multiple domains support	✅ Released
Regex-based domains	✅ Released
Dynamic paths	✅ Released
Force ISR reload	💡 In roadmap
Tenant props injection	💡 In roadmap

Overall status: 🎉 production ready

Things to know

Krabs forces you to use a custom server. Therefore, deployments to Vercel are not supported.
_app and _document pages are common to every website.

Getting Started

Let's say that we want to support three different websites with just one Next.js instance, and serve them using just one Express.js server. Write the following configuration inside a .krabs.js file inside of the root of your project:

module.exports = {
  tenants: [
    {
      name: 'website-1',
      domains: [
        {
          dev: /dev\.[a-z]*\.local\.website-1\.com/, // Regex supported!
          stage: 'stage.website-1.com',
          prod: 'website-1.com',
        },
      ],
    },
    {
      name: 'website-2',
      domains: [
        {
          dev: 'local.website-2.com',
          stage: 'stage.website-2.com',
          prod: /[\w|\d|-|_]+\.website-2.com/, // Regex supported!
        },
      ],
    },
  ],
};

Create an index.js file and fill it with the following content:

const express = require('express');
const next = require('next');
const krabs = require('krabs').default;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

async function main() {
  try {
    await app.prepare();

    const handle = app.getRequestHandler();
    const server = express();

    server
      .get('*', (req, res) => krabs(req, res, handle, app))
      .listen(3000, () => console.log('server ready'));

  } catch (err) {
    console.log(err.stack);
  }
}

main();

Inside of our .krabs.js file we configured two tenants with two different name properties: website-1 and website-2. So now let's create two new folders inside of the Next.js' default pages/ directory:

pages/
  - _app.js
  - website-1
  - website-2

Feel free to add any page you want inside both of these folders, as they will be treated as they were the default Next.js' pages/ folder. Let's add the following content to pages/website-1/about.js:

function About() {
  return <div> About website 1 </div>
}

export default About;

and the following code to pages/website-2/about.js:

function About() {
  return <div> This is website 2 </div>
}

export default About;

Map local.website-1.com and local.website-2.com in your hosts file, then boot the server by typing:

node index.js

going to http://dev.pizza.local.website-1.com/about and http://local.website-2.com/about, you will see the components above rendered by the same Next.js instance!

Documentation

You can find the full documentation (with real code examples) on GitBook!

License

Krabs is free as freedom and licensed under the GPL V3 license.