effector
diff --git a/‎README.md
Copy file name to clipboard
+12-18Lines changed: 12 additions & 18 deletions b/‎README.md
Copy file name to clipboard
+12-18Lines changed: 12 additions & 18 deletions
diff --git a/‎package.json
Copy file name to clipboard
-1Lines changed: 0 additions & 1 deletion b/‎package.json
Copy file name to clipboard
-1Lines changed: 0 additions & 1 deletion
diff --git a/‎src/with-hydrate.tsx
Copy file name to clipboard
+17-3Lines changed: 17 additions & 3 deletions b/‎src/with-hydrate.tsx
Copy file name to clipboard
+17-3Lines changed: 17 additions & 3 deletions
diff --git a/‎tools/index.js
Copy file name to clipboard
-5Lines changed: 0 additions & 5 deletions b/‎tools/index.js
Copy file name to clipboard
-5Lines changed: 0 additions & 5 deletions
diff --git a/‎tools/with-effector-react-aliases.js
Copy file name to clipboard
-34Lines changed: 0 additions & 34 deletions b/‎tools/with-effector-react-aliases.js
Copy file name to clipboard
-34Lines changed: 0 additions & 34 deletions
@@ -2,6 +2,8 @@
 
 A HOCs that brings Effector and Next.js together
 
+[![npm version](https://badge.fury.io/js/effector-next.svg)](https://www.npmjs.com/package/effector-next)
+
 ## Installation
 
 ```bash
@@ -52,26 +54,18 @@ yarn add effector-next
 
    </details>
 
-3. To bind events/stores on the server to the scope, add aliases from `effector-react` to`effector-react/ssr` in `next.config.js`
-
-   <details>
-   <summary>next.config.js</summary>
-
-   ```js
-   const { withEffectoReactAliases } = require("effector-next/tools");
-
-   const enhance = withEffectoReactAliases();
+3. Replace imports from `"effector"` to `"effector-next"`
 
-   module.exports = enhance({});
+   ```diff
+   - import { createEvent, forward } from "effector"
+   + import { createEvent, forward } from "effector-next"
    ```
 
-   </details>
-
-4. Replace import from `"effector"` to `"effector-next"`
+4. Replace imports from `"effector-react"` to `"effector-react/ssr"`
 
    ```diff
-   - import { createEvent, forward } from "effector"
-   + import { createEvent, forward } from "effector-next"
+   - import { useEvent, useStore } from "effector-react"
+   + import { useEvent, useStore } from "effector-react/ssr"
    ```
 
 5. Connect the `effector/babel-plugin`
@@ -96,7 +90,7 @@ yarn add effector-next
    ```jsx
    import React from "react";
    import { withStart } from "effector-next";
-   import { useStore } from "effector-react";
+   import { useStore } from "effector-react/ssr";
 
    import { pageLoaded } from "../model";
 
@@ -158,7 +152,7 @@ yarn add effector-next
 
    ```jsx
    import React from "react";
-   import { useStore, useEvent } from "effector-react";
+   import { useStore, useEvent } from "effector-react/ssr";
 
    import { $data, buttonClicked } from "../models";
 
@@ -185,7 +179,7 @@ yarn add effector-next
 
    ```diff
    import React from "react";
-   import { useStore, useEvent } from "effector-react";
+   import { useStore, useEvent } from "effector-react/ssr";
    +import { withStart } from "effector-next";
 
    -import { $data, buttonClicked } from "../models";
 
@@ -7,7 +7,6 @@
   "types": "dist/index.d.ts",
   "files": [
     "!example",
-    "tools",
     "dist"
   ],
   "scripts": {
 
@@ -1,6 +1,7 @@
 import * as React from "react";
+import { fork, hydrate, Scope } from "effector/fork";
+import { Provider } from "effector-react/ssr";
 import NextApp, { AppProps } from "next/app";
-import { hydrate } from "effector/fork";
 
 import { domain } from "./domain";
 import { INITIAL_STATE_KEY } from "./lib";
@@ -11,11 +12,15 @@ declare global {
   }
 }
 
+interface AppState {
+  scope: Scope;
+}
+
 export function withHydrate() {
   const isServer = typeof window === "undefined";
 
   return (App: typeof NextApp) =>
-    class WithHydrateApp extends React.Component<AppProps> {
+    class WithHydrateApp extends React.Component<AppProps, AppState> {
       static origGetInitialProps = App.origGetInitialProps;
       static getInitialProps = App.getInitialProps;
 
@@ -25,10 +30,19 @@ export function withHydrate() {
         if (isServer) return;
 
         hydrate(domain, { values: window.__NEXT_DATA__[INITIAL_STATE_KEY] });
+
+        const scope = fork(domain);
+
+        this.state = { scope };
       }
 
       render() {
-        return <App {...this.props} />;
+        const app = <App {...this.props} />;
+
+        if (isServer) return app;
+
+        // eslint-disable-next-line react/destructuring-assignment
+        return <Provider value={this.state.scope}>{app}</Provider>;
       }
     };
 }