Приведи пример использования Effector в Next

Ответ

Effector отлично интегрируется с Next.js, особенно с App Router. Вот пример:

// store.ts
import { createStore, createEvent } from 'effector';

export const increment = createEvent();
export const $count = createStore(0)
  .on(increment, (state) => state + 1);

// app/layout.tsx
import { Provider } from 'effector-react';
import { $count, increment } from './store';

export default function RootLayout({ children }) {
  return (
    <Provider>
      <html>
        <body>{children}</body>
      </html>
    </Provider>
  );
}

// app/page.tsx
'use client';
import { useStore } from 'effector-react';
import { $count, increment } from './store';

export default function Home() {
  const count = useStore($count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => increment()}>Increment</button>
    </div>
  );
}

Ключевые моменты:

Используем Provider в корневом layout
Для клиентских компонентов добавляем 'use client'
Состояние сохраняется при навигации
Для SSR можно использовать fork и serialize