@smoothcdn/loader is the frontend companion for projects managed with Smooth CDN CLI. It reads the same .scdn.json configuration and gives your app framework-aware components for assets published to Smooth CDN.

• Build CDN URLs from project config instead of hardcoding URL strings.
• Render images, audio and video with typed asset paths.
• Load scripts and styles from Smooth CDN in React and Next.js.
• Generate TypeScript unions for available assets with scdn types.

Use the loader when your frontend code consumes assets that are already included in your Smooth CDN project sources. For dynamic remote media managed by a CMS or user uploads, keep using the URL returned by that system.

npm install @smoothcdn/loader

Keep .scdn.json in the project root, then generate the typed loader module and call it once from your app bootstrap:

scdn types

import { configureSmoothCDN } from "../../smoothcdn-loader";

configureSmoothCDN();

Component files can then import directly from @smoothcdn/loader. You do not need a project-specific image wrapper.

Generate loader-compatible TypeScript types from the current .scdn.json sources:

scdn types

By default this writes smoothcdn-loader.ts. You can choose another output path:

scdn types --output src/smoothcdn-loader.ts

The generated module wires root .scdn.json into the loader and adds typed asset paths to components imported from @smoothcdn/loader. It also applies replacePath from config; replacePaths works as an alias. If imageVariants is configured, image components automatically generate responsive sources from those variants. Use isCritical for above-the-fold assets; loader components then apply the same loading attributes as generated HTML snippets.

import { CDNImage } from "@smoothcdn/loader/react";

export function Logo() {
  return <CDNImage assetPath="/public/logo.svg" alt="Smooth CDN" width={40} height={40} />;
}

The Next.js entrypoint exports ready-to-use components for images, media, scripts and styles.

import { CDNAudio, CDNImage, CDNVideo, Script, Style } from "@smoothcdn/loader/next";

export default function Page() {
  return (
    <>
      <Style assetPath="/public/app.css" isCritical />
      <Script assetPath="/public/app.js" isCritical />

      <CDNImage
        assetPath="/public/hero.png"
        alt="Hero"
        isCritical
        width={1536}
        height={1024}
      />

      <CDNAudio assetPath="/public/intro.mp3" controls />

      <CDNVideo
        assetPath="/public/demo.mp4"
        posterAssetPath="/public/demo-poster.jpg"
        isCritical
        controls
        width={1280}
        height={720}
      />
    </>
  );
}

The package also exposes framework entrypoints for Vue, Nuxt, Astro, SvelteKit and Remix. Use them when you need URL helpers close to framework-specific data loading or routing code.

import { createSmoothLoader } from "@smoothcdn/loader/astro";
import { createSmoothLoader as createNuxtLoader } from "@smoothcdn/loader/nuxt";
import { createAssetLoad } from "@smoothcdn/loader/sveltekit";
import { createStyleLink } from "@smoothcdn/loader/remix";

For the full package API, see the package README or install the loader and generate types with scdn types.