Repository files navigation

Note: we recommend using@effector/next package.

A HOCs that brings Effector and Next.js together

npm install effector-next

or yarn

yarn add effector-next

effector-next requireseffector,effector-react to be installed

effector/babel-plugin is necessary if you do not want to manually name the units

1. To load the initial state on the server, you must attachwithFork wrapper to your_document component

   pages/_document.jsx

   importDocumentfrom"next/document";import{withFork}from"effector-next";constenhance=withFork({debug:false});exportdefaultenhance(Document);

2. To get the initial state on the client and drop it into the application, you must attachwithHydrate wrapper to your_app component

   pages/_app.jsx

   import{withHydrate}from"effector-next";importAppfrom"next/app";constenhance=withHydrate();exportdefaultenhance(App);

3. To bind events/stores on the server to the scope, add aliases fromeffector-react toeffector-react/ssr innext.config.js

   next.config.js

   const{ withEffectorReactAliases}=require("effector-next/tools");constenhance=withEffectorReactAliases();module.exports=enhance({});

4. Replace imports from"effector" to"effector-next"

   - import { createEvent, forward } from "effector"+ import { createEvent, forward } from "effector-next"

5. Connect theeffector/babel-plugin

   .babelrc

   {"presets": ["next/babel"],"plugins": ["effector/babel-plugin"]}

   If you are usingeffector version > 21.3.0, you also need to configure the babel plugin:

   {"presets": ["next/babel"],"plugins": ["effector/babel-plugin", {"importName": ["effector-next"] }]}

6. Configure what event will be triggered when the page is requested from the server usingwithStart

   pages/index.js

   importReactfrom"react";import{withStart}from"effector-next";import{useStore}from"effector-react";import{pageLoaded}from"../model";constenhance=withStart(pageLoaded);functionHomePage(){return(<div><h1>Hello World</h1></div>);}exportdefaultenhance(HomePage);

1. Declare our model

   models/index.js

   import{forward,createEvent,createStore,createEffect}from"effector-next";exportconstpageLoaded=createEvent();exportconstbuttonClicked=createEvent();consteffect=createEffect({handler(name){returnPromise.resolve({ name});},});exportconst$data=createStore(null);$data.on(effect.done,(_,{ result})=>result);forward({from:pageLoaded.map(()=>"nameFromPageLoaded"),to:effect,});forward({from:buttonClicked.map(()=>"nameFromButtonClicked"),to:effect,});

2. Connect the page to the store (all units must be wrapped in hooks - this is necessary in order to associate units with scope on the server)

   pages/index.jsx

   importReactfrom"react";import{useStore,useEvent}from"effector-react";import{$data,buttonClicked}from"../models";exportdefaultfunctionHomePage(){constdata=useStore($data);consthandleClick=useEvent(buttonClicked);return(<div><h1>HomePage</h1><h2>Store state:{JSON.stringify({ data})}</h2><buttononClick={handleClick}>click to change store state</button></div>);}

3. Bind an event that will be called on the server when the page is requested

   pages/index.jsx

   import React from "react";import { useStore, useEvent } from "effector-react";+import { withStart } from "effector-next";-import { $data, buttonClicked } from "../models";+import { $data, pageLoaded, buttonClicked } from "../models";+const enhance = withStart(pageLoaded);-export default function HomePage() {+function HomePage() {  const data = useStore($data);  const handleClick = useEvent(buttonClicked);  return (    <div>      <h1>HomePage</h1>      <h2>Store state: {JSON.stringify({ data })}</h2>      <button onClick={handleClick}>click to change store state</button>    </div>  );}+export default enhance(HomePage);

ThewithFork accepts a config object as a parameter:

• debug (optional, boolean) : enable debug logging
• serializeIgnore (optional, array) : stores whose values ​​should not be sent to the client after serialization

When the unit passed towithStart is called, the object will be passed as a payload:

• req : incoming request
• res : serever response
• cookies : parsed cookies
• pathname : path section ofURL
• query : query string section ofURL parsed as an object.

1. Check out thedraft release.
2. All PRs should have correct labels and useful titles. You canreview available labels here.
3. Update labels for PRs and titles, nextmanually run the release drafter action to regenerate the draft release.
4. Review the new version and press "Publish"
5. If required check "Create discussion for this release"