@webring-kit/next
v0.1.1
Published
Next.js helpers for Webring Kit.
Readme
@webring-kit/next
Next.js helpers for Webring Kit.
This package is a small integration layer for using Webring Kit in Next.js applications. It keeps the browser-only Web Component loading explicit so that Server Components do not accidentally evaluate HTMLElement, customElements, or other browser-only APIs.
Install
pnpm add @webring-kit/next @webring-kit/elementnpm install @webring-kit/next @webring-kit/elementNext.js, React, and React DOM are peer dependencies and must be provided by the consuming app.
Recommended Client Component pattern
"use client";
import { useEffect } from "react";
export function WebringClient() {
useEffect(() => {
void import("@webring-kit/element");
}, []);
return (
<webring-nav
src="/rings/example.json"
site="https://alice.example.com"
random="true"
/>
);
}Then use it from a page or layout:
import { WebringClient } from "./webring-client";
export default function Page() {
return (
<main>
<h1>My site</h1>
<WebringClient />
</main>
);
}Script helper pattern
If this package exposes a script helper in your version, use it from a layout to load the browser bundle after the page becomes interactive.
import { WebringScript } from "@webring-kit/next";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<WebringScript />
</body>
</html>
);
}SSR warning
Do not import @webring-kit/element from a Next.js Server Component. Load it from a Client Component, dynamic import, or script helper.
Related packages
@webring-kit/elementfor browser custom elements.@webring-kit/reactfor React wrappers.@webring-kit/corefor non-UI logic.