NRN hybrid SSG/SSR and i18n release (WIP) - Real-world use case with production-ready Next.js app boilerplate (Analytics, Sentry, GraphQL, i18n, Vercel)

[Vadorequest]

Next.js is really great, but getting more and more complicated. NRN aims at helping people get started with production-grade boilerplates, and educate devs with real-world examples and in-depth documentation.

I believe few of you know about Next Right Now (NRN) https://github.com/UnlyEd/next-right-now

We've been working hard those past few days (weeks?) to migrate our SSR preset to a hybrid SSG/SSR preset that follows the newest best practices encouraged by Next.js.

If you wonder what a preset is: https://unlyed.github.io/next-right-now/concepts/presets

If you want to jump into the latest demo:

• https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-bv7maiixo.now.sh

New features in this PR:

• Language detection and redirect to preferred language (using experimental redirects/rewrites)
• Manual language change (footer)
• fr, en, fr-FR and en-US are possible (change url directly to see it in action)
• Use of hooks in favour of HOCs whenever possible
• SSG/SSR compatible Apollo client (GraphCMS backend for demo)
• Automatic static optimisation enabled (no _app.getInitialProps)
• SSG-first (SSR is supported but mostly for demonstration purpose, my own personal goal is to use 100% SSG)
• Full TypeScript
• Reusable getStaticProps/getServerSideProps
• i18n using Locize and i18next/react-i18next
• Monitoring using Sentry
• Proper rehydration and server/bowser reconciliation, following https://joshwcomeau.com/react/the-perils-of-rehydration
• Examples with SSG/SSR (respectively /examples and /products)
• Admin site to play around and see changes https://nrn-admin.now.sh/
• CI/CD built-in
• See full list of benefits https://unlyed.github.io/next-right-now/#benefits

Status

PR (in progress): UnlyEd/next-right-now#42 (comment)

Left to be done

• Preview mode for dev/staging environment, will be useful for the SSG page that load data from GraphCMS (e.g: /examples), header/footer components will be pure SSG and won't use preview mode
• E2E (tests or redirections, url rewriting, navigation, i18n-related features)

Known bugs

• ⚠️ 🐛 SSG - Infinite render loop - Too many re-renders. React limits the number of renders to prevent an infinite loop #12444 - This bug crashes pages when doing CSR from the same page (examples -> examples), I don't have any clue as to how to debug it. => Help welcome
• 🐛 Locize saveMissing doesn't work anymore 🤷
• Some state issue with client side navigation (console warning) without visible side effect

---

How to help?

If the project interests you, don't hesitate to take a look at the code and give me your feedback. Most of the job is done (IMHO), preview mode is the next big thing.

Feel free to give it a try, installation tutorial is at https://unlyed.github.io/next-right-now/getting-started/quick-start (make sure to checkout the right branch, not the ssr one!), beware it moves fast, but it's stable enough for playing around. I'll try to make a codesandbox at some point.

If you're from the core team, or experienced with Next, I'd love a deeper review of the source code (best practices, etc.) ❤️