Use NiralScript in Next.js

The @niral/next adapter wraps your Next.js config so .nrs files compile through the NiralScript compiler, then you consume them as Client Components with @niral/react. It targets the App Router and works in both next dev and next build.

A compiled .nrs module is reactive client logic, so the loader marks its output "use client". The module naturally sits on the Client Component side of the App Router boundary; your Server Components can import and render the wrapping client component normally.

Install

Requires Node.js 22 or newer, Next.js 14 or newer and React 18 or newer.

npm install @niral/next @niral/react

Wrap your Next config

// next.config.mjs
import { withNiral } from "@niral/next";

export default withNiral({
  reactStrictMode: true,
});

withNiral registers the webpack loader for .nrs and mirrors it in Turbopack rules, and preserves any existing webpack hook and experimental options in your config. Pass compiler options as the second argument:

export default withNiral({ reactStrictMode: true }, { strictTypes: true });

Create a Client Component

The component that uses useNrs must be a Client Component — add the "use client" directive at the top:

// app/counter.jsx
"use client";
import * as counter from "./counter.nrs";
import { useNrs } from "@niral/react";

export default function Counter({ initial = 0 }) {
  const c = useNrs(counter, { initial });
  return (
    <button onClick={c.increment}>
      {c.count} (x2 = {c.doubled})
    </button>
  );
}

Render it from a Server Component

A Server Component (the default in the App Router) can import and render the client component directly:

// app/page.jsx
import Counter from "./counter";

export default function Page() {
  return (
    <main>
      <h1>NiralScript in Next.js</h1>
      <Counter initial={5} />
    </main>
  );
}

Run the app:

npm run dev      # development
npm run build    # production build

Notes

• Keep the "use client" directive on files that call useNrs; the .nrs

module itself is already compiled as client code.

• withNiral sets Turbopack rules under experimental.turbo so it stays quiet

on Next 14. On Next 15 you can additionally opt into the stable top-level turbopack.rules key if you prefer.

• Compile errors (type errors, reactive cycles) surface as build errors with the

original .nrs file, line and column.

Use in React | Use with Vite | NiralScript language