Link

Maintainability Test Coverage Locize Latest version Locize Production version


Introduction to NRN

Next Right Now (NRN) is meant to help you build production-grade projects using the Next.js framework.

NRN is maintained with several purposes in mind:

  • To be used as a boilerplate to quickly deploy a new project.
    • It is used in production by ourselves, and thus covers enterprise-grade features and needs.
    • It has been used to build production-grade websites within 2h time during a French COVID-19 hackathon. (March 2020)
    • It has been used to build NRN Admin
  • To be used as an educational resource, meant to be used as a learning/teaching resource, even if you don’t use it as a boilerplate.
  • Provide various boilerplate presets, to get started with the preset that matches the closest your needs.
  • To be flexible and allow for extensive customisation, based on your own needs and use-cases.

Don’t hesitate to share your opinion about your “getting started” experience and your feedback about opt-in 3rd parties!


Overview

This boilerplate is meant for developers with basic skills in React, who are looking for a way of building production-grade web applications. We took very special care regarding the Developer Experience, because it’s very important to us, as developers, to help us build quality software.

Knowing Next.js, TypeScript and Vercel (formerly Zeit) vendor will be a huge help, because they are the pillars of this boilerplate.

We carefully explain installation and proper setup, but it’s your responsibility to go deeper and actually learn how they work.

Tip: Bookmark this React Cheat Sheet if you’re new to React

Tip: Bookmark this TypeScript Cheat Sheet if you’re new to TypeScript

Tip: Bookmark this Next.js Cheat Sheet if you’re new to Next

Boilerplate presets, opt-in features and 3rd party vendors

This boilerplate provides multiple presets, which provide different features that rely on different vendors. Don’t hesitate to check out our “What’s a preset?” section for more information.

Each preset provides different “built-in” features and utilities. Therefore, you probably want to get an overview of all the available presets to decide which one best fit your needs.

If you wish to learn more about this design, see our RFC specifications.


Benefits

As mentioned above, each preset has its own set of built-in features. Even though, there is a common base of features that are available on all presets:

Here is an overview of all the features included in this boilerplate:

Common features (available in all presets):

  • Stages (development, staging, production) workflow
  • TypeScript advanced support
  • Various rendering capabilities, which allow for hybrid configuration
  • React hooks over HOC (functional components over classes)
  • Testing advanced support
    • TS-friendly (thanks to ts-jest)
    • End-to-end (E2E) automated tests (thanks to Cypress and Github Actions)
    • Other tests, such as unit tests, etc. (thanks to Jest, Jest extended)
  • Powerful CSS-in-JS styles, SSR & CSR friendly, JSX-friendly, styled-component friendly (thanks to Emotion)
  • Font support (SSR/CSR friendly, no FOUT effect) (thanks to WebFontLoader)
  • Integrated CI/CD pipeline, automated deployments to preview domains and production domains (thanks to the Vercel, GitHub Actions)
    • Including a dedicated “per-deployment domain”, for fast feedback loop and testing means, in an online environment (staging)
    • Including a dedicated “per-branch domain”, for fast feedback loop and testing means, in an online environment with a url which is automatically updated as new pushed commits are being deployed (staging)
  • Built-in utilities
    • Convert SVG to TSX components (thanks to SVGR)
    • Font Awesome icons as react components, with SSR support (thanks to Font Awesome)
    • Bootstrap support (thanks to Reactstrap)
    • Node debug mode for the server side
    • NPM security audit (script)
    • NPM developer-friendly outdated packages (script)
    • Proper handling of sensitive information (e.g: token) using Vercel secrets
  • Documented usage of NRN own dependencies
  • Jekyll site for online documentation using Github Pages

Per-preset features (only some presets have those built-in):

  • B2B Multi Single-Tenancy (MST)
    • Supports configuration, deployment, testing, monitoring of multiple customers through the same project (identical code base, monorepo design)
    • Most projects do not need this capability, but it’s useful for SaaS B2B businesses with large/key customer accounts who want to replicate the underlying infrastructure per-customer
  • GraphQL support (thanks to Apollo)
    • GraphCMS advanced support, which is a three-in-one GraphQL API + database + CMS, fully hosted (thanks to GraphCMS1)
    • GraphQL schema available in the developer environment (thanks to GraphQL Config)
  • Internationalisation (i18n) advanced support (SSR + CSR friendly) (thanks to react-i18next)
  • Strong observability of the system (monitoring) and push-notification on your own messaging channel (e.g: Slack) when things go wrong (thanks to Sentry1)
  • Fine-grained frontend analytics, react-friendly, flexible, SPA-friendly (thanks to Amplitude12)
  • advanced support: This means we took very special care to support this, and that it’s not as simple as one might think.
  • 1: Third parties that provide a free plan that is sufficient for a “simple” application, but make sure to check that their pricing fits you.
  • 2: Beware, there is a huge gap between free and paid plans cost.
  • 3: Does not provide a free plan, only a free trial.

Want more?

  • Have questions? Check out the FAQ! Open a github issue if you don’t find your answer.
  • Check out our roadmap to see what we plan to release next!
  • Check out our terminology to make sure you correctly understand all the acronyms we used :wink: