Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/myxogastria0808/next_environment
https://github.com/myxogastria0808/next_environment
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/myxogastria0808/next_environment
- Owner: Myxogastria0808
- Created: 2023-11-30T13:24:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-30T14:31:57.000Z (about 1 year ago)
- Last Synced: 2023-11-30T15:35:30.840Z (about 1 year ago)
- Language: TypeScript
- Size: 113 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Setup
## 参考サイト URL
[https://zenn.dev/brachio\_takumi/articles/a8fecd8b1b2742](https://zenn.dev/brachio\_takumi/articles/a8fecd8b1b2742)
```bash
npx create-next-app@latest --tsyarn
wsl rm -rf package-lock.json
yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add --dev eslint-plugin-unused-imports
yarn add --dev prettier eslint-config-prettier
yarn add --dev husky lint-staged
npx husky install
yarn install
npx husky set .husky/pre-commit "npx lint-staged"
wsl touch .eslintrc.js
wsl rm -rf .eslintrc.json
wsl touch .eslintignore
wsl touch .prettierrc
wsl touch .prettierignore```
## `.eslintrc.js`
```javascript
module.exports = {
root: true,
extends: [
"plugin:@typescript-eslint/recommended", //Typescriptのエラーを無視させないためのpackageの反映
"next/core-web-vitals", //デフォルトの設定
"plugin:tailwindcss/recommended", //TailwindにESLintをかけるpackageの反映
"prettier", //Prettierの反映
],
plugins: ["unused-imports"],
parser: "@typescript-eslint/parser",
parserOptions: {
sourceType: "module", //moduleかscriptを指定 moduleにすることで、import文 export文 が利用できる。
project: "./tsconfig.json", // TypeScriptのLint時に参照するconfigファイルを指定 (tsconfigRootDirからの相対パス)
tsconfigRootDir: __dirname, //tsconfigRootDirはプロジェクトルートの絶対パスを指定する
},
rules: {
//以下の設定で、Typescriptのルールを増やしている
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unsafe-call": "error",
"@typescript-eslint/no-unsafe-member-access": "error",
"@typescript-eslint/no-unsafe-return": "error",
"unused-imports/no-unused-imports-ts": "warn",
//以下の設定で、import分の順番にルールを持してみやすくする
"import/order": [
"error",
{
groups: [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type",
],
pathGroups: [
{
pattern: "{react,react-dom/**,react-router-dom}",
group: "builtin",
position: "before",
},
],
pathGroupsExcludedImportTypes: ["builtin"],
alphabetize: {
order: "asc",
},
},
],
},
};```
## `.eslintignore`
```
node_modules
.next
out
public
.prettierrc.js
.eslintrc.js
tailwind.config.js
next.config.js
postcss.config.js```
## `.prettierrc`
```json
{
"printWidth": 120,
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "es5",
"semi": true
}
```## `.prettierignore`
```
node_modules
.next
dist
out
public/```
## `package.json`
```json
"scripts": {
"prepare": "husky install",
"dev": "next dev",
"build": "next build",
"start": "next start",
"format": "prettier --write \"./**/*.{js, ts, tsx, jsx}\"",
"lint-fix": "prettier --write \"./**/*.{js, ts, tsx, jsx}\" && eslint --fix --ext .jsx,.js,.tsx,.ts .",
"lint": "prettier --check \"./**/*.{js, ts, tsx, jsx}\" && eslint --ext .jsx,.js,.tsx,.ts ."
},
"lint-staged": {
"*.{js, ts, jsx, tsx}": [
"yarn prettier --write \"./**/*.{js, ts, tsx, jsx}\"",
"yarn prettier --check \"./**/*.{js, ts, tsx, jsx}\"",
"yarn eslint --fix --ext .jsx,.js,.tsx,.ts ."
]
},
```***
## Next.jsのプロジェクト作成
```bash
npx create-next-app@latest --ts
``````bash
√ What is your project named? ... next-setup
√ Would you like to use ESLint? ... No / Yes #Yes
√ Would you like to use Tailwind CSS? ... No / Yes #Yes
√ Would you like to use `src/` directory? ... No / Yes #Yes
√ Would you like to use App Router? (recommended) ... No / Yes #Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes #No
```## yarnでpackage管理するための操作
```bash
yarn
wsl rm -rf package-lock.json
```## ESLintについて
デフォルトでは、`next/core-web-vitals` を使用することになっている。
ESLint プラグインの推奨ルールセットはすべて eslint-config-next で使用される。
### Core Web Vitalsとは
Google の Core Web Vitals は、ウェブページのパフォーマンスを測定するための主要な指標のセット
### TypeScriptのエラーを通さないためのESLintの拡張package
```bash
yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
```### 未使用のimport文を削除するESLintの拡張package
```bash
yarn add --dev eslint-plugin-unused-imports
```### ESLint + Tailwind関連のpackage
```bash
yarn add --dev eslint-plugin-tailwindcss
```### Prettier関連のpackage
```bash
yarn add --dev prettier eslint-config-prettier
```## `.eslintrc.js`
```javascript
module.exports = {
root: true,
extends: [
"plugin:@typescript-eslint/recommended", //Typescriptのエラーを無視させないためのpackageの反映
"next/core-web-vitals", //デフォルトの設定
"plugin:tailwindcss/recommended", //TailwindにESLintをかけるpackageの反映
"prettier", //Prettierの反映
],
plugins: ["unused-imports"],
parser: "@typescript-eslint/parser",
parserOptions: {
sourceType: "module", //moduleかscriptを指定 moduleにすることで、import文 export文 が利用できる。
project: "./tsconfig.json", // TypeScriptのLint時に参照するconfigファイルを指定 (tsconfigRootDirからの相対パス)
tsconfigRootDir: __dirname, //tsconfigRootDirはプロジェクトルートの絶対パスを指定する
},
rules: {
//以下の設定で、Typescriptのルールを増やしている
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unsafe-call": "error",
"@typescript-eslint/no-unsafe-member-access": "error",
"@typescript-eslint/no-unsafe-return": "error",
"unused-imports/no-unused-imports-ts": "warn",
//以下の設定で、import分の順番にルールを持してみやすくする
"import/order": [
"error",
{
groups: [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type",
],
pathGroups: [
{
pattern: "{react,react-dom/**,react-router-dom}",
group: "builtin",
position: "before",
},
],
pathGroupsExcludedImportTypes: ["builtin"],
alphabetize: {
order: "asc",
},
},
],
},
};```
## `.eslintignore`
ESLintにかけたくないファイルやディレクトリを記入
```
node_modules
.next
out
public
.prettierrc.js
.eslintrc.js
tailwind.config.js
next.config.js
postcss.config.js```
## `.prettierrc`
```json
{
"printWidth": 120,
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "es5",
"semi": true
}
```## `.prettierignore`
Prettierにかけたくないファイルやディレクトリを記入
```
node_modules
.next
dist
out
public/```
## husky + lint-staged
### huskyとlint-stagedのinstallとセットアップ
```bash
yarn add --dev husky lint-staged
npx husky install
yarn install
```### pre-commit時に実行するlint-stagedを呼び出す
```bash
npx husky set .husky/pre-commit "npx lint-staged"
```## `package.json`
```json
"scripts": {
"prepare": "husky install",
"dev": "next dev",
"build": "next build",
"start": "next start",
"format": "prettier --write \"./**/*.{js, ts, tsx, jsx}\"",
"lint-fix": "prettier --write \"./**/*.{js, ts, tsx, jsx}\" && eslint --fix --ext .jsx,.js,.tsx,.ts .",
"lint": "prettier --check \"./**/*.{js, ts, tsx, jsx}\" && eslint --ext .jsx,.js,.tsx,.ts ."
},
"lint-staged": {
"*.{js, ts, jsx, tsx}": [
"yarn prettier --write \"./**/*.{js, ts, tsx, jsx}\"",
"yarn prettier --check \"./**/*.{js, ts, tsx, jsx}\"",
"yarn eslint --fix --ext .jsx,.js,.tsx,.ts ."
]
},
```