next-pre-compression

Next.js plugin to compress static assets at build time and serve them instead of having to compress on-the-fly.

Installation

$ npm i --save @moxy/next-pre-compression

Usage

next.config.js

Setup the plugin in the next.config.js file:

const withPreCompression = require('@moxy/next-pre-compression');

module.exports = withPreCompression({ ...nextConfig });

This plugin will automatically disable itself if you disable compress in your next.config.js.

Express

Express middleware used to serve the previously compressed files, by leveraging express-static-gzip.

First, you need to setup a custom express server. Then, simply add the middleware like so:

// server.js

const express = require('express');
const next = require('next');
const preCompression = require('@moxy/next-pre-compression/express-middleware');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    const server = express();

    if (!dev) {
        server.use(preCompression(app, {
            maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
        }));
    }

    server.get('*', (req, res) => handle(req, res));

    server.listen(port, host, (err) => {
        if (err) { throw err; }

        console.log(`> Ready on http://localhost:${port}`);
    });
})
.catch((err) => {
    setImmediate(() => { throw err; });
});

⚠️ You must not use the middleware in dev as it's not supported, see tkoenig89/express-static-gzip#22.

⚠️ A custom assetPrefix that references an absolute URI is not yet supported (e.g.: https://cdn.my-site.com), see moxystudio/next-pre-compression#8.

Available options

All options from serve-static are also available.

⚠️ You can't enable the index option as it's always set to false, due to a strange behavior of express-static-gzip that modifies the request path without restoring it, see: https://github.com/tkoenig89/express-static-gzip/blob/94767f79e861a3901e8ebba31b084abc4986817f/index.js#L28

Default options

{
    maxAge: 365 * 24 * 60 * 60 * 1000, // 1 year
    immutable: true,
    etag: false,
    index: false // Can't be changed
}

Tests

Any parameter passed to the test command, is passed down to Jest.

$ npm test
$ npm test -- --watch # during development

After running the tests, a coverage folder will be created containing the test coverage info.

License

Released under the MIT License.