feat: Initial commit

Author: joaopaulomoraes

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.vscode/settings.json

README.md

@@ -0,0 +1,45 @@
+# NextJS with Redux and Material-UI example
+
+A boilerplate NextJS with Redux and Material UI
+
+## Getting Started
+
+### Installing
+
+Cloning the project.
+```
+git https://github.com/joaopaulomoraes/nextjs-with-redux-and-material-ui.git nextjs-with-redux-and-material-ui
+```
+
+Access the project directory.
+```
+cd nextjs-with-redux-and-material-ui
+```
+
+Install dependencies.
+```
+yarn install
+```
+
+Serve with hot reload at http://localhost:3000.
+```
+yarn dev
+```
+
+## The idea behind the example
+
+In this example, we will display a counter that is initialized with a value of 0 and will be updated with each click. The first rendering is happening on the server, then the browser takes over. To illustrate this, the rendered counter will have a value of 1 when the app loads and a flag with the dispatch source will be displayed above the counter. From the next clicks that increment / decrement, the counter will receive its new value and the flag with the origin will be updated again with the origin of the dispatch.
+
+![](https://i.imgur.com/6YQqLiL.gif)
+
+Our page is located in `pages/index.js`, so it will map the `/` route. To get the initial data for rendering, we are implementing the `getInitialProps` static method, initializing the redux storage and dispatching the increment action, passing the isServer parameter to identify that the dispatch source is coming from the server. As the component is packaged with `next-redux-wrapper`, the component is automatically connected to Redux and packaged with the reagent-redux Provider`, which allows us to access the redux state immediately and send the storage to the child components for that they access the state when necessary.
+
+For security, it is recommended to wrap all pages, whether they use Redux or not, so you do not worry about all the child components anymore.
+
+The `withRedux` function accepts` makeStore` as the first argument, all other arguments are passed internally to the `react-redux connect ()` function. The `makeStore` function will receive the initialState as an argument and should return a new instance of redux store every time it is called, no memoisation is required here. See the [full example] (https://github.com/kirill-konshin/next-redux-wrapper#usage) in the Next Redux Wrapper repository. And there's another package [https://github.com/huzidaha/next-connect-redux] available with similar features.
+
+To pass the initial state from the server to the client, we pass as a prop called `initialState`, so it is available when the client takes control.
+
+The trick here to support the universal redux is to separate the cases for the client and the server. When we are on the server, we want to create a new store every time, otherwise the data from the different users will be mixed. If we are on the customer, we always want to use the same store. This is what we do in `store.js`
+
+Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render second, when you navigate between pages.

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "with-redux-wrapper-and-material-ui",
+  "version": "1.0.0",
+  "dependencies": {
+    "@material-ui/core": "3.7.1",
+    "@material-ui/icons": "3.0.2",
+    "jss": "9.8.7",
+    "next": "latest",
+    "next-redux-wrapper": "latest",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-jss": "8.6.1",
+    "react-redux": "6.0.0",
+    "redux": "4.0.1",
+    "redux-thunk": "2.3.0"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "devDependencies": {
+    "redux-devtools-extension": "2.13.7"
+  },
+  "license": "ISC"
+}

pages/_app.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import App, { Container } from 'next/app'
+import Head from 'next/head'
+import withRedux from 'next-redux-wrapper'
+import { Provider } from 'react-redux'
+import { MuiThemeProvider } from '@material-ui/core/styles'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import JssProvider from 'react-jss/lib/JssProvider'
+import store from '../src/store'
+import getPageContext from '../src/utils/getPageContext'
+
+const _App = withRedux(store)(
+  class _App extends App {
+    pageContext = getPageContext()
+
+    static async getInitialProps ({ Component, ctx }) {
+      return {
+        pageProps: Component.getInitialProps
+          ? await Component.getInitialProps(ctx)
+          : {}
+      }
+    }
+
+    componentDidMount () {
+      const jssStyles = document.querySelector('#jss-server-side')
+      if (jssStyles && jssStyles.parentNode) {
+        jssStyles.parentNode.removeChild(jssStyles)
+      }
+    }
+
+    render () {
+      const {
+        Component,
+        pageProps,
+        store
+      } = this.props
+
+      return (
+        <Container>
+          <Head>
+            <title>NextJS - With Redux and Material UI</title>
+          </Head>
+          <JssProvider
+            registry={this.pageContext.sheetsRegistry}
+            generateClassName={this.pageContext.generateClassName}
+          >
+            <MuiThemeProvider
+              theme={this.pageContext.theme}
+              sheetsManager={this.pageContext.sheetsManager}
+            >
+              <CssBaseline />
+              <Provider store={store}>
+                <Component
+                  pageContext={this.pageContext}
+                  {...pageProps}
+                />
+              </Provider>
+            </MuiThemeProvider>
+          </JssProvider>
+        </Container>
+      )
+    }
+  }
+)
+
+export default _App

pages/_document.js

@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import Document, { Head, Main, NextScript } from 'next/document'
+import flush from 'styled-jsx/server'
+
+class _Document extends Document {
+  render () {
+    const { pageContext } = this.props
+
+    return (
+      <html lang='pt-BR' dir='ltr'>
+        <Head>
+          <meta charSet='utf-8' />
+          <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
+          <meta name='theme-color' content={pageContext ? pageContext.theme.palette.primary.main : null} />
+          <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
+
+_Document.getInitialProps = ctx => {
+  let pageContext
+
+  const page = ctx.renderPage(Component => {
+    const WrappedComponent = props => {
+      pageContext = props.pageContext
+      return <Component {...props} />
+    }
+
+    WrappedComponent.propTypes = {
+      pageContext: PropTypes.object.isRequired
+    }
+
+    return WrappedComponent
+  })
+
+  let css
+
+  if (pageContext) {
+    css = pageContext.sheetsRegistry.toString()
+  }
+
+  return {
+    ...page,
+    pageContext,
+
+    styles: (
+      <Fragment>
+        <style
+          id='jss-server-side'
+          dangerouslySetInnerHTML={{ __html: css }}
+        />
+        {flush() || null}
+      </Fragment>
+    )
+  }
+}
+
+export default _Document

pages/index.js

@@ -0,0 +1,93 @@
+import React, { PureComponent } from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Card from '@material-ui/core/Card'
+import CardActions from '@material-ui/core/CardActions'
+import CardContent from '@material-ui/core/CardContent'
+import Fab from '@material-ui/core/Fab'
+import AddIcon from '@material-ui/icons/Add'
+import RemoveIcon from '@material-ui/icons/Remove'
+import Typography from '@material-ui/core/Typography'
+import { connect } from 'react-redux'
+import { increment, decrement } from '../src/actions'
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap'
+  },
+  title: {
+    fontSize: 14
+  }
+})
+
+class Index extends PureComponent {
+  static getInitialProps ({ store, isServer }) {
+    store.dispatch(increment(isServer))
+
+    return { isServer }
+  }
+
+  handleIncrement = () => {
+    this.props.increment()
+  }
+
+  handleDecrement = () => {
+    this.props.decrement()
+  }
+
+  render () {
+    const { classes, counter } = this.props
+
+    return (
+      <Card className={classes.card}>
+        <CardContent>
+          <Typography
+            className={classes.title}
+            color='textSecondary'
+            gutterBottom
+          >
+            Dispatched from <b>{counter.from}</b>
+          </Typography>
+          <Typography variant='h3' component='h2'>
+            {counter.value}
+          </Typography>
+          <Typography color='textSecondary'>{counter.action}</Typography>
+        </CardContent>
+        <CardActions>
+          <Fab
+            variant='round'
+            color='primary'
+            size='small'
+            onClick={this.handleIncrement}
+          >
+            <AddIcon />
+          </Fab>
+          <Fab
+            variant='round'
+            color='secondary'
+            size='small'
+            onClick={this.handleDecrement}
+          >
+            <RemoveIcon />
+          </Fab>
+        </CardActions>
+      </Card>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    counter: state
+  }
+}
+
+const mapDispatchToProps = dispatch => ({
+  increment: () => dispatch(increment()),
+  decrement: () => dispatch(decrement())
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(Index))

src/actions/index.js

@@ -0,0 +1,19 @@
+import { INCREMENT, DECREMENT } from '../constants'
+
+export const increment = (isServer) => {
+  return dispatch => {
+    dispatch({
+      type: INCREMENT,
+      from: isServer ? 'server' : 'client'
+    })
+  }
+}
+
+export const decrement = (isServer) => {
+  return dispatch => {
+    dispatch({
+      type: DECREMENT,
+      from: isServer ? 'server' : 'client'
+    })
+  }
+}

src/constants/index.js

@@ -0,0 +1,2 @@
+export const INCREMENT = 'INCREMENT'
+export const DECREMENT = 'DECREMENT'

src/reducers/index.js

@@ -0,0 +1,30 @@
+import { INCREMENT, DECREMENT } from '../constants'
+
+const initialState = {
+  value: 0,
+  action: null,
+  from: null
+}
+
+export const counter = (state = initialState, action) => {
+  switch (action.type) {
+    case INCREMENT:
+      return {
+        ...state,
+        value: state.value + 1,
+        action: 'increment',
+        from: action.from
+      }
+
+    case DECREMENT:
+      return {
+        ...state,
+        value: state.value - 1,
+        action: 'decrement',
+        from: action.from
+      }
+
+    default:
+      return state
+  }
+}

src/store/index.js

@@ -0,0 +1,14 @@
+import { createStore, applyMiddleware } from 'redux'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import thunk from 'redux-thunk'
+import { counter } from '../reducers'
+
+const store = initialState => {
+  return createStore(
+    counter,
+    initialState,
+    composeWithDevTools(applyMiddleware(thunk))
+  )
+}
+
+export default store