Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/treetips/typescript-nextjs-redux-toolkit-material-ui-example
TypeScript v3.8, Next.js v9, Redux Toolkit, Material-UI v4, react-hooks, SSR live demo
https://github.com/treetips/typescript-nextjs-redux-toolkit-material-ui-example
createasyncthunk createentityadapter material-ui nextjs react-hooks redux redux-toolkit ssr typescript
Last synced: about 2 months ago
JSON representation
TypeScript v3.8, Next.js v9, Redux Toolkit, Material-UI v4, react-hooks, SSR live demo
- Host: GitHub
- URL: https://github.com/treetips/typescript-nextjs-redux-toolkit-material-ui-example
- Owner: treetips
- Created: 2020-04-25T17:42:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:24:48.000Z (over 1 year ago)
- Last Synced: 2024-04-20T18:48:38.157Z (5 months ago)
- Topics: createasyncthunk, createentityadapter, material-ui, nextjs, react-hooks, redux, redux-toolkit, ssr, typescript
- Language: TypeScript
- Homepage: https://typescript-nextjs-redux-toolkit-material-ui-example.now.sh/
- Size: 1.78 MB
- Stars: 81
- Watchers: 5
- Forks: 29
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- Awesome-NextJs - typescript-nextjs-redux-toolkit-material-ui-example - [demo](https://typescript-nextjs-redux-toolkit-material-ui-example.vercel.app/) (Nextjs Projects)
README
# 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](https://typescript-nextjs-redux-toolkit-material-ui-example.now.sh/)
## Features
- [Visual Studio Code](https://code.visualstudio.com/)
- [Typescript](https://www.typescriptlang.org/)
- [Next.js](https://nextjs.org/)
- [Material-UI](https://material-ui.com/)
- [material-table](https://material-table.com/#/)
- [Redux](https://redux.js.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [createSlice](https://redux-toolkit.js.org/api/createSlice)
- [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk)
- [createEntityAdapter](https://redux-toolkit.js.org/api/createEntityAdapter)
- [createSelector](https://redux-toolkit.js.org/api/createSelector)
- It using most of the major features of the redux toolkit !!
- [ESLint](https://eslint.org/)
## Requirement
- [Google Chrome](https://www.google.com/intl/ja_ALL/chrome/)
- [Visual Studio Code](https://code.visualstudio.com/)
- TypeScript v3.7 or higher( [require Optional Chaining](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) )
## Install Google Chrome addon
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja)
## Recommended VSCode addons
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
## Usage
### Download and install
```bash
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
```bash
npm run dev
```
### Build and start production express server
```bash
npm run build
npm start
```
## Related repository
* [typescript-nextjs-redux-material-ui-example](https://github.com/treetips/typescript-nextjs-redux-material-ui-example)