Use Nuklē with React

Use the content client in server-rendered or browser code. A website API key can read only the website's enabled content and media, so treat that data as public when you embed the key in a client component.

Server-rendered content

This pattern works in React frameworks that support server components, server loaders, or server routes.

import { createNukleClient } from '@lazrus/nukle';

const nukle = createNukleClient({
  apiKey: process.env.NUKLE_API_KEY!,
});

export async function Hero() {
  const hero = await nukle.getSingleton<{
    title: string;
    subtitle: string;
  }>('hero');

  if (!hero) return null;

  return (
    <section>
      <h1>{hero.title}</h1>
      <p>{hero.subtitle}</p>
    </section>
  );
}

You can use the content client in a component marked 'use client' when all returned content and media are intended for visitors. The key cannot manage content, forms, or submissions.

Client-side form submission

The public form client is safe to use in an interactive component because its key is restricted to one form.

'use client';

import { createNukleFormClient } from '@lazrus/nukle';

const contact = createNukleFormClient({
  formKey: 'nukle_form_your_public_key',
});

export function ContactForm() {
  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const values = new FormData(event.currentTarget);

    await contact.submit({
      email: values.get('email'),
      message: values.get('message'),
    });
  }

  return <form onSubmit={onSubmit}>{/* Your fields go here. */}</form>;
}

Core accepts the submission only from the domain configured for that website in Studio.