Next.js 연동

Utilinent는 Next.js에서 React component로 동작합니다. 핵심 결정은 해당 file이 Client Component여야 하는지입니다.

Server-compatible rendering helper

Show, For, Repeat, Switch는 이미 준비된 data로 markup을 구성할 때 유용합니다.

import { For } from '@ilokesto/utilinent';

export default async function Page() {
  const posts = await getPosts();

  return (
    <For.ul each={posts} fallback={<li>No posts</li>}>
      {(post) => <li key={post.id}>{post.title}</li>}
    </For.ul>
  );
}

Client-only utility

Observer, Slacker, Mount, useIntersectionObserver, browser event, client state를 사용한다면 'use client'를 추가하세요.

'use client';

import { Slacker } from '@ilokesto/utilinent';

PluginManager entry는 등록된 proxy property가 render되기 전에 실행되는 코드에서 등록하세요.