treetips/typescript-nextjs-redux-toolkit-material-ui-example

TypeScript v3.8, Next.js v9, Redux Toolkit, Material-UI v4, react-hooks, SSR live demo

typescript-nextjs-redux-toolkit-material-ui-example

This is a sample for server-side rendering using TypeScript , Next.js , Redux Toolkit , and Material-UI .

I also used the latest features such as createSlice , createAsyncThunk , and createEntityAdapter .

VSCode , prettier and ESLint provide real-time formatting, syntax checking and organizing of unused imports.

これは、 TypeScript , Next.js , Redux Toolkit , Material-UI を使った サーバーサイドレンダリング に対応したサンプルです。

createSlice ・ createAsyncThunk ・ createEntityAdapter といった最新機能も使ってみました。

VSCode と prettier と ESLint によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。

Live demo

live demo

Features

• Visual Studio Code
• Typescript
• Next.js
• Material-UI
• material-table
• Redux
• Redux Toolkit
  • createSlice
  • createAsyncThunk
  • createEntityAdapter
  • createSelector
  • It using most of the major features of the redux toolkit !!
• ESLint

Requirement

• Google Chrome
• Visual Studio Code
• TypeScript v3.7 or higher( require Optional Chaining )

Install Google Chrome addon

• Redux DevTools

Recommended VSCode addons

• EditorConfig for VS Code
• Prettier - Code formatter
• ESLint

Usage

Download and install

git clone https://github.com/treetips/typescript-nextjs-redux-toolkit-material-ui-example.git
cd typescript-nextjs-redux-toolkit-material-ui-example
npm i

Start local

npm run dev

Build and start production express server

npm run build
npm start

Related repository

• typescript-nextjs-redux-material-ui-example

typescript-nextjs-redux-toolkit-material-ui-example's Issues

Update libs?

Hi - this is very cool, thanks. Can you update it with the latest libs?

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.10.0",
    "@reduxjs/toolkit": "^1.4.0",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "material-table": "^1.69.1",
    "next": "^9.5.5",
    "next-redux-wrapper": "^6.0.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@types/next-redux-wrapper": "^3.0.0",
    "@types/node": "^14.11.8",
    "@types/react": "^16.9.52",
    "@types/react-dom": "^16.9.8",
    "@types/react-jss": "^10.0.0",
    "@types/react-redux": "^7.1.9",
    "@types/redux": "^3.6.0",
    "@types/styled-jsx": "^2.2.8",
    "@typescript-eslint/eslint-plugin": "^4.4.1",
    "@typescript-eslint/parser": "^4.4.1",
    "dotenv-webpack": "^3.0.0",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.4",
    "prettier": "^2.1.2",
    "typescript": "^4.0.3"
  }

/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.withRedux().
TypeError: Cannot read property 'getState' of undefined
    at Function.getInitialProps (B:\dev\sites\typescript-nextjs-redux-toolkit-material-ui-example\.next\server\pages\_document.js:1020:31)