├── README.md
├── package.json
├── pages
    ├── about.js
    └── index.js
└── server.js


/README.md:
--------------------------------------------------------------------------------
 1 | # Custom Express HTTP/2 Server example
 2 | 
 3 | ## How to use
 4 | 
 5 | ### Download manually
 6 | 
 7 | Download the example:
 8 | 
 9 | ```bash
10 | git clone https://github.com/typedef42/nextjs-express-http2-example.git
11 | cd nextjs-express-http2-example
12 | ```
13 | 
14 | Create the public and private keys:
15 | 
16 | ```bash
17 | openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' \
18 |   -keyout privateKey.key -out certificate.cert
19 | ```
20 | 
21 | Install it and run:
22 | 
23 | ```bash
24 | npm install
25 | npm run dev
26 | # or
27 | yarn
28 | yarn dev
29 | ```
30 | 
31 | ## The idea behind the example
32 | 
33 | Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
34 | 
35 | Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. In this case we are using a HTTP/2 server with the spdy package. Beside its name, the package spdy provides support for both http/2 (h2) and spdy (2,3,3.1), and allow to be combined with express to build a custom router on top of Next and serve content through HTTP/2.
36 | 
37 | The example shows a server that render and serves two single pages when their corresponding route are requested. You can obviously use more advanced express routing strategy depending on your needs.
38 | 
39 | Since no major browser support HTTP/2 without encryption, don't forget to generate self-signed local certificate for development purpose.
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-express-http2-example",
 3 |   "author": "Yannis Torres",
 4 |   "license": "MIT",
 5 |   "version": "1.0.0",
 6 |   "scripts": {
 7 |     "dev": "node server.js",
 8 |     "build": "next build",
 9 |     "release": "cross-env NODE_ENV=production next build",
10 |     "start": "cross-env NODE_ENV=production node server.js"
11 |   },
12 |   "dependencies": {
13 |     "compression": "^1.7.4",
14 |     "express": "^4.17.1",
15 |     "next": "latest",
16 |     "react": "^16.7.0",
17 |     "react-dom": "^16.7.0",
18 |     "spdy": "^4.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "cross-env": "^5.2.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | export default () => (
 3 |   <div>
 4 |     <h3>This is the /about page. </h3>
 5 |     <Link href='/'>
 6 |       <a> &larr; Back home</a>
 7 |     </Link>
 8 |   </div>
 9 | )
10 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | export default () => (
 3 |   <div>
 4 |     <h3>Hello World.</h3>
 5 |     <Link href='/about'>
 6 |       <a>About</a>
 7 |     </Link>
 8 |   </div>
 9 | )
10 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const next = require('next')
 2 | const express = require('express')
 3 | const compression = require('compression')
 4 | const spdy = require('spdy')
 5 | const path = require('path')
 6 | const fs = require('fs')
 7 | 
 8 | const port = parseInt(process.env.PORT, 10) || 3000
 9 | const dev = process.env.NODE_ENV !== 'production'
10 | 
11 | const app = next({ dev })
12 | const handle = app.getRequestHandler()
13 | 
14 | // create your own certificate with openssl for development
15 | const options = {
16 |   key: fs.readFileSync(path.join(__dirname, '/privateKey.key')),
17 |   cert: fs.readFileSync(path.join(__dirname, '/certificate.crt'))
18 | }
19 | 
20 | const shouldCompress = (req, res) => {
21 |   // don't compress responses asking explicitly not
22 |   if (req.headers['x-no-compression']) {
23 |     return false
24 |   }
25 | 
26 |   // use compression filter function
27 |   return compression.filter(req, res)
28 | }
29 | 
30 | app.prepare().then(() => {
31 |   // create the express app
32 |   const expressApp = express()
33 | 
34 |   // set up compression in express
35 |   expressApp.use(compression({ filter: shouldCompress }))
36 | 
37 |   // declaring routes for our pages
38 |   expressApp.get('/', (req, res) => {
39 |     return app.render(req, res, '/', req.query)
40 |   })
41 |   expressApp.get('/about', (req, res) => {
42 |     return app.render(req, res, '/about', req.query)
43 |   })
44 | 
45 |   // fallback all request to next request handler
46 |   expressApp.all('*', (req, res) => {
47 |     return handle(req, res)
48 |   })
49 | 
50 |   // start the HTTP/2 server with express
51 |   spdy.createServer(options, expressApp).listen(port, error => {
52 |     if (error) {
53 |       console.error(error)
54 |       return process.exit(1)
55 |     } else {
56 |       console.log(`HTTP/2 server listening on port: ${port}`)
57 |     }
58 |   })
59 | })
60 | 


--------------------------------------------------------------------------------