Express

Both client and server run with Express. You can add any express plugin to the server. The configuration file is in the server/index file. Currently we've added compression and cookies middleware to the express that you can remove them if you like.

Commands

This package comes with 3 main commands:

• dev: Starts the development server.
• start: Starts the production server.
• build: Builds the project for production.

Environment Variables

There is a .env.example file in the root directory. Rename it to .env and define your environment variables there. Then in the code you can use those variables, for example

process.env.YOUR_ENV_VAR

Cookies

We where using localStorage for storing access tokens received from the API. But as you know, localStorage is a browser API and doesn't work in the server. So we added support for reading and writing cookies. For writing cookies we added an express middleware. Writing cookies is as follow:

import React, { Component } from 'react'

export default class MyPage extends Component {
  static getInitialProps({req}) {
    req.universalCookies.set("token", token);
    return {}
  }

  render() {
    ...
  }
}

Reading cookies is as simple as writing them

import React, { Component } from 'react'
import cookies from 'next-cookies'

export default class SomePage extends Component {
  static getInitialProps(ctx) {
    const {token} = cookies(ctx)
    return {token}
  }

  render() {
    const {token} = this.props
    ...
  }
}

Webpack Bundle Analyzer

We've added Webpack Bundle Analyzer in the webpack config in next.config.js. For analyzing server bundle add BUNDLE_ANALYZE=server, for client add BUNDLE_ANALYZE=client and for analyzing both, add BUNDLE_ANALYZE=both before yarn dev or yarn build commands. You can change location of report files in next config file.