- Install
@module-federation/nextjs-mf.
yarn add @module-federation/nextjs-mf- Add resolutions to
package.json:
"resolutions": {| // based on https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo | |
| // this object holds the TW variable name we will have in our theme. The value are a pair for [CSSVariable, value] | |
| // we use only the RBG vaules without the actual "rgb(0, 0, 0)" decalration for Tailwind to use in it's functions. | |
| const customColors = { | |
| 'demo': ['var(--demo)', '64, 180, 229'], | |
| 'another-tw-name': ['var(--another-tw-name)', '102, 195, 234'], | |
| }; | |
| /** |
| const io = require('socket.io-client'); | |
| const http = require('http'); | |
| const ioBack = require('socket.io'); | |
| let socket; | |
| let httpServer; | |
| let httpServerAddr; | |
| let ioServer; | |
| /** |
| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions |
@module-federation/nextjs-mf.yarn add @module-federation/nextjs-mfpackage.json: "resolutions": {| @observer | |
| export default class extends React.Component { | |
| constructor() { ... } // for brevity | |
| // define the data we want to "watch" | |
| @observable chosenPhrase = this.randomPhrases[0]; | |
| @observable counter = 0; | |
| // define an "action" -> we are saying what that we want to change a peice of "watched" data | |
| @action |
| import styled from 'styled-components'; | |
| // some overly styled button | |
| const MyButton = styled.button` | |
| background: #3d94f6; | |
| background-image: linear-gradient(to bottom, #3d94f6, #1e62d0); | |
| border-radius: 20px; | |
| color: #ffffff; | |
| font-family: Open Sans; |
| import React from 'react'; | |
| import { observable, action } from 'mobx'; | |
| import { observer } from 'mobx-react'; | |
| @observer | |
| export default class extends React.Component { | |
| constructor() { | |
| super(); | |
| this.randomPhrases = [ |
| export default class Article extends Component { | |
| // notice that it's an async function | |
| static async getInitialProps () { | |
| // fetch data on the server and parse it to JSON | |
| const res = await | |
| fetch('http://localhost:3000/wp-json/wp/v2/articles/1316999'); | |
| const json = await res.json(); |
| const arbitraryDataList = [{ | |
| rootId: 'false' | |
| }, | |
| { | |
| root: { | |
| field1: 'val1' | |
| } | |
| }, | |
| { | |
| root: { |