Next.js 10

[samuelcastro]

What's the plan to get NRN up to Next.js 10? https://nextjs.org/blog/next-10

There are a lot of new features:

• Built-in Image Component and Automatic Image Optimization
• Internationalized Routing
• Next.js Analytics
• React 17 Support
• getStaticProps / getServerSideProps Fast Refresh
• Fast Refresh for MDX
• Importing CSS from Third Party React Components
• Automatic Resolving of href
• @next/codemod CLI
• Blocking Fallback for getStaticPaths

---

What's been done:

• Preset v2-mst-aptd-at-lcz-sty has been upgraded to Next.js 10 Upgrade v2-mst-aptd-at-lcz-sty preset to Next.js 10 #189
• Preset v2-mst-aptd-gcms-lcz-sty has been upgraded to Next.js 10 Upgrade v2-mst-aptd-gcms-lcz-sty preset to Next.js 10 #190
• Presets common upgrades:
  • Codemods scripts have been added 704c2e0 (#86)
• Preset v2-mst-aptd-at-lcz-sty upgrades:
  • Refactor Font-Awesome icons Refactor Font-Awesome icons (for v2-mst-aptd-at-lcz-sty preset) #191
• Preset v2-mst-aptd-gcms-lcz-sty upgrades:
  • Refactor Font-Awesome icons Refactor Font-Awesome icons (for v2-mst-aptd-gcms-lcz-sty preset) #192

What's left to do:

• Migrate NRN I18n routing implementation to native Next.js I18n #194

[Vadorequest]

The plan it to get there ASAP.
As far as I could tell, there is no regression. So it should be a smooth update.

The only major difference is that I need to replace our custom i18n routing with the native one. There might be functional regressions there so this needs to be tested thoroughly.

And use/showcase the Image component too. This is the most exciting part of the update IMHO, as we already have i18n support, and perfs analytics for free (through Amplitude).

[samuelcastro]

Well Amplitude is not quite free right? I think we should embrace Next.js Analytics as well.

And we might need to get rid of GraphCMSAsset in favor of the native Image component, or maybe just incorporate the Image within GraphCMSAsset.

And update all i18n routes utilities in favor of the new automatic resolving of href.

I'm super excited about it. :)

[Vadorequest]

Amplitude is free until 10 million events a month. So, it's not too bad either. (and more effective if you need to consolidate stats from several sites)

Definitely gonna replace GraphCMSAsset and AirtableAsset with Image, not sure if I'll wrap the Image yet (to deal with custom business rules) or replace them altogether yet.

I hope I can do all those things within the end of the week-end.

[Vadorequest]

One preset has been upgraded to Next.js 10.

I encountered a few issues, and there are non-backward compatible changes to take care of, but nothing really complicated once you understand the underlying issues.

#189

I'm going to make a PR for the other preset.

[Vadorequest]

The other preset has been upgraded to Next.js 10.

#190

Note that in order to make is easy to cherry-pick/rebase those changes, I've only done what's required for the upgrade to function normally. There is still a lot of work to be done to benefit from the actual features, but those will be done in separated commits/PRs.

[Vadorequest]

FA icons have been refactored into a distinct file.

[samuelcastro]

There is still a lot of work to be done to benefit from the actual features, but those will be done in separated commits/PRs.

Could you specify what this work means? Refactor GraphCMSAsset to use Image or something?

[Vadorequest]

Yeah, this and i18n, I18nLink, etc.

There is one regression with the native i18n though, see vercel/next.js#17078 (comment)

[samuelcastro]

Ok, it'd be great to create issues for each single feature that needs to be implemented, to keep things more organized and easy to track.

[Vadorequest]

True. I first thought I'd be able to quickly change the NRN implementation about i18n routing and asset/image, but I've met some drawbacks and changed my mind.

• Migrate NRN I18n routing implementation to native Next.js I18n #194 - Migrate NRN I18n routing implementation to native Next.js I18n
• Migrate AirtableAsset component to use Next.js 10 Image component #195 - Migrate AirtableAsset component to use Next.js 10 Image component
• Migrate GraphCMSAsset component to use Next.js 10 Image component #196 - Migrate GraphCMSAsset component to use Next.js 10 Image component

I'm closing this, NRN has been upgraded to Next.js 10 successfully, and both presets have been upgraded.

Further upgrades will be done in distinct PRs.

[samuelcastro]

What about automatic resolving of href?