Next.js v16.2, a sneaky header trick & TypeScript 6

Next.js 16.2

The latest release of Next.js comes with a bunch of new performance improvements, some better debugging tools and some other AI-related features.

According to Vercel, this update includes:

• Faster time-to-URL: ~400% faster rendering time on like-for-like projects using the same machine.
• Faster rendering: ~50% faster rendering by changing the way Server Components serialize and deserialize data.
• New Default Error Page: the built-in error page has been redesigned to be 'cleaner and more modern'.
• Server Function Logging: Server Function execution is now logged in the terminal during development, detailing the function name, arguments, execution time and the file it's from.
• Hydration Diff Indicator: when there are Hydration errors, the output now renders a diff of the Client and Server so you can see exactly what has changed between render and Hydration.
• Inspect production builds: you can now include a --inspect flag when using next start so that you can attach a Node.js debugger to production builds.
• Next Link TransitionType Prop: Next Link now accepts a transitionTypes prop, which is an array of strings that specifies the types of View Transitions to apply when Navigating. This extends support for View Transitions in Next.js websites.
• And plenty more: read the full blog post to find out more

TypeScript v6 is out!

This week, Microsoft announced the release of TypeScript v6. I've done a bit of reading about TypeScript v7 recently, and by the sounds of it, this release is mostly about preparation for the release of v7 to make sure there are as few issues for people as possible.

TypeScript 6.0 acts as the bridge between TypeScript 5.9 and 7.0. As such, most changes in TypeScript 6.0 are meant to help align and prepare for adopting TypeScript 7.0. It may seem surprising to say, but TypeScript 7.0 is actually extremely close to completion. In fact, if you’re able to adopt TypeScript 6.0, we encourage you to try out the native previews of TypeScript 7.0.

There are some other minor features that have been added in this release, including:

• Subpath imports starting with #/ - this is actually a Node thing where, if you wanted to use a # character for your imports, you needed to add a name as well, and if you didn't, then you had to use #root/ and now you don't need the root bit
• es2025 option for target and lib - adds a couple of new built-in features to TS from ES2025
• New Types for Temporal - this is exciting! Temporal is ECMAScripts attempt to fix how difficult and broken Dates are in JavaScript and will be coming soon. This update includes some of the Types from Temporal.
• RegExp.escape - this implementation of Regex to escape special characters in string literals is at stage 4 in proposal to ECMAScript, which means it'll be coming soon. TS has added proper typings for it.
  ⁠

  1function matchWholeWord(word: string, text: string) {
  2    const escapedWord = RegExp.escape(word);
  3    const regex = new RegExp(`\\b${escapedWord}\\b`, "g");
  4    return text.match(regex);
  5}

  Copy
• The dom lib Now Contains dom.iterable and dom.asynciterable - this simply means that you don't need to include the dom.iterable lib in order to iterate over DOM Nodes in a for loop
  ⁠

  1// Before TypeScript 6.0, this required "lib": ["dom", "dom.iterable"]
  2// Now it works with just "lib": ["dom"]
  3for (const element of document.querySelectorAll("div")) {
  4    console.log(element.textContent);
  5}

  Copy
• Some potential breaking changes - there are a few potential breaking changes to be aware of, which you can read more about

Jhey's Spot

I've got a couple of things I found from Jhey this week. The first is a really cool effect, using View Transitions, to show how a light would look when lit on a list of products in an e-commerce site.

And also this little demo, which uses CSS anchor positioning, to transition a shape from one place to another (it also uses Draggable from GSAP to highlight the transition to different places):

Thanks for reading. See you next time