NowLoading...
Next × Typesciprt ができるまでは…

Next × Typesciprt ができるまでは…

Next.js

Next.js

TypeScript

TypeScript

はじめに

Next × Typesciprtの環境構築を行なっていきましょう!!! 公式サイトはこちらから

環境構築の1歩目

まずは、Next × Typesciprtの環境を簡単に作れるコマンドを叩きましょう!

yarn create next-app --typescript

すると、以下のように聞かれるので、プロジェクト名を書きましょう!

wait is your oriject named?

プロジェクトの生成に成功したら、動くかどうかを確認してみましょう!

yarn dev

ちなみにts.config.jsonはこんな感じ!

ts.config.json
{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "jsxImportSource": "@emotion/react", "baseUrl": ".", "paths": { "~/*": ["./src/*"] } }, "exclude": ["./node_modules"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] }

環境構築の2歩目

▷emotionの導入

続いて、emotion(CSS-in-Jsのライブラリ)を導入してみましょう!

メリットとしては以下の3点です。

早速、インストールしていきましょう!

yarn add @emotion/react

▷emotionをよしなに書くためのパッケージも導入

しかし! このままでは/** @jsx jsx */を全ファイルの先頭に書かないといけないらしい🥺🥺

ので、次のパッケージも同時に導入しておきましょう。

// emotin V.11の場合 yarn add -D @emotion/babel-plugin

さらに、.babelrcを作り、以下のコードをコピペします。

.babelrc
{ "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"] }

環境構築の3歩目

より開発しやすくするためにESLintPrettier を導入しましょう!

まずはESLintから!

yarn add -D eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

導入が終わったら.eslintrc.jsonを作り、以下のコードをコピペします。

.eslintrc.json
{ "env": { "es6": true, "node": true, "browser": true }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2019, "ecmaFeatures": { "jsx": true }, "sourceType": "module" }, "settings": { "react": { "version": "detect" } }, "plugins": ["react-hooks", "react", "@typescript-eslint"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "prettier" ], "rules": { "react/prop-types": "off", "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn", "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off", "@typescript-eslint/ban-types": "off", "react/no-unescaped-entities": "off", "react/display-name": "off", "semi": "error", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "error", "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/array-type": [ "error", { "default": "array-simple" } ], "@typescript-eslint/naming-convention": [ "error", { "selector": ["class", "typeAlias", "enum"], "format": ["PascalCase"] }, { "selector": ["function", "method"], "format": ["camelCase"] }, { "selector": ["parameter"], "format": ["camelCase", "PascalCase"], "leadingUnderscore": "allow" }, { "selector": ["variable"], "format": ["camelCase", "PascalCase", "UPPER_CASE"] }, { "selector": "interface", "format": ["PascalCase"], "custom": { "regex": "^I[A-Z]", "match": false } } ] } }

続いてPrettier

yarn add -D eslint-config-prettier prettier

導入が終わったら.prettierrcを作り、以下のコードをコピペします。

.prettierrc
{ "singleQuote": false, "trailingComma": "none", "tabWidth": 2, "useTabs": false, "semi": true, "jsxSingleQuote": false, "arrowParens": "always", "bracketSpacing": true, "jsxBracketSameLine": false }
あいでん

あいでん

@8hsnnh550754g4w