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

npm i @junobuild/nextjs-plugin -D

yarn

yarn add @junobuild/nextjs-plugin -D

pnpm

pnpm add @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);

The following variables are available:

Environment variable	Value
NEXT_PUBLIC_SATELLITE_ID	Satellite ID from Juno config (per mode)
NEXT_PUBLIC_ORBITER_ID	undefined in development, Orbiter ID from Juno config.
NEXT_PUBLIC_INTERNET_IDENTITY_ID	rdmx6-jaaaa-aaaaa-aaadq-cai
NEXT_PUBLIC_ICP_LEDGER_ID	ryjl3-tyaaa-aaaaa-aaaba-cai
NEXT_PUBLIC_ICP_INDEX_ID	qhbym-qaaaa-aaaaa-aaafq-cai
NEXT_PUBLIC_NNS_GOVERNANCE_ID	rrkah-fqaaa-aaaaa-aaaaq-cai
NEXT_PUBLIC_CMC_ID	rkp4c-7iaaa-aaaaa-aaaca-cai
NEXT_PUBLIC_REGISTRY_ID	rwlgt-iiaaa-aaaaa-aaaaa-cai
NEXT_PUBLIC_CYCLES_LEDGER_ID	um5iw-rqaaa-aaaaq-qaaba-cai
NEXT_PUBLIC_CYCLES_INDEX_ID	ul4oc-4iaaa-aaaaq-qaabq-cai
NEXT_PUBLIC_SNS_WASM_ID	qaa6y-5yaaa-aaaaa-aaafa-cai
NEXT_PUBLIC_NNS_DAPP_ID	qoctq-giaaa-aaaaa-aaaea-cai
NEXT_PUBLIC_CONTAINER	Container URL (emulator or custom); undefined by default in production

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

npm i @junobuild/vite-plugin -D

yarn

yarn add @junobuild/vite-plugin -D

pnpm

pnpm add @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);

The following variables are available:

Environment variable	Value
VITE_SATELLITE_ID	Satellite ID from Juno config (per mode)
VITE_ORBITER_ID	undefined in development, Orbiter ID from Juno config.
VITE_INTERNET_IDENTITY_ID	rdmx6-jaaaa-aaaaa-aaadq-cai
VITE_ICP_LEDGER_ID	ryjl3-tyaaa-aaaaa-aaaba-cai
VITE_ICP_INDEX_ID	qhbym-qaaaa-aaaaa-aaafq-cai
VITE_NNS_GOVERNANCE_ID	rrkah-fqaaa-aaaaa-aaaaq-cai
VITE_CMC_ID	rkp4c-7iaaa-aaaaa-aaaca-cai
VITE_REGISTRY_ID	rwlgt-iiaaa-aaaaa-aaaaa-cai
VITE_CYCLES_LEDGER_ID	um5iw-rqaaa-aaaaq-qaaba-cai
VITE_CYCLES_INDEX_ID	ul4oc-4iaaa-aaaaq-qaabq-cai
VITE_SNS_WASM_ID	qaa6y-5yaaa-aaaaa-aaafa-cai
VITE_NNS_DAPP_ID	qoctq-giaaa-aaaaa-aaaea-cai
VITE_PUBLIC_CONTAINER	Container URL (emulator or custom); undefined by default in production

More information

Discover additional options in the library's README.