Motivations

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 Unly, 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 Unly Solidarity, a fully static website meant to help French students find various solutions regarding the COVID-19 pandemic.
- It has been used to build NRN Admin (Now unmaintained/discontinued)
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 presets, to help you getting 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!

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.

Presets, opt-in features and 3rd party vendors

Next Right Now 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.

Want to know why we decided to provide presets? 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)
TypeScript advanced support
Storybook static site, to host the documentation of your React components
- Hosted on Vercel (using a dedicated project)
- Automatically kept up-to-date (thanks to GitHub Actions)
Various rendering capabilities, which allow for hybrid configuration
- Next.js allow per-page rendering configuration, meaning you can build hybrid SSG/SSR apps
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), with TS support
- 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)
Support for Next.js SSG Preview Mode for the whole site, automatically enabled in staging, disabled in production by default.
Integrated CI/CD pipeline (thanks to GitHub Actions), which provides:
- Automated deployments to preview domains and production domains (thanks to Vercel)
  - 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)
- Webhook endpoint invoked once a Vercel deployment has been deployed (since December 2020)
  - At Unly, we use it to update the Customer data stored in Airtable. Then, this information is useful to our Customer Success team to know what version each of our customers uses and whether they’re up-to-date between staging and production!
- Automated GitHub tags and releases (since December 2020)
  - All changes landing into a non-preset branch are automatically tagged and released as pre-release (the pre-release points to the latest commit on the branch)
  - All changes landing into a preset branch are automatically tagged and released
Built-in API endpoints
- An /api/status endpoint to showcases some environment variables that are built-in and ready to use (Git metadata (SHA, branch, tag), deployment date, AWS metadata (region, node version, memory) etc.)
  - At Unly, our Customer Success team use it to manually check some metadata about a deployment.
- An /api/startVercelDeployment endpoint to showcase how you could trigger a Vercel deployment from a 3rd party tool (CMS, Back-Office, etc.)
  - At Unly, our Customer Success team use it to update our customer platforms through a Stacker user interface, simply by clicking on a button!
- An /api/preview endpoint to enable/disable Next.js SSG Preview Mode.
Built-in utilities
- 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
- Proper handling of sensitive information (e.g: token) using Vercel secrets
- Cookie consent popup (thanks to cookieconsent)
Built-in scripts (in package.json)
- Convert SVG to TSX components (thanks to SVGR)
- Tunnel to make your local development accessible online (thanks to ngrok)
- Bundle analysis, to know which dependencies take the most space in your JS bundle
- Deploy from your local machine
- Run linter (thanks to ESLint)
- Run tests by group (thanks jest-runner-groups)
- Various Next.js CodeMods
- NPM security audit
- NPM developer-friendly outdated packages
Documented usage of NRN own dependencies
Jekyll site for online documentation using Github Pages
- Check out jekyll-auth plugin if you need to release a non-public version
- We use just-the-docs Jekyll theme

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, without duplicating the source code itself
GraphQL support (thanks to Apollo)
- GraphCMS advanced support, which is a three-in-one GraphQL API + database + CMS, fully hosted (thanks to GraphCMS¹)
- GraphQL schema available in the developer environment (thanks to GraphQL Config)
Internationalisation (i18n) advanced support (SSR + CSR friendly) (thanks to react-i18next)
- I18n of the database (AKA “Dynamic I18n“) (thanks to GraphCMS¹)
  - Automated fallback language, through HTTP headers
- I18n of the project (AKA “Static I18n“) (thanks to Locize³)
  - Automated fallback language
  - In-context editor
  - Auto-add new i18n keys (to Locize) with default translation when working locally
Strong observability of the system (monitoring) and push-notification on your own messaging channel (e.g: Slack) when things go wrong (thanks to Sentry¹)
Fine-grained frontend analytics, react-friendly, flexible, SPA-friendly (thanks to Amplitude¹²)

 
advanced support: This means we took very special care to support this, and that it’s not as simple as one might think.

Third parties that provide a free plan that is sufficient for a “simple” application, but make sure to check that their pricing fits you.

Beware, there is a huge gap between free and paid plans cost.

Does not provide a free plan, only a free trial.

Get me started!

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
Subscribe to the CHANGELOG discussion to be notified when new releases are made, and participate in the discussion about what has changed!