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

• 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

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

• Redux DevTools

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

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

npm run dev

npm run build
npm start

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