@nexus_js/assets
Advanced tools
Nexus asset pipeline — image optimization (AVIF/WebP), font injection, lazy loading
Nexus asset pipeline — image optimization (AVIF/WebP), responsive srcsets, blur placeholders, and font preloading.
The fastest way to serve optimized images in Nexus.
In any .nx template, import Image and interpolate it directly:
---
import { Image } from '@nexus_js/assets';
---
{Image({ src: '/hero.jpg', alt: 'Hero', width: 1200, height: 600 })}
This generates a <picture> element with:
<img>)srcset for breakpoints [320, 640, 960, 1280, 1920]width / height to prevent CLSWhen the image should fill its container:
---
import { Image } from '@nexus_js/assets';
---
<div style="position:relative;width:100%;height:60vh;">
{Image({ src: '/hero.jpg', alt: 'Hero', fill: true, objectFit: 'cover', priority: true })}
</div>
fill removes width/height attributes and applies position:absolute;inset:0 styles. The parent must have position:relative.
For images that appear immediately on load:
{Image({ src: '/hero.jpg', alt: 'Hero', width: 1200, height: 600, priority: true })}
This sets loading="eager", decoding="sync", and fetchpriority="high".
To also preload the image in <head>, return a link from your load():
import { renderImagePreloadLink } from '@nexus_js/assets';
export async function load(ctx) {
return {
head: {
links: [
{ rel: 'preload', as: 'image', href: '/_nexus/image?src=%2Fhero.jpg&w=1200&q=80' },
],
},
};
}
For a smooth loading experience, generate a low-quality placeholder in load():
import { Image, getBlurDataURL } from '@nexus_js/assets';
import { resolve } from 'node:path';
export async function load(ctx) {
const publicDir = resolve(process.cwd(), 'public');
const blurDataURL = await getBlurDataURL('/hero.jpg', publicDir);
return {
hero: { src: '/hero.jpg', alt: 'Hero', width: 1200, height: 600, blurDataURL },
};
}
{Image(pretext.hero)}
Bypass the optimizer for SVGs, GIFs, or when you need the original file:
{Image({ src: '/logo.svg', alt: 'Logo', width: 200, height: 200, unoptimized: true })}
If you don't know the image size ahead of time, read it at runtime:
import { getImageDimensions } from '@nexus_js/assets';
import { resolve } from 'node:path';
export async function load(ctx) {
const publicDir = resolve(process.cwd(), 'public');
const dims = await getImageDimensions('/photo.jpg', publicDir);
return { photo: { src: '/photo.jpg', alt: 'Photo', ...dims } };
}
External URLs are proxied safely through the optimizer:
{Image({ src: 'https://example.com/photo.jpg', alt: 'Remote', width: 800, height: 600 })}
Security checks block private IPs, localhost, and non-HTTP(S) protocols automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | Local path (/hero.jpg) or remote URL |
alt | string | required | Accessible description |
width | number | — | Intrinsic width (prevents CLS) |
height | number | — | Intrinsic height (prevents CLS) |
size | number | — | Square shorthand (sets both width and height) |
sizes | string | auto | sizes attribute for responsive images |
priority | boolean | false | Eager loading + high fetchpriority |
round | boolean | false | border-radius: 50% |
class | string | — | Custom CSS class |
quality | number | 80 | 1–100 compression quality |
formats | ImageFormat[] | ['avif','webp','original'] | Output format priority |
placeholder | 'blur' | 'empty' | 'none' | 'blur' | Loading placeholder strategy |
blurDataURL | string | — | Inline base64 LQIP |
fetchpriority | 'high' | 'low' | 'auto' | auto | Browser fetch priority hint |
fill | boolean | false | Fill parent container |
objectFit | string | 'cover' | CSS object-fit (fill mode) |
objectPosition | string | 'center' | CSS object-position (fill mode) |
unoptimized | boolean | false | Bypass optimization |
style | string | — | Additional inline styles |
Image(props) / renderImage(props) — generate optimized <picture> HTMLimageUrl(src, width, format, quality) — build /_nexus/image?... URLgetImageDimensions(src, publicDir) — read width/height via sharpgetBlurDataURL(src, publicDir) — generate base64 LQIPrenderImagePreloadLink(props) — generate <link rel="preload"> taggenerateBlurDataURL(buffer) — generate LQIP from a BufferblurFromFile(absolutePath) — generate LQIP from diskhandleImageRequest(request, { publicDir }) — HTTP handler for /_nexus/imageSee @nexus_js/assets/fonts for Google Font inlining, preloading, and self-hosted font optimization.
MIT © Nexus contributors
FAQs
Nexus asset pipeline — image optimization (AVIF/WebP), font injection, lazy loading
The npm package @nexus_js/assets receives a total of 60 weekly downloads. As such, @nexus_js/assets popularity was classified as not popular.
We found that @nexus_js/assets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.
Security News
A Shai-Hulud infection exposed Suno's source code, which shows the AI music startup stream-ripped tracks to train its models.
Security News
Vercel is formalizing a monthly release program for Next.js. The change follows React2Shell and a sharp rise in AI-assisted vulnerability discovery.