March 3, 2023

Gatsby & Netlify, Next js 13.2, Turborepo 1.8 and New Releases - Frontend News #32


Bartosz Antoszczyk

Frontend Developer
Gatsby & Netlify, Next js 13.2, Turborepo 1.8 and New Releases - Frontend News #32

What's new in the world of Frontend?

  • NextJS 13.2
  • Gatsby & Netlify
  • Turborepo 1.8
  • What's New In DevTools (Chrome 110)
  • Lighthouse 10

NextJS 13.2

The first news in our today’s agenda is the latest release of NextJS. It brings plenty of major improvements to the App Router:

  • Built-in SEO Support
  • Route Handlers
  • MDX for Server Components 
  • Rust MDX Parser
  • Improved Error Overlay 
  • Statically Typed Links (Beta)
  • Turbopack Improvements (Alpha) 
  • Next.js Cache (Beta)

We're gonna now tell you a little bit about some of them.

Route Handlers

In short, it is a new, more modern version of API Routes that was deeply integrated into the new routing system for the app.

Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.

They have an isomorphic API to support both Edge and Node.js runtimes seamlessly, including support for streaming responses. 

Route Handlers are available in 13.2 for the App Router (app) using the route.ts special file. They are not available in the pages directory, as they are a replacement for API Routes.

Improved Error Overlay

NextJs team made a number of improvements to the error overlay. Stack traces are now separated, making it easier to identify where the error is coming from. What is more, the error overlay now displays the current version of Next.js, to help you understand whether your version is up to date.

NextJS Cache

With the latest version of NextJS - the team introduces an evolution of ISR that enables progressive ISR at the component level, faster refreshes without network requests and also faster redeploys of code changes to static pages. It is especially crucial for pages that have more gradual data fetching process, mixing static and dynamic, now Next JS uses a more granular cache. It means that you can now encapsulate static or dynamic data alongside their consuming component.

Of course, there are much more things to cover and talk about - you can check the documentation and full list of them at the official next js website or in the link attached to our video description.

Gatsby & Netlify

This news is about to announce to you that Gatsby js is joining Netlify in order to grow and collaborate with Gatsby's technology and share its composable and reusable javascript architectures across the web.

What does it really mean for Gatsby? Generally, there are a few important pieces updates and upcoming fun things that will gonna happen for Gatsby users and the community that we will gonna mention:

The first one - Gatsby will continue to evolve and grow - many of Gatsby’s core contributors will join Netlify and continue to maintain the Gatsby framework contributing also to notify’s mutual open source software commitment.

Second - a lot of Gatsby features, concepts and optimizations will be incorporated into Netlify. It means that many innovations, especially for large heavy websites, and collaboration workflows, will be integrated into the Netlify platform and for sure make a huge impact across available across popular frameworks everywhere.

Last but not least - the newest Gatsby product - Valhalla Content Hub, which takes Gatsby graph ql data layer and provides it for any frontend framework will at build time become available as a part of Netlify’s platform. It will be then available to all frameworks.

What it all means? These composable architectures are chosen for increased website performance, to enable using the best tools and services available, to increase velocity and improve the client, developer and marketer experience, and to build a website that you can confidently scale.

We encourage you to follow this collaboration by the link we provided in our description or just visit the official Gatsby/Netlify website to explore and follow the latest news about that.

Turborepo 1.8 

The third news on our agenda is the latest release of turborepo which reached version 1.8.

It brings better flexibility, to our codebase by improving its structure and implementation of workspaces. We’re gonna mention the most important one so:

Workspace configuration - you are now able to add json turbo file configuration to override the root configuration in your repository.

This functionality will enable teams to scale ownership of the projects in their monorepos by moving away from global project configuration to fine-grain control over tasks in workspaces.

The second thing - automatic workspace scoring - automatically infers your browser's current workspace so that it runs that workspace’s tasks only.

It means that with version 1.8, turbo will automatically detect the workspace you are creating something in and generate the --filter syntax to scope your task to that workspace.

Last but not least - the easier migrations - automatically migrate to a new version of turbo with the new command. Turbo/codemod now provides a simple migrate command which both upgrades your repo to the specified versions. You can try it with nix @turbo/codemod migrate command and it will do everything for you.

If you want to check the full list of the latest turborepo release improvements and features -  please check our link attached in the video description.

Chrome 101 news

The next news from our today’s list which we’re gonna talk about is a bunch of new improvements in chrome 101.

The first big thing is the recorder update. It offers now a split code view, which makes it easier to view your user flow code. The Recorder highlights the corresponding code as you hover over each step on the left, making it easy to track your flow. You can change the code format using the dropdown, which lets you switch between formats such as the Nightwatch Test script. What is more, you can also Customize selector types of a recording and edit this user flow.

The second key thing is the Clearing Performance Panel on reload. It means that now The Performance panel clears both the screenshot and trace when you click the Start profiling and reload page button. What's the difference?  The panel now always provide navigating to the about:blank page first to guarantee that the recording begins with a blank trace. This aligns with the Performance Insights panel which already did the same.

Another worth mentioning improvement is a more ergonomic and consistent Autocomplete feature in the console. This means that DevTools enhances the autocompletion experience by implementing the following changes:

  • The tab is always used for auto-completion.
  • The behaviour of Arrow right and Enter varies based on context.
  • The auto-completion experience is consistent across text editors, in the Console, Sources, and Elements panels

For the full list of the Chrome 101 new features - please feel free to check the link attached to our video description.

Lighthouse 10

The last news for today is Lighthouse 10 and the new changes that come up with this version. 

For those who don’t know - Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites.

The major improvement which we’re gonna mention regarding this particular release is the Back/Forward cache tool. It is one of the most powerful tools available for improving a page's performance for real users. Beyond the normal browser cache, a page loaded from the bfcache will restore page layout and execution state nearly instantly, largely skipping all page load activity and getting your page in front of your users immediately as they navigate backward and forward through their history. This new Lighthouse audit actually navigates away from the test page and back again to test if it's back/forward cache, and lists the reasons if it fails.

And also some good news for the node users - If you use Lighthouse as a Node library, there are a few programmatic breaking changes in this release you may need to account for. Lighthouse 10 also ships with full TypeScript type declarations! Anything written or imported from Lighthouse should now be typed, which could be really helpful.

What do you think? Share your impressions!

Become a part of the team that fits you, create really cool videos with us!

Interesting projects from all over the globe, opportunities to grow and nice people attached. Check out our openings.

Join us
Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet our hosts


Bartosz Antoszczyk

Frontend Developer

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.