Add support for customizing compress encodings

README.md

@@ -519,6 +519,42 @@ 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` and `gzip` encodings.
+
+```js
+var fs = require('fs')
+var zlib = require('zlib')
+var iltorb = require('iltorb')
+
+module.exports = {
+  // Return a stream of compressed file for each of the encodings you want
+  //
+  // The first listed encoding has the higher priority over others.
+  //  In this case, it'll try to serve the `br` version if the browser supports it.
+  //  Otherwise, it'll server gzipped version.
+  compress: {
+    br: function(filePath) {
+      return fs.createReadStream(filePath).pipe(iltorb.compressStream())
+    },
+    gzip: function(filePath) {
+      return fs.createReadStream(filePath).pipe(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,19 @@
+var fs = require('fs')
+var zlib = require('zlib')
+var iltorb = require('iltorb')
+
+module.exports = {
+  // Return a stream of compressed file for each of the encodings you want
+  //
+  // The first listed encoding has the higher priority over others.
+  //  In this case, it'll try to serve the `br` version if the browser supports it.
+  //  Otherwise, it'll server gzipped version.
+  compress: {
+    br: function (filePath) {
+      return fs.createReadStream(filePath).pipe(iltorb.compressStream())
+    },
+    gzip: function (filePath) {
+      return fs.createReadStream(filePath).pipe(zlib.createGzip())
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "name": "shared-modules",
+  "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/gzip.js

@@ -2,9 +2,11 @@ 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 gzipAssets (dir) {
   const nextDir = path.resolve(dir, '.next')
+  const config = getConfig(dir)
 
   const coreAssets = [
     path.join(nextDir, 'commons.js'),
@@ -22,17 +24,23 @@ export default async function gzipAssets (dir) {
     const currentChunk = allAssets.splice(0, 10)
     if (currentChunk.length === 0) break
 
-    await Promise.all(currentChunk.map(gzip))
+    await Promise.all(currentChunk.map((f) => compress(config, f)))
   }
 }
 
-export function gzip (filePath) {
-  const input = fs.createReadStream(filePath)
-  const output = fs.createWriteStream(`${filePath}.gz`)
+export function compress (config, filePath) {
+  const compressionMap = config.compress || {
+    gzip: (f) => fs.createReadStream(f).pipe(zlib.createGzip())
+  }
 
-  return new Promise((resolve, reject) => {
-    const stream = input.pipe(zlib.createGzip()).pipe(output)
-    stream.on('error', reject)
-    stream.on('finish', resolve)
+  const promises = Object.keys(compressionMap).map((type) => {
+    return new Promise((resolve, reject) => {
+      const output = fs.createWriteStream(`${filePath}.${type}`)
+      const stream = compressionMap[type](filePath).pipe(output)
+      stream.on('error', reject)
+      stream.on('finish', resolve)
+    })
   })
+
+  return Promise.all(promises)
 }

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,15 +141,17 @@ 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')
+    const gzipPath = `${path}.${encoding}`
+    res.setHeader('Content-Encoding', encoding)
     await serveStatic(req, res, gzipPath)
   } catch (ex) {
     if (ex.code === 'ENOENT') {