Serve Next.js from a VPS with Smooth CDN

Keep your Next.js app on a VPS, publish frontend assets to Smooth CDN, and use CDN URLs for static files in production.

The problem

A VPS can run your Next.js app, but it does not need to serve every static file for every visitor. JavaScript, CSS, fonts, and images are often requested much more often than the dynamic work your app actually performs.

Without a separate asset pipeline, the same VPS handles application requests and repeated static file delivery, even though those files are better suited for CDN caching.

Static files served by the VPS

More repeated load on the origin

Assets mixed with app deployment

No repeatable publish step

Harder CDN adoption

Solution

Keep Next.js running on your VPS, but move the static delivery layer to Smooth CDN. Build the app, publish generated frontend assets to CDN, and let the browser fetch those files from stable CDN URLs while the VPS stays focused on the application itself.

Install and setup Smooth CDN CLI

Smooth CDN CLI publishes the files generated by your Next.js build. You can run it locally first and later move the same flow into deployment automation.

npm install -g @smoothcdn/cli

scdn login

npm install @smoothcdn/loader

Define Next.js files to publish

Point Smooth CDN at the generated static files from your Next.js app and any public assets that should be served from CDN in production.

Example .scdn config file

{
  "project": "My Next.js Assets",
  "projectSlug": "my-nextjs-assets",
  "userSlug": "user",
  "blockBots": false,
  "blockHeadless": false,
  "sources": [
    "./.next/static/**/*.{js,css,woff,woff2}",
    "./public/**/*.{png,jpg,svg,webp,ico}"
  ],
  "replacePath": {
    "/.next/": "/_next/",
    "/public/": "/"
  }
}

Run deployment

Build the Next.js app, publish assets to Smooth CDN, and deploy the app itself to your VPS. The important part is that static files are published during the same release flow.

npm run build

scdn push

# deploy the Next.js app to your VPS
# restart Your app

scdn sync

scdn sync command must be used once NextJS app is reload - it'll remove all outdated assets from previous builds.

Use the Smooth CDN loader in your Next.js app

Keep the Next.js runtime on your VPS and load published assets through the dedicated Smooth CDN components. Images, scripts, styles, and media stay explicit in your code and use the typed asset paths generated from your project config.

Typed component assets with @smoothcdn/loader

import { 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}
      />

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

Why not use assetPrefix config and next/image components?

assetPrefix can change where some generated static files are loaded from, but it does not make Next.js image delivery a Smooth CDN image pipeline. If you keep using next/image, images can still be processed by the Next.js image optimizer and served through the same Next.js application server.

That means you may only change the source URL your app reads from, while the image still goes through an additional framework-level optimization step. For a real split where images are prepared and delivered by Smooth CDN, use @smoothcdn/loadercomponents for images and media.

What You get

A cleaner split between your Next.js runtime and the files users load repeatedly in production.

Next.js stays on your VPS

JS, CSS, fonts, and images move to CDN URLs

Less repeated static-file work on the origin

One repeatable publish flow for each release

Cleaner separation between app hosting and asset delivery

Keep Next.js on your VPS. Move static delivery to Smooth CDN.

Use your VPS for the app runtime and Smooth CDN for the files that should be cached close to users.

Start for free View docs