Next Right Now Demo

This demo uses the preset v2-mst-aptd-gcms-lcz-sty

What is a preset?  -  See all presets

General documentation about NRN is available at https://unlyed.github.io/next-right-now/.
The role of this demo is to showcase what's built-in within the selected preset only.

Next.js native features

SSR

“Server Side Rendering”

SSR can be used either through getInitialProps or getServerSideProps.

SSG

“Static Site Generation” / “Server-Side Generated”

We also strongly recommend using SSG, whenever possible.
SSG can only be used using getStaticProps, NRN provides a getCommonStaticProps helper to configure common stuff between all SSG-based pages and reduce code duplication.

SSG, using fallback option

“Pre-build only a subset of your pages, then build static pages on-demand”

You should use it if you only want/can pre-generate only part of your static pages at build time, and then build static pages on-demand upon request.
It's very interesting if you've got a ton of pages and want faster builds. This way, you can pre-build only the most used pages of your app, and build other pages on-demand if they ever get requested.

SSG, using revalidate option (BETA)

“Automatically rebuild your pages when they get too old, to serve fresh content statically”

The revalidate option is strongly related to the Incremental Static Regeneration concept.
Basically, it's the ability to regenerate parts of your apps based on your own business rules.
Currently, it only supports a time-based regeneration (similar to TTL), thus when your page is too old, it gets regenerated.

TS

“TypeScript support and helpful tips”

TS is treated as first-class citizen, we do our best to make the TS experience as smooth and simple as possible.
We use TS a lot, and type everything. You could say NRN comes with an advanced TS usage.
This can be overwhelming for TS beginners, even though you shouldn't have anything to configure by yourself, you'll still need to understand the concepts and be aware of the features we use.

We strongly recommend you to take a look at the React TypeScript Cheatsheets, which is amazing for both beginners and experienced TS users.

New to Next.js?

“Step-by-step tutorial for beginners”

NRN is meant to help you, but basic Next.js knowledge will be necessary as we don't focus on the basics here but mostly on the difficult/advanced stuff.

Go to the tutorial.

Catch-all routes

“Optional catch-all dynamic routes for advanced scenarios”

Built-in features

Storybook

“Build your own Design System”

SaaS B2B MST

“Multi Single Tenancy for SaaS B2B businesses who need it”

CI/CD

“Continuous Integrations and Continuous Deployments made free and easy, using Github Actions”

Static i18n

“Content internationalisation using i18next and Locize vendor”

CSS-in-JS

“Styling components with Emotion”

Cookies consent

“Cookies consent using CookieConsent OSS library”

Testing

“Unit tests using Jest and E2E tests using Cypress”

Icons

“Icons library using Font-Awesome”

CSS Animations

“Animations using Animate.css”

UI components library

“React components using Reactstrap and Bootstrap”

Built-in utilities

I18nLink component

“Help manage i18n links with breeze”

Hooks

“Helpful hooks”

API

“API endpoints”

Errors handling

“Properly handling errors, to provide good UX and system observability”

Bundle analysis

“Know how big your bundle is”

SVG to React

“Convert your SVGs to React components using SVGR”

Security audit

“Run packages security audit using yarn”

Packages upgrade

“Visually upgrade your packages, with confidence”

Tracking useless re-renders

“Visualise useless re-renders that slow down your app”

External features

Backoffice/Admin site

“Update NRN demo using GraphCMS”