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