Deployment

@adminlte/react is a plain ESM component library — it ships no build of its own to deploy. You build and deploy your app with whatever toolchain you use: Next.js (SSR or static export) or Vite (SPA). The notes below cover the AdminLTE-specific bits for each.

Next.js — server-rendered (default)

The standard App Router build. Most of the library renders on the server; only interactive parts hydrate:

npm run build   # next build
npm start       # next start

Deploy to any Node host or platform that runs Next.js (Vercel, your own server, a container). Make sure your root layout imports @adminlte/react/css and loads the Bootstrap JS bundle and Bootstrap Icons — see Installation.

Next.js — static export

For a fully static, host-anywhere build (e.g. Cloudflare Pages, S3, GitHub Pages), use the App Router's static export. The live demo at adminlte.io/themes/next-react is generated exactly this way:

// next.config.mjs
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
}
export default nextConfig
next build   # writes static HTML/CSS/JS to ./out

With a static export there is no Next.js server, so the client router can't resolve links under a sub-path deploy. If you host under a sub-path (e.g. /themes/next-react), fall back to plain <a> navigation in your linkComponent adapter for those URLs, and set assetPrefix so assets resolve correctly.

Vite / plain React (SPA)

The presentational components work in a non-Next React app too. Because next is an optional peer, the router-dependent features degrade: sidebar active-state and client-side menu navigation rely on next/navigation, so in a Vite SPA wire those up yourself (or use plain <a> links). Build as usual:

npm run build   # vite build → ./dist
npm run preview

Import @adminlte/react/css in your entry file and include Bootstrap's JS bundle and Icons.

Production checklist

  • Import @adminlte/react/css once, before your own overrides.
  • Load Bootstrap 5.3's JS bundle (dropdowns, modals, toasts, carousel, offcanvas) and Bootstrap Icons.
  • Install only the optional plugin peers you actually use (charts, datatable, editor, date/select pickers, maps) — they tree-shake out otherwise.
  • Set a sensible initialColorMode; the persisted lte-theme choice takes over on the client.
  • Provide a linkComponent adapter for client-side navigation (and the sub-path caveat above for static exports).

The library is tree-shakeable: it's published as ESM with sideEffects scoped to the stylesheet, so unused components are dropped from your bundle. Charts, maps, the datatable, the editor and the advanced inputs are loaded via dynamic import(), keeping them out of the initial bundle entirely.

AdminLTE 4 · React port Edit on GitHub