Closed2022/03/04にクローズ7

Next.jsでReact Hook Formおためし

リポジトリ作って以下のコマンド打ってNext.jsのプロジェクトを作成する
TSで書きたいので--typescriptを付ける

$ yarn create next-app --typescript

そうすると以下を聞かれるので、こうしておく

What is your project named?: .

完了してyarn devしてこの画面が出てくると成功🎉

vscodeで保存時にシュッと直してほしいのでeslintの設定もしておく

vscodeのsettings.jsonは以下に設定

"[typescriptreact]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },

以下のコマンドをターミナルに打つ

$ npx eslint --init

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now with npm? · Yes

package-lock.jsonを削除したのち以下コマンド実行

$ yarn install

.eslintrc.jsを以下に変更しておく

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    // reactインポート不要
    'plugin:react/jsx-runtime',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  settings: {
    // js, jsx, ts, tsxの拡張子でimportするのを許可
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    // js, jsx, ts, tsxの拡張子でjsxの構文を許容
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    // 配列のindexをkeyに使用することを許可する
    'react/no-array-index-key': 'off',
    // propsにスプレッド演算子で渡すことを許可する
    'react/jsx-props-no-spreading': 'off',
    // コンポーネントをアロー関数で定義することを許可する
    'react/function-component-definition': [2, {
      namedComponents: 'arrow-function',
    }],

    // import時に拡張子が不要
    'import/extensions': [0, 'never'],

    // for文の中だけ++を許可する
    'no-plusplus': [2, { allowForLoopAfterthoughts: true }],
  },
};

スタイル自前で当てるのは面倒なのでChakraUI使っていい感じに表示されるようにする

$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

ルートにthemeディレクトリを作ってindex.tsを作り以下を書く
今回は不要そうだけどthemeを拡張したくなった時のために書いてるだけ

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme();

export default theme;

pages/_app.tsx に以下を設定

import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

以下をターミナルに打ちreact-hook-formを導入する

$ yarn add react-hook-form

pages/index.tsxを以下に変更しておく
ここに試したいformのUIを書いていこうと思う

import type { NextPage } from 'next';
import { Box } from '@chakra-ui/react';

const Home: NextPage = () => (
  <Box>
    あああ
  </Box>
);

export default Home;

このスクラップは2022/03/04にクローズされました