Next Right Now Demo

This demo uses the preset `v2-mst-aptd-at-lcz-sty`

Next Right Now (NRN) is a flexible production-grade boilerplate featuring Next.js framework.
It can be used as a boilerplate to get started your own project, or as a learning resource.

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.

Please note that the documentation is hardcoded in English, so don't expect it to change when switching language. Nav/Footer component are localised, as well as dynamic content and i18n examples.

You can switch locale from the footer or by clicking on fr or en or en-US.

Next.js native features

Only a small subset of Next.js features (rendering modes, mostly) is covered here.
Make sure to check the official documentation to learn more about it (routing, etc.)

SSR

“Server Side Rendering”

Next.js has always supported SSR, and it was the main way to render pages until v9.3 came out.

SSR can be used either through getInitialProps or getServerSideProps.

We have decided not to use getInitialProps, because even though it is not officially deprecated, it is preferred to use getServerSideProps whenever possible.

From experience, it is harder to use getInitialProps because you have to make your code universal, because it will be executed from the server (SSR) and the browser (CSR), and it usually leads to increased complexity and tougher bugs.

SSG

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

Next.js supports SSG since v9.3.
This is the officially recommended way to build apps since then.

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

SSG can be used with different options, which are described below, and provide much greater flexibility and business possibilities compared to the basic example above.

SSG, using `fallback` option

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

Next.js supports SSG with fallback since v9.3.

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”

Next.js supports SSG with revalidate since v9.4.

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.

The RFC is still being discussed, don't hesitate to participate!
API-based regeneration (e.g: regenerate pages based on a CMS update) is still being discussed in the RFC.

TS

“TypeScript support and helpful tips”

Next.js supports TS natively out of the box.
But, there are special considerations to support TS for testing, code linting, etc.

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”

Quickly learn the basic concepts of a Next.js app, such as navigation, the different rendering modes, routing, API routes and deploying to Vercel.

We strongly recommend doing this tutorial if you're not familiar with Next.js, it'll help you get an overview of what the framework can help you achieve.

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

Hosting on Vercel vendor

“Deploy your app online in a breeze”

Stages & secrets

“How to deal with secrets, using Vercel vendor”

Storybook

“Build your own Design System”

SaaS B2B MST

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

MST is similar to the monorepo design, where the same source code can be used to deploy multiple instances.

CI/CD

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

Static i18n

“Content internationalisation using i18next and Locize vendor”

Monitoring

“Realtime app monitoring using Sentry vendor”

API

“API fetching using Amplitude vendor (REST))”

CSS-in-JS

“Styling components with Emotion”

Cookies consent

“Cookies consent using CookieConsent OSS library”

Analytics

“Analytics using Amplitude vendor”

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”

Docs site

“Dedicated GitHub pages website, using Jekyll”

Markdown as JSX components at runtime

“Dynamically transform Markdown into JSX components at runtime”

Built-in utilities

`I18nLink` component

“Help manage i18n links with breeze”

`AirtableAsset` component

“Help manage airtable assets (attachments, images, etc.)”

Hooks

“Helpful hooks”

HOCs

“Helpful high order components”

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

This section showcases features that aren't built-in within NRN.
You can consider them as "advanced integration examples".

Backoffice/CMS

“Update NRN demo using Stacker CMS”

Edit this demo using Stacker CMS!

You can edit the customer theme, play with its primary color to see how the demo is affected depending on the various rendering modes (SSG, SSR, etc.)

You can also edit the products, and play around, as if you were using the Stacker CMS from a customer/editor standpoint!

If you like Stacker and would like to use it, here is a coupon code to get your first month for free!
nrn1m

Impersonating a user will grant you access to Stacker CMS with the user's permissions and will give you access to content that's related to its tenant.

This is a great feature for SaaS B2B businesses, because each customer can only view/edit their own content, not what belongs to another customer.