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

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #golang #machine-learning #deep-learning #linux #macos #java #nodejs #kubernetes #awesome-list #security

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

(★ 81)

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

typescript-nextjs-redux-toolkit-material-ui-example 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)

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

typescript-nextjs-redux-toolkit-material-ui-example 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

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

typescript-nextjs-redux-toolkit-material-ui-example 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README