@nextwp/addons

Enhance your NextWP experience with @nextwp/addons, a collection of additional components and features designed to extend the capabilities of your NextWP project.

This package is currently a hub of innovation, actively being developed to include a variety of tools and components that streamline your web development process.

Installation

The @nextwp/addons package is currently in active development and is not yet ready for production use. It will be made available on NPM soon. To view the current state of the source code, visit the repo on GitHub.

pnpm add @nextwp/addons

PreloadResources

PreloadResources is a component in @nextwp/addons designed for optimizing Next.js applications by preloading crucial media types in the initial viewport. This component is particularly effective for videos that are key to the Largest Contentful Paint (LCP), but can be applied to other resource types as well.

Read more about the new ReactDOM preload methods in this pull request.

Purpose

The primary function of PreloadResources is to enhance the loading of essential non-image media in your application's initial viewport. It's especially useful for videos, ensuring they are loaded efficiently and ready for immediate display, which can significantly improve the user experience and LCP.

Key Benefits of PreloadResources

Advanced Preloading with ReactDOM: Leverages the latest ReactDOM methods for efficient preloading of resources in the page head, enhancing performance and optimizing page load times.
Optimized for Crucial Media Elements: Especially effective for videos impacting the Largest Contentful Paint (LCP), it also adeptly manages other resource types, ensuring timely loading and readiness for use.
Improved User Experience: Contributes significantly to a faster, smoother page load, thereby enhancing the user experience, particularly in media-heavy applications.
Seamless Next.js Integration: Designed to integrate effortlessly with the Next.js framework, making it a versatile and intuitive choice for developers.

Usage Example

import { PreloadResources } from '@nextwp/addons'

export function PageTemplate() {
  return (
    <div>
      <PreloadResources
        resources={[
          {
            as: 'video',
            href: 'https://example.com/video.mp4',
          },
        ]}
      />

      {/* ... use the preloaded asset */}
      <video autoPlay loop>
        <source src="https://example.com/video.mp4" type="video/mp4" />
      </video>
    </div>
  )
}