Skip to main content

Plugins

Juno provides various plugins to simplify your development workflow. Each plugin automatically loads values from your juno.config file into your build environment, so you can call initSatellite() and initOrbiter() without extra config.

Next.js Plugin​

Use this plugin to load Juno configuration into your Next.js build with zero manual setup.

Installation​

Add it to your dev dependencies with:

npm i @junobuild/nextjs-plugin -D

Usage​

In your Next.js config file — whether it's next.config.js, next.config.ts, next.config.mjs or else — wrap your configuration with withJuno to automatically load Juno settings:

next.config.js
import { withJuno } from "@junobuild/nextjs-plugin";

// withJuno wraps your Next.js config and injects values from juno.config
export default withJuno();

Options​

The plugin supports the following options:

Passing Next.js Options​

You can pass additional Next.js configuration options using the nextConfig field.

The plugin will always ensure output: "export" is set for static export.

next.config.js
import { withJuno } from "@junobuild/nextjs-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Example: add your own Next.js config here
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en"
  },
  env: {
    CUSTOM_VAR: "my-value"
  }
};

// Juno will merge this with output: "export" automatically
export default withJuno({ nextConfig });

In other words, if you want to include additional Next.js configuration (e.g. i18n, env etc.), just define them in your nextConfig object and pass it to withJuno.

Container​

You can use the container option to:

  • Provide a custom container URL (e.g. for an emulator running on a specific port), or
  • Set it to false to disable local development behavior entirely.
next.config.js
import { withJuno } from "@junobuild/nextjs-plugin";

export default withJuno({ juno: { container: false } });

Environment Variables​

The plugin injects environment variables derived from your juno.config file. You can use these variables in your app, which is especially helpful if you’ve specified a custom prefix other than NEXT_PUBLIC_.

console.log(process.env.NEXT_PUBLIC_SATELLITE_ID);

More information​

Discover additional information in the library's README.

Vite Plugin​

Use this plugin to integrate Juno configuration into your Vite build process automatically.

Installation​

Add it to your dev dependencies with:

npm i @junobuild/vite-plugin -D

Usage​

Add the plugin to your Vite configuration — whether you're using TypeScript or JavaScript — to automatically load Juno settings:

vite.config.js
import juno from "@junobuild/vite-plugin";

export default defineConfig({
  // Automatically injects values from juno.config for the build
  plugins: [juno()]
});

Options​

You can use the container option to:

  • Provide a custom container URL (e.g. for an emulator running on a specific port), or
  • Set it to false to disable local development behavior entirely.
vite.config.js
import juno from "@junobuild/vite-plugin";

export default defineConfig({
  plugins: [
    juno({
      container: false
    })
  ]
});

Environment Variables​

The plugin injects environment variables derived from your juno.config file. You can use these variables in your app, which is especially helpful if you’ve specified a prefix other than the default, such as VITE_ or PUBLIC_.

console.log(process.env.VITE_SATELLITE_ID);

More information​

Discover additional options in the library's README.