Next.js&Redux-saga(1)-プロジェクト設定

プロジェクトの設定

プロジェクトcreate-next-app生成

yarn create react-app next_prac --template typescript

redux-toolkitおよびredux-sagaインストール

yarn add @reduxjs/toolkit react-redux redux redux-saga @types/react-redux next-redux-saga next-redux-wrapper typesafe-actions axios

eslint&きれいな取り付け

yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
yarn add eslint-config-airbnb-base eslint-plugin-import -D

.eslintrc.json

{
  "plugins": ["prettier"],
  "extends": [
    "airbnb", 
    "plugin:prettier/recommended", 
    "next/core-web-vitals"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

アプリケーション

typescript eslint

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --D
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

vscode設定-macベース
vsコードにファイルを保存するたびにコードが自動的に変更されるように設定します.
commad+をクリックしてワークスペースに入り、設定します.json作成後設定ファイル

{
    "editor.formatOnSave": false,
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true 
    }
}

Postcss & Tailwindcss

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

インストールと設定ファイルを作成した後、pagesフォルダのapp.次のコードをtsxに追加

import 'tailwindcss/tailwind.css';

json-serverを使用して

の簡単なapiに必要なデータを要求します.jsonファイル

の生成

{
  "boards": [
    {
      "title": "qwe",
      "name": "zxc",
      "comment": "asd",
      "id": 18
    },
    {
      "title": "qweqwe",
      "name": "zxc",
      "comment": "asd",
      "id": 21
    },
    {
      "title": "qasdasd",
      "name": "zxczxc",
      "comment": "qwe",
      "id": 24
    },
    {
      "title": "qew",
      "name": "asdsad",
      "comment": "qweewq",
      "id": 27
    },
    {
      "title": "게시판",
      "name": "게시판",
      "comment": "게시판",
      "id": 28
    }
  ]
}

nextjsサーバは3000ポートに設定されているため、サーバは4000ポートで実行されます.

npx json-server ./data.json --port 4000

その後、http://localhost:4000/board道。であればCRUD機能を使用することができる.
準備ができました.

yarn dev

コマンドnextjs localhost:3000で実行