🎺 CHANGELOG 🎺

[Vadorequest]

🎺 Full CHANGELOG: https://unlyed.github.io/next-right-now/changelog

This discussion acts as a "newsletter", you'll be automatically notified when a new message is posted as soon as you subscribe.

I'm trying out using Github Discussion to talk about what changes on the repository. I like the idea of showing off what's done to people who're interested to learn about it. Also, I find it more interesting than just a traditional changelog, because it allows discussion/interaction about what has changed.

Feel free to comment below about what you think of that. 😃

[Vadorequest]

Some improvements have been done yesterday on the documentation. Thanks to @smblee. See #160

Also, all v2 presets have been updated to the latest v9.5 version. See #161

Today, dependencies have been upgraded too, following a very strict process to make sure to avoid regressions. See #163 and #165

[Vadorequest]

Today, we released a new example with an optional catch-all route. #173

[Vadorequest]

Yesterday, we released a new feature related to GitHub Action: #147

Today, we released a few improvements regarding GitHub Action: #180

[Vadorequest]

Today, we released a few new features/enhancements:

• GHA - Enable Cypress debug logs for CPU/Memory usage by default
• Allow triggering workflows manually through GitHub Actions page
  • Wasn't possible before because there weren't any workflows in the main branch (gh-pages) - See https://github.community/t/cant-trigger-workflow-manually/121740/53?u=vadorequest

[Vadorequest]

Today, we released a new feature:

• GHA - Auto-alias custom domains

This will be handy within NRN (I was tired having to manually assign the staging domain every time I deploy to staging) and I also use it to update my own customers "preview" platform automatically, which always has the same url for them that mustn't change.

[Vadorequest]

Today, we updated the changelog with many changes that have happened those past 2 weeks.

We've greatly improved the automation around CI/CD, in particular regarding automated releases, and a new webhook feature for you to be notified when a Vercel deployment is completed.

• Await Vercel deployment to be ready before running E2E
• Provide in api/status the git commit metadata (SHA/branch/tag) used to make a Vercel deployment
• Add an action that releases automatically when a change lands on the main branches
• DevOps - Resolve app version from git tags, instead of package.json
• Handle GitHub private repositories
• Invoke custom webhook url once a Vercel deployment is "completed"

Those changes mark the end of 2020! 🎉

[samuelcastro]

This is really great, 2020 was very productive year for Next Right Now.

Good job @Vadorequest, keep it up!

[Vadorequest]

Thanks!

Next week, I plan on doing a full review of the documentation, I've let quite a few things get outdated 😕
Also, gotta update some packages. Takes an awful lot of time to do that.

I want to give a try to Storybook, I'll see how it goes.
A new preset might see the light in early 2021, as I'll need one without MST, but simple Single Tenancy this time.

And then, I really want to give a try to the new folder structure. If I'm very lucky I'll get the chance to do all of this next week. 😄

[samuelcastro]

That's great, looking forward to see those changes, I'm also using it in a ST.

Well, I wish you a happy 2021!

[Vadorequest]

Thank you, happy new year! 🎉

[Vadorequest]

Big documentation update today, added new pages (API Endpoints, Scripts and utilities) that weren't covered at all before today.

• https://unlyed.github.io/next-right-now/guides/api-endpoints/
• https://unlyed.github.io/next-right-now/guides/scripts-and-utilities/

Also, the existing documentation has been improved a lot.

• Documentation update (early 2021) #238 Official documentation
• Documentation update for v2-mst-aptd-at-lcz-sty #240 Source code changes (applied to both presets)

[Vadorequest]

Today, we've updated most dependencies, including Next.js from v10.0.0 to v10.0.3. (Updating to v10.0.5 crashes on Vercel)

• Implement restore-variable to clean our actions
  • First big step to simplifying our GitHub Actions! Uses our newborn https://github.com/UnlyEd/github-action-store-variable (experimental), applied for staging only for now
• Both preset packages were updated
  • Deps - Upgrade v2-mst-aptd-at-lcz-sty packages (January 2021)
  • Deps - Upgrade v2-mst-aptd-gcms-lcz-sty packages (January 2021)
• Deps - Upgrade to Emotion v11 (from v10) [BREAKING CHANGES]
  • Babel configuration has changed too, that part wasn't easy, if you encounter issues open an issue!

---

Migration guide:

Due to various changes in Emotion 11, there are breaking changes. If you're using NRN as a boilerplate and want to keep your fork up-to-date, you might have to resolve conflicts, and migrate your own code. Here are our recommandations, from our experience doing this with our private forks.

For the record, it took me 1h to migrate our most complex private fork. It's better to do this if you have at least 2h of uninterrupted time ahead of you.

• Check Deps - Upgrade v2-mst-aptd-at-lcz-sty packages (January 2021) (attempt N°2) #245 and Deps - Upgrade to Emotion v11 (from v10) [BREAKING CHANGES] #247 to grasp an overview of what's been done
• Check https://emotion.sh/docs/emotion-11 for Emotion 11 migration guide (packages renaming overview)
• You should work in a branch (not your master branch) to test those changes before applying them
• Merge changes from the NRN preset branch into your branch
• Resolve conflicts
• Run yarn lint, yarn:lint:fix:preview and see if there are issues that'd be fixed by running yarn lint:fix (run it if so)
• Search for all references of @emotion/core and emotion-theming package imports, they must both be replaced with @emotion/react
  • The linter should do it for you, but might miss some folders that are eslint ignored, it happened to us for svgs
• Replace all occurrences of useTheme<Theme>() and useTheme<CustomerTheme>() by useTheme()
  • We had a lot of those to change manually, the linter won't do it for you
• If you encounter TS errors with the css property, it's due to one of your installed packages using @emotion/core (react-select and storybook use Emotion 10), which messes up TS typings. I haven't found a proper fix for this, but it doesn't cause actual compilation errors (project works locally and on Vercel without build error), only warnings on the IDE.
  • My recommendation at this point is to // @ts-ignore-error them manually. They'll be fixed automatically once all your libraries migrate to Emotion 11.
  • You can check your yarn.lock to figure out which packages install @emotion/core
• We had some regressions in our tests using Jest snapshots, and had to update the snapshots, we were using snapshots with a lot of css properties that shouldn't have been there in the first place, due to the leak of the css prop to the browser. You might need to update your snapshots.

I guess that's it for the migration guide, I hope it helps. Let us know!

[samuelcastro]

@Vadorequest What's github-action-store-variable ?

Do you have any plan to upgrade apollo dependencies?

[Vadorequest]

github-action-store-variable role is to act as a store for GitHub Actions variables, so that we might store them in one job, and use them in another later. Until today we duplicated the code needlessly instead of re-using variables.

I don't plan on upgrading apollo unless there is a reason to. Are you using v4 or still on v3?

[samuelcastro]

v3 the same on NRN.

[Vadorequest]

Edited post - Added migration guide for people using NRN as a boilerplate

[Vadorequest]

Today, we release a few changes that affect all pages and highly improve developer experience regarding error handling using Sentry.

All Sentry errors will now contain a lot more information about the page (pageProps, router, etc).

• Improve Sentry monitoring for all pages + improve bootstrap error handling and monitoring
• Improve demo about error handling

Following this update, we recommend changing the following tags in your Sentry > Slack alerts:

alertType, stage, appName, release, buildTimeISO, customerRef, host, url, runtimeEngine, device, lang, level, nodejs, iframe, fileLabel, userId

See https://unlyed.github.io/next-right-now/guides/monitoring/setup-sentry.html#configuring-sentry-alerts for more documentation

[samuelcastro]

Following this update, we recommend changing the following tags in your Sentry > Slack alerts:

alertType, stage, appName, release, buildTimeISO, customerRef, host, url, runtimeEngine, device, lang, level, nodejs, iframe, fileLabel, userId

Could you elaborate more on this?

[Vadorequest]

See https://unlyed.github.io/next-right-now/guides/monitoring/setup-sentry.html#configuring-sentry-alerts

[Vadorequest]

Added example of what Sentry contains by default (tags, contexts, etc.)

[Vadorequest]

Today, we release one of our biggest PR: Storybook support.

All Next Right Now components have been documented and are available at https://nrn-v2-mst-aptd-at-lcz-sty-storybook.vercel.app/

The whole thing is completely automated using GitHub Actions, and the Storybook static site is hosted on Vercel.
More information available at #251

Each preset will have its own Storybook. At this time, only the v2-mst-aptd-at-lcz-sty preset has received the update. I hope I'll have time to do it for v2-mst-aptd-gcms-lcz-sty tomorrow.

The next update will be the big refactoring of folders, I advice to update all boilerplates to the latest version (storybook) before this one, because it'll bring a lot of breaking changes, as we'll move quite a lot of files around. (migration will be easier if you don't do everything at once)

[Vadorequest]

v2-mst-aptd-gcms-lcz-sty has its own Storybook website now too! See https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook.vercel.app/

Also, the https://unlyed.github.io/next-right-now/guides/storybook/ guide has been added!

[samuelcastro]

Loved it.

[Vadorequest]

Today, we release one of our most significant change about the folder structure.

⚠️ Breaking changes!

This is released under a new major version (v5) because it significantly alters the way projects are structured under the src folder.

If you use Next Right Now as a boilerplate, and keep your private fork up-to-date with the preset you forked from (as we do at Unly), you'll need to be extra cautious about this upgrade. See our "Migration recommendations" below.

To better understand the new folder structure, see the updated documentation.

If you wish to ask questions or issues you encounter, please do so in the RFC.

Rest assured this is a big change (the biggest breaking change since the initial release of Next Right Now, almost a year ago), and we don't plan on doing something similar anytime soon. NRN was released with a simple folder structure that was fine for small projects, but the community needed something more flexible and scalable for bigger projects. Read more about the RFC.

Migration recommendations

You can safely upgrade up to the latest v4 version without much trouble.

We recommend upgrading to the latest v4 version first (it adds Storybook, which is a significant feature) and make sure everything works well before attempting to upgrade to v5.

The v5 migration changes all files under src in the project, it might generate hundreds of conflicts.

Read about our feedback about migrating our Unly fork to v5.

Introducing "Module path aliases"

Most paths (import()) have been converted from relative path to module path aliases. Read more about it!

---

https://dev.to/vadorequest/a-2021-guide-about-structuring-your-next-js-project-in-a-flexible-and-efficient-way-472

[Vadorequest]

We released an integration with GitHub Deployments with #280

All Vercel deployments will now be referenced in https://github.com/UnlyEd/next-right-now/deployments.

Doc: https://unlyed.github.io/next-right-now/reference/github-environments

Also, PR will contain a summary of the latest deployment at the bottom:

[Vadorequest]

Another small update today, #282

A few path rules have been set for all deployment workflows, so they don't trigger needlessly when unrelated files are changed.

---

Also, the documentation has been updated with a few additions that were built-in for quite a long time but weren't documented:

• https://unlyed.github.io/next-right-now/guides/scripts-and-utilities/#why-did-you-render-wdyr-react
• https://unlyed.github.io/next-right-now/guides/scripts-and-utilities/#nextjs-page-optimizations-for-client-side-bundling
• https://unlyed.github.io/next-right-now/reference/typescript.html#type-fest

[Vadorequest]

We have had a few long-awaited releases today:

• GHA - Replace Vercel bash deploy script by "deploy-on-vercel" github action
  We released a new GitHub Action that deals with the complicated stuff (deploy, aliasing, etc.), which in turns simplified quite a lot our GitHub Actions. It's basically a code quality and maintainability enhancement. (we removed tons of complicated/duplicated bash code) - thanks to @Demmonius !

• Replace @unly/utils-simple-logger and winston by @unly/simple-logger and chalk (reduces bundle size by 40Kb)
  This was long-awaited (requested almost 1 year ago!), we reduced the size of our logging utility by 30x, improved the DX (same API as the console) and added server colors! Check out our newborn @unly/simple-logger

• Upgrade to Next.js v10.2
  Next.js v10.12 brings quite a lot of improvements, and one of them is Webpack 5, and the main reason why builds are faster (faster development environment, too!).

Due to webpack 5, we encountered a few issues described in the PR.

---

⚠️ Considering the big Webpack 5 change, be wary when upgrading! winston wasn't compatible with Webpack 5 and that's the main reason why I had to write @unly/simple-logger, to replace it. It might happen to other packages as well.

It is possible to disable Webpack 5 and go back to Webpack 4 by setting future.webpack5: false in next.config.js.

[Vadorequest]

It's been a while I hadn't kept up with the changes to be announced.

Here's what happened since May:

• 2021-06-15
  • NextJS 11
• 2021-06-09
  • Send network speed to Amplitude analytics and Sentry
  • Improve HTTP headers security by default
  • Use main, footer, nav and their ARIA equivalent for better a11y
  • Optimize .vercelignore configuration
• 2021-05-29
  • Fix 404 page generation + refactor all layouts SSG/SSR
  • Upgrade Cypress to v7
• 2021-05-20
  • Preload app-wide shared data
  • Pre-fetch all Locize translations as app-wide static data
  • Enable react strict mode
• 2021-05-20
  • Improve 404 page detection (covers more use-cases) + Don't serve pages under a locale that hasn't been enabled
• 2021-05-13
  • Fix - Display deployment's aliases on PR (regression from #296)
• 2021-05-12
  • Upgrade dependencies
  • Simplify layouts
• 2021-05-10
  • Rework of fonts
  • Optimise cookieConsent to avoid rendering on each page transition

NRN now uses NextJS 11! 🎉

The update was super smooth, most of the time spent was related to ESLint, which is now built-in. After testing out the next lint, I decided to keep our current commands because the CLI is simply better. (colors, links to line issues, watch mode)

Also, I've worked to increase the Core Web Vitals by looking at accessibility/perf issues and more.

The "preload" feature is also a great addition if you need shared static data that should only be fetched once. It's been used for both the DB and the i18n translations. It has decreased the build time. Also, less pages are generated now (only those that should be).

We use React "strict mode" by default now, too.

Fonts also have been re-worked completely, following Vercel & Lee Robinson best practices!

Another huge change is in the way the getStaticProps/getServerSideProps are being defined now, which might cause migration issues, but are much more flexible and composable than before.

[Vadorequest]

A few changes, that mostly affect the API endpoints:

• Refactor Amplitude (browser) + add Amplitude to the server side (API)
• Refactor Sentry + fix Sentry usage in API endpoints

I learned about some limitations of AWS Lambda, and now understand we need to await when calling external services, otherwise the API stops processing as soon as res.end() is called, which might lead to events not being properly sent to 3rd parties.

This came as a surprise, and is an odd behavior that should be documented and explained more.

[vvo]

Hey @Vadorequest, quick question: it seems you're not using react-amplitude, and it also seems it's mostly an abandoned project.

Do you recommend going for the vanilla JavaScript package for amplitude and wrap it ourselves?

Thanks!

[Vadorequest]

Hi @vvo, actually we do use @amplitude/react-amplitude, see

next-right-now/src/app/components/BrowserPageBootstrap.tsx

Line 158 in 493e16f

<AmplitudeProvider

, I wonder what made you think we don't?

It's not abandoned (AFAIK), although it seems there hasn't been much changes for the past 2 years in the repo, it relies on amplitude-js package which is properly maintained.

I don't necessarily recommend using Vanilla JS. The DX and API of @amplitude/react-amplitude is great. It lacks documentation and support, and it took me a while to get where we are at now, using best practices and all. But I don't believe developing your own tool will be beneficial.