Next Right Now Demo
This demo uses the preset v2-mst-aptd-gcms-lcz-sty
What is a preset? - See all presets 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.
Next.js native features
Make sure to check the official documentation to learn more about it (routing, etc.)
SSR
SSR can be used either through getInitialProps
or getServerSideProps
.
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
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 getCommonStaticProps
helper to configure common stuff between all SSG-based pages and reduce code duplication.
SSG, using fallback
option
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)
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.
API-based regeneration (e.g: regenerate pages based on a CMS update) is still being discussed in the RFC.
TS
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?
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.
Catch-all routes
Built-in features
Hosting on Vercel vendor
Stages & secrets
Storybook
SaaS B2B MST
MST
is similar to the monorepo
design, where the same source code can be used to deploy multiple instances.CI/CD
Static i18n
Monitoring
CSS-in-JS
Cookies consent
CookieConsent
OSS library”Analytics
Testing
Icons
CSS Animations
UI components library
Docs site
Built-in utilities
I18nLink
component
Hooks
API
Errors handling
Bundle analysis
SVG to React
Security audit
Packages upgrade
Tracking useless re-renders
External features
You can consider them as "advanced integration examples".
Backoffice/Admin site
Email:
unly-nrn+contributor@unly.org
Password:
bbU#Ec2m6FpqU7&
You can edit anything and play with the various rendering modes (SSG, SSR, etc.), the GraphCMS API is configured to use
DRAFT
content in priority.This mean that your changes on any published content will be reflected (because changing a published content creates a draft, and that draft is being used).
This has been done on purpose, to allow visitors to manipulate the content of the demo and see their changes being reflected immediately.
N.B: Please do not change the
customer.ref
values, as it would break the associated demo, if the ref
doesn't match.But, they won't be applied on the production demo (for SSG pages), because those pages have been generated at build-time and aren't updated dynamically.
On the other hand, SSR pages will always reflect the latest version of the content.