A starting point for production ready Next.js reason-react apps.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.ebextensions initial Oct 9, 2018
.graphql_ppx_cache initial signin Nov 20, 2018
.storybook storybook Nov 2, 2018
__mocks__ tests run Dec 19, 2018
__tests__ react context example Jan 2, 2019
apminsightdata RUM and APM with next-rum and site24x7 Oct 17, 2018
assets unused css Nov 6, 2018
bindings react context example Jan 2, 2019
components maintenance Dec 27, 2018
pages hover link example should be "withData" Jan 2, 2019
scripts switch from i18next to react-intl Nov 6, 2018
static skip waiting Nov 10, 2018
stories storybook Nov 2, 2018
util react context example Jan 2, 2019
.babelrc getInitialProps example Jan 2, 2019
.env sentry method updated Nov 30, 2018
.eslintignore initial Oct 9, 2018
.eslintrc initial Oct 9, 2018
.flowconfig initial Oct 9, 2018
.gitignore initial signin Nov 20, 2018
.prettierrc initial Oct 9, 2018
Dockerfileold initial Oct 9, 2018
LICENSE Initial commit Oct 8, 2018
README.md deploy example to now Jan 2, 2019
beanstalk-nginx-update.txt initial Oct 9, 2018
bsconfig.json getInitialProps example Jan 2, 2019
buildspec.yml unused css Nov 6, 2018
codebuild.sh initial Oct 9, 2018
codebuildPrep.sh initial Oct 9, 2018
graphql_schema.json initial signin Nov 20, 2018
jest.config.js tests run Dec 19, 2018
jest.setup.js tests run Dec 19, 2018
lambda.js i18next Oct 31, 2018
next-seo.config.js i18next Oct 31, 2018
next.config.js maintenance Dec 27, 2018
now.json deploy example to now Jan 2, 2019
package-lock.json getInitialProps example Jan 2, 2019
package.json deploy example to now Jan 2, 2019
rollup.config.js initial Oct 9, 2018
server.js deploy example to now Jan 2, 2019
serverless.yml initial Oct 9, 2018

README.md

Next.js reason-react apollo production ready boilerplate

https://next-reason-boilerplate.now.sh/

This project is an attempt to provide a production ready starting point for your cutting edge project. Feel free to propose anything in tickets or push anything you think would benefit the community.

Setup:

  • devcert will ask for a certificate password to enable https in local dev mode. Run the first npm run dev in a normal terminal...editor like Intellij may hide the one time password prompt from you.
  • you need to run this for reason-apollo typesafe query checks: yarn send-introspection-query https://api.graph.cool/simple/v1/cj5geu3slxl7t0127y8sity9r

Install it and run:

npm install
npm run bsb-watch
(in another tab) npm run dev

Build and run:

npm run build
npm run start

(after running production build locally, make sure to unregister service worker in chrome dev tools)

Features:

  • Server Side Rendering - Next.js provides superior performance over CRA https://medium.com/@steve_11957/nextjs-for-dummies-e7fa18719fe1
  • Reason-React - ultimate type safety, native reducers, etc. (https://www.imaginarycloud.com/blog/reasonml-react-as-first-intended/)
  • Apollo - https://www.robinwieruch.de/why-apollo-advantages-disadvantages-alternatives/
    • Hermes cache (higher performance than default for avg objects with "id" attribute)
    • offline retry with apollo-link-retry
    • auth sample - patterned from nextjs/examples/with-apollo-auth
  • Ant Design - designed for react. Note it is so huge we really need rollup (or equivalent) working
  • Font-Awesome - (no flicker) https://spectrum.chat/thread/56b0396d-8b7d-447d-9f46-24ba6192936e
  • offline support - next-offline. See server.js manifest prefix with assetPrefix hack
  • Sentry - quite a mess but functional: https://github.com/zeit/next.js/pull/5727
  • Source Maps - next-source-maps (production for sentry, see server.js)
  • prefetch next page data on link hover (https://shaleenjain.com/blog/nextjs-apollo-prefetch/)
  • non-critical css loaded async - see loadCSS in _document.js (hacked this version to handle crossorigin)
  • localization - react-intl (recommended for its formatjs feature set and existing reason bindings)
  • polyfill only enabled for browsers that need it - see nomodule and https://polyfill.io/v2
  • modules for building only loading during dev/build. See "phase" in next.config.js
  • cors whitelist - necessary for service-worker preload to cache response correctly (see server.js)
  • desktop/mobile conditional rendering - based on device using react-useragent
  • healthcheck - "express-healthcheck"
  • helmet - basic ssr security best practices enabled in server.js
  • styleguide - npm run storybook (Needed some less fixes in .storybook/webpack.config.js)
  • robots.txt - see server.js
  • SEO - see next-seo for metadata management (replaces react-helmet-async popular in CRA)
  • multicore support - see PM2 and "start:multicore" in package.json
  • optimal distribution size - using repack-zip-alt to create production zip until rollup is fixed
  • PWA Manifest - originally using next-manifest but found conflict with next-offline. See static/manifest dir for placeholders.
  • RUM (Real User Monitoring) via next-rum (see _app.js) or site24x7 (see end of _document.js)
  • Node Performance Monitoring via site24x7 (see top of server.js)
  • br compression - you should disable this in server.js if your proxy already supports br (ie cloudflare)
  • bundle analyzer (npm run analyze)
  • paramaterized routes - see server.js (next team members advise against next-routes at scale)
  • purge unused css - see next.config.js for whitelist (you would normally only add components you need)
  • https in dev - using devcert. useful for service worker testing
  • jest testing
  • react context - sample variable in _app.js used in index

What else does every production next.js app need?

Production Prep

  • add .env to your .gitignore and remove from git: git rm -r .env. It is only checked in to give you a starting point.

Deployment suggestions

  • Now (v1)- recommended due to ease of deployments, superior compression (br), auto support for server push with their cdn. The modules used in sample are currently too big to be used in now v2.
  • Beanstalk - config files, sumologic logging. What I personally use right now.
  • Lambda - current module set make dist file too big for aws. Before it was too big, cold starts were an issue even with scheduled warming. Avg response ~150ms vs beanstalk ~40ms (not a big deal for api but not optimal for consumer facing). See this if you want to look more into serverless: https://github.com/skriems/next-material-aws-lambda
  • See https://www.rantoolkit.com/docs/Deployment/ for updates and others

KNOWN ISSUES

Tips for new users (things experienced users may take for granted)

  • npm-check-updates is very helpful for keeping an eye on dependencies (ie "ncu")

TODO:

  • health check hit critical stuff rather than just confirm ssr working (database, cdn, etc)
  • figure out best way to generate site map
  • rollup - waiting on potential Next.js bug (see rollup.config.js for current issue)
  • placeholder favicons for PWA manifest
  • improve desktop/mobile example to switch between antd mobile/desktop rather than just different words

Inspired by: