Subscribe to stay updated on the most important tech updates in your industry.
Next’s Image component is a powerful way to optimize images
If you’ve used Next.js, you’ve almost certainly used its <Image /> component, a handy way to optimize images with minimal effort required. In fact, the component is so easy to use out-of-the-box that you might not know some useful facts about its architecture and best practices for using it:
<Image /> consists of three parts:
A React component that generates the required HTML including the <img /> tag and multiple URLs for the src and srcset attributes
The Next Image API serves an image proxy that accepts an image URL, width, and quality; it also validates parameters, determines cache control policies, processes the image, and ultimately serves the image in a browser-supported format
<Image /> uses two different libraries - Sharp or Squoosh - for optimization
<Image /> does not crop images, despite the fact that you can pass in width, height, and fill properties; it is currently impossible to change an image’s original aspect ratio
When you pass in a width prop, you might notice that your image is rendered with a different actual width; this is due to the fact that Next.js uses arrays of deviceSizes and imageSizes (found in next.config.js) to resize images to the closest defined size
You can optimize images by using the Image API (even without using the <Image /> component itself) by calling the API’s URL
For example: /_next/image?url=https://x.com/test.jpg& w=640&q=75
It is best practice to import an image and assign that imported image to <Image />’s src attribute rather than assigning an absolute path to src; this is because accessing images by an absolute path from a public folder results in a 30-day cache policy, which can have a negative impact on your Lighthouse score
Google Search Central recently released its latest episode, detailing some updates, best practices, and guidelines for search optimization:
Interaction to Next Paint (INP) will become part of the Core Web Vitals metric starting in March 2024, replacing First Input Delay (FID)
Starting in December 2023, Google Search Console will be retiring its “Mobile Usability” report, the Mobile-Friendly Test tool, and its Mobile-Friendly Test API
Search Labs is available for users in the US who want to try out experimental initiatives such as Search Generative Experience (SGE), which uses AI to enhance users’ searches
Search Console announced a series of updates:
An update to the Rich Results Test allows code editing, which makes experimental fixes much faster and easier
Search Console Insights now supports users without Google Analytics
The video indexing report has been improved to provide more detail and context for resolving video-indexing issues
The latest version of Next.js includes improvements for compiler performance and various bug fixes.
On Vercel's website these improvements led to 1.5% faster local server startup and 54% faster updates when making changes (HMR/React Fast Refresh)
Next.js achieved these results by caching and/or minimizing slow operations, optimizing expensive file system operations, and using more incremental tree-traversal during compilation
Along with these significant improvements, Next.js is continuing to develop and improve its new App Router:
Next.js’s previous Pages Router was not designed for streaming, leading to the need to create a streaming-friendly API for data fetching, asset loading, page metadata, and React’s newer primitives
Next.js is focusing on improving the App Router’s stability: since 13.4, they have patched a number of high-impact bugs around stability that are available in the latest patch release
Next.js has re-written its documentation from scratch, including refreshing almost every page of the App Router documentation
A former npm engineer wrote up an issue he sees with the npm ecosystem:
The author argues that the npm registry delegates validation of the integrity of package contents to npm clients rather than checking manifest data against the package
This results in a number of negative impacts on users:
Cache corruption, in which the saved software package may not align with the specified name or version in the registry of URL
Unacknowledged dependencies may be installed
Unknown scripts can be executed
Downgrade attacks are possible, in which a project’s version specification correspond to a susceptible version of the software package
As safeguards against these scenarios, npm users are encouraged to avoid or audit packages that rely on npm registry package manifests
You can also use a registry proxy that verifies package contents
2 metrics in Google’s Core Web Vitals are directly impacted by font loading: Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS)
Using font-display: optional can help avoid CLS: with the default setting of font-display: auto, a page will render with the space that would be taken by the fallback font, so that when the custom font loads there is a layout shift
Additionally, using font-display: optional leads the browser to render the font only if it is available quickly
You can also optimize font-loading by self-hosting fonts on your primary domain; this can be problematic for licensing reasons, but self-hosting the loading code is an effective middle ground
Vercel’s AI SDK offers support for streaming API responses from AI models.
This includes React and Svelte hooks for data fetching and rendering streaming text responses
The SDK is Edge and Serverless ready, meaning that you can deploy an AI application that scales, streams generated response, and is cost-effective
Vercel’s Chat & Prompt Playground allows developers to compare various language model results, modify parameters, and generate code in Next.js, Svelte, and Node.js
Stay ahead of the curve with Econify's newsletter, "The Loop." Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation, this newsletter is your go-to source for all things cutting-edge in the tech industry.
The Loop is written and edited by Hank Mason, Andrew Smith, John Kaufmann, Noah Gribbin, Victoria Lebel, Chris Breen, and Marie Stotz.
Have questions? Hit reply to this email and we'll help out!
