Add support for customizing compress encodings

README.md

@@ -522,6 +522,43 @@ Here's an example `.babelrc` file:
 }
 ```
 
+### Customizing compression encodings
+
+<p><details>
+  <summary><b>Examples</b></summary>
+  <ul><li><a href="./examples/with-custom-compress-encodings">With custom compress encodings</a></li></ul>
+</details></p>
+
+By default Next.js will compress your core JavaScript assets for `gzip` encoding while it builds(with `next build`) the app.
+If you need to add support for more encoding, you could simply add it via `next.config.js`.
+
+Here's an example config which adds supports for both [`br`](https://en.wikipedia.org/wiki/Brotli) and `gzip` encodings.
+
+```js
+var zlib = require('zlib')
+var iltorb = require('iltorb')
+
+module.exports = {
+  // Returns a map of compression streams for the types of encodings you want to support
+  // Here's a list of common encoding types: https://goo.gl/ke7zOK
+
+  // The first listed encoding has the higher priority over others.
+  //  In this case, first it'll try to serve the `br` version if the browser supports it.
+  //  Otherwise, it'll serve the gzipped version.
+  compress: {
+    br: function () {
+      return iltorb.compressStream()
+    },
+    gzip: function () {
+      // You can also return a promise which resolve a compression stream
+      return new Promise(function (resolve) {
+        resolve(zlib.createGzip())
+      })
+    }
+  }
+}
+```
+
 ## Production deployment
 
 To deploy, instead of running `next`, you probably want to build ahead of time. Therefore, building and starting are separate commands:

examples/with-custom-compress-encodings/README.md

@@ -0,0 +1,29 @@
+# Example app with custom compress encodings
+
+## How to use
+
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-custom-compress-encodings
+cd with-custom-compress-encodings
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+By default, Next.js compile your assets with `gzip` compression. But if you want to add support more encodings like `br` or `deflate` you can do it very easily.
+
+This example shows how to add support for `br` and `gzip` compress encodings. For that it uses a config in `next.config.js`.

examples/with-custom-compress-encodings/components/Counter.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+let count = 0
+
+export default class Counter extends React.Component {
+  add () {
+    count += 1
+    this.forceUpdate()
+  }
+
+  render () {
+    return (
+      <div>
+        <p>Count is: {count}</p>
+        <button onClick={() => this.add()}>Add</button>
+      </div>
+    )
+  }
+}

examples/with-custom-compress-encodings/components/Header.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <Link href='/'>
+      <a style={styles.a} >Home</a>
+    </Link>
+
+    <Link href='/about'>
+      <a style={styles.a} >About</a>
+    </Link>
+  </div>
+)
+
+const styles = {
+  a: {
+    marginRight: 10
+  }
+}

examples/with-custom-compress-encodings/next.config.js

@@ -0,0 +1,22 @@
+var zlib = require('zlib')
+var iltorb = require('iltorb')
+
+module.exports = {
+  // Returns a map of compression streams for the types of encodings you want to support
+  // Here's a list of common encoding types: https://goo.gl/ke7zOK
+
+  // The first listed encoding has the higher priority over others.
+  //  In this case, first it'll try to serve the `br` version if the browser supports it.
+  //  Otherwise, it'll serve the gzipped version.
+  compress: {
+    br: function () {
+      return iltorb.compressStream()
+    },
+    gzip: function () {
+      // You can also return a promise which resolve a compression stream
+      return new Promise(function (resolve) {
+        resolve(zlib.createGzip())
+      })
+    }
+  }
+}

examples/with-custom-compress-encodings/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-custom-compress-encodings",
+  "version": "1.0.0",
+  "description": "This example features:",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "iltorb": "^1.0.13",
+    "next": "^2.0.0-beta"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/with-custom-compress-encodings/pages/about.js

@@ -0,0 +1,10 @@
+import Header from '../components/Header'
+import Counter from '../components/Counter'
+
+export default () => (
+  <div>
+    <Header />
+    <p>This is the about page.</p>
+    <Counter />
+  </div>
+)

examples/with-custom-compress-encodings/pages/index.js

@@ -0,0 +1,10 @@
+import Header from '../components/Header'
+import Counter from '../components/Counter'
+
+export default () => (
+  <div>
+    <Header />
+    <p>HOME PAGE is here!</p>
+    <Counter />
+  </div>
+)

server/build/compress.js

@@ -0,0 +1,57 @@
+import fs from 'fs'
+import path from 'path'
+import zlib from 'zlib'
+import glob from 'glob-promise'
+import getConfig from '../config'
+
+export default async function compressAssets (dir) {
+  const nextDir = path.resolve(dir, '.next')
+  const config = getConfig(dir)
+
+  const coreAssets = [
+    path.join(nextDir, 'commons.js'),
+    path.join(nextDir, 'main.js')
+  ]
+  const pages = await glob('bundles/pages/**/*.json', { cwd: nextDir })
+
+  const allAssets = [
+    ...coreAssets,
+    ...pages.map(page => path.join(nextDir, page))
+  ]
+
+  while (true) {
+    // compress only 10 assets in parallel at a time.
+    const currentChunk = allAssets.splice(0, 10)
+    if (currentChunk.length === 0) break
+
+    await Promise.all(currentChunk.map((f) => compress(config, f)))
+  }
+}
+
+export function compress (config, filePath) {
+  const compressionMap = config.compress || {
+    gzip: () => zlib.createGzip()
+  }
+
+  const promises = Object.keys(compressionMap).map((type) => {
+    return new Promise(async (resolve, reject) => {
+      const input = fs.createReadStream(filePath)
+      const output = fs.createWriteStream(`${filePath}.${type}`)
+      // We accept stream resolved via a promise or not
+      const compression = await compressionMap[type](filePath)
+
+      // We need to handle errors like this.
+      // See: http://stackoverflow.com/a/22389498
+      input.on('error', reject)
+      compression.on('error', reject)
+
+      const stream = input.pipe(compression).pipe(output)
+
+      // Handle the final stream
+      stream.on('error', reject)
+      stream.on('finish', resolve)
+    })
+  })
+
+  return Promise.all(promises)
+}

server/build/index.js

@@ -1,6 +1,6 @@
 import webpack from './webpack'
 import clean from './clean'
-import gzipAssets from './gzip'
+import compressAssets from './compress'
 
 export default async function build (dir) {
   const [compiler] = await Promise.all([
@@ -9,7 +9,7 @@ export default async function build (dir) {
   ])
 
   await runCompiler(compiler)
-  await gzipAssets(dir)
+  await compressAssets(dir)
 }
 
 function runCompiler (compiler) {

server/index.js

@@ -8,7 +8,7 @@ import {
   renderErrorJSON,
   sendHTML,
   serveStatic,
-  serveStaticWithGzip
+  serveStaticWithCompression
 } from './render'
 import Router from './router'
 import HotReloader from './hot-reloader'
@@ -22,11 +22,17 @@ export default class Server {
     this.dir = resolve(dir)
     this.dev = dev
     this.quiet = quiet
-    this.renderOpts = { dir: this.dir, dev, staticMarkup }
     this.router = new Router()
     this.hotReloader = dev ? new HotReloader(this.dir, { quiet }) : null
     this.http = null
     this.config = getConfig(this.dir)
+    this.supportedEncodings = Object.keys(this.config.compress || { gzip: true })
+    this.renderOpts = {
+      dir: this.dir,
+      supportedEncodings: this.supportedEncodings,
+      dev,
+      staticMarkup
+    }
 
     this.defineRoutes()
   }
@@ -62,12 +68,12 @@ export default class Server {
 
     this.router.get('/_next/main.js', async (req, res, params) => {
       const p = join(this.dir, '.next/main.js')
-      await serveStaticWithGzip(req, res, p)
+      await serveStaticWithCompression(req, res, p, this.supportedEncodings)
     })
 
     this.router.get('/_next/commons.js', async (req, res, params) => {
       const p = join(this.dir, '.next/commons.js')
-      await serveStaticWithGzip(req, res, p)
+      await serveStaticWithCompression(req, res, p, this.supportedEncodings)
     })
 
     this.router.get('/_next/pages/:path*', async (req, res, params) => {
@@ -213,9 +219,9 @@ export default class Server {
     return renderErrorJSON(err, req, res, this.renderOpts)
   }
 
-  async serveStaticWithGzip (req, res, path) {
+  async serveStaticWithCompression (req, res, path) {
     this._serveStatic(req, res, () => {
-      return serveStaticWithGzip(req, res, path)
+      return serveStaticWithCompression(req, res, path, this.supportedEncodings)
     })
   }
 

server/render.js

@@ -96,9 +96,9 @@ async function doRender (req, res, pathname, query, {
   return '<!DOCTYPE html>' + renderToStaticMarkup(doc)
 }
 
-export async function renderJSON (req, res, page, { dir = process.cwd() } = {}) {
+export async function renderJSON (req, res, page, { dir = process.cwd(), supportedEncodings } = {}) {
   const pagePath = await resolvePath(join(dir, '.next', 'bundles', 'pages', page))
-  return serveStaticWithGzip(req, res, pagePath)
+  return serveStaticWithCompression(req, res, pagePath, supportedEncodings)
 }
 
 export async function renderErrorJSON (err, req, res, { dir = process.cwd(), dev = false } = {}) {
@@ -141,16 +141,18 @@ function errorToJSON (err) {
   return json
 }
 
-export async function serveStaticWithGzip (req, res, path) {
-  const encoding = accepts(req).encodings(['gzip'])
-  if (encoding !== 'gzip') {
+export async function serveStaticWithCompression (req, res, path, supportedEncodings) {
+  const acceptingEncodings = accepts(req).encodings()
+  const encoding = supportedEncodings.find((e) => acceptingEncodings.indexOf(e) >= 0)
+
+  if (!encoding) {
     return serveStatic(req, res, path)
   }
 
   try {
-    const gzipPath = `${path}.gz`
-    res.setHeader('Content-Encoding', 'gzip')
-    await serveStatic(req, res, gzipPath)
+    const compressedPath = `${path}.${encoding}`
+    res.setHeader('Content-Encoding', encoding)
+    await serveStatic(req, res, compressedPath)
   } catch (ex) {
     if (ex.code === 'ENOENT') {
       res.removeHeader('Content-Encoding')