- 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-mf
package.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: { |