Server-side rendering support for Closure Next components in Next.js applications.
npm install @closure-next/next// pages/index.tsx
import { withClosureNext } from '@closure-next/next';
import { MyComponent } from '../components/MyComponent';
function HomePage() {
return (
<div>
<ClosureComponent
component={MyComponent}
props={{
title: 'Server-rendered component'
}}
ssr={true}
/>
</div>
);
}
export default withClosureNext(HomePage, {
ssr: true,
hydration: 'progressive'
});// components/MyPage.tsx
import { ClosureComponent } from '@closure-next/next';
import { MyClosureComponent } from './MyClosureComponent';
export function MyPage() {
return (
<ClosureComponent
component={MyClosureComponent}
props={{
title: 'SSR Component'
}}
/>
);
}- 🔌 Plug-and-play integration
- 🖥️ Server-side rendering
- 💧 Progressive hydration
- ⚡️ Client-side fallback
- 🔄 Automatic cleanup
- 📦 TypeScript support
Higher-order component for Next.js pages.
-
ssr: Enable server-side rendering (default: true) -
hydration: Hydration strategy (default: 'progressive')- 'client-only': No SSR, client-side only
- 'server-first': SSR with client hydration
- 'progressive': Progressive hydration
React component for rendering Closure components.
-
component: Closure component class -
props: Component props -
ssr: Enable SSR for this instance (default: true)
Server-side renderer for Closure components.
Client-side hydration utility.
import type { Component } from '@closure-next/core';
import { withClosureNext, ClosureComponent } from '@closure-next/next';
interface MyComponentProps {
title: string;
}
class MyComponent extends Component {
// Implementation
}
function MyPage() {
return (
<ClosureComponent<MyComponent>
component={MyComponent}
props={{
title: 'Hello' // Type-checked
}}
/>
);
}
export default withClosureNext(MyPage);// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}// pages/_app.tsx
import type { AppProps } from 'next/app';
import { withClosureNext } from '@closure-next/next';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default withClosureNext(MyApp);withClosureNext(Page, {
ssr: false
});withClosureNext(Page, {
ssr: true,
hydration: 'server-first'
});withClosureNext(Page, {
ssr: true,
hydration: 'progressive'
});// next.config.js
import path from 'path';
export default {
webpack: (config) => {
// Add Closure Next support
config.resolve.alias['@closure-next'] = path.resolve(__dirname, 'node_modules/@closure-next');
return config;
}
};