参考にさせていただいた神記事。おおまかパクリです。
2020 年師走における Next.js をベースとしたフロントエンドの環境構築
$ mkdir next-project
Next.js のプロジェクトをセットアップ
Next.js で v9.1 から src に pages などを入れることができるらしいンゴ。
のちのち複雑になる可能性を考えて src ディレクトリへ移動しておくことにする。
$ yarn create next-app .
$ mkdir src
$ mv pages/ src/pages
$ styles/ src/styles
これで tsconfig.json の中身と next-env.d.ts が新規作成される
$ touch tsconfig.json
$ yarn add --dev typescript @types/react @types/node
$ yarn dev
$ find src/pages -name "_app.js" -or -name "index.js" | sed 'p;s/.js$/.tsx/' | xargs -n2 mv
$ find src/pages/api -name "*.js" | sed 'p;s/.js$/.ts/' | xargs -n2 mvフロンドエンドで API を作成する予定はないので削除!!!(デスノート:みかみ)
TypeScript の Type 置き場を作っておく
Document コンポーネント を使うと、初期状態だと自動で追加される html タグ, や body タグに変更を加えることができます。
$ touch src/pages/_document.jsx
コード参照
↓
追加した Document.tsx
src に pages ディレクトリなどを移動しましたので、src をベース URL に設定するよー。
TypeScript の設定にモジュールインポートのベース URL を追記。
tsconfig.json ↓
{
"compilerOptions": {
// ベース URL を追加
"baseUrl": "src"
}
}各コンポーネントのモジュールインポートの指定を、ベース URL 指定に変更するよー。
$ sed -i '' -e 's/..\/styles/styles/' src/pages/_app.tsx
$ sed -i '' -e 's/..\/styles/styles/' src/pages/index.tsxNext.js はデフォルトで CSS Modules に対応している。今回は取りあえす CSS Modules を採用する。
揺れ動く感情の中 CSS Module の採用を後押ししてくれた神記事 ↓
styled-components（CSS in JS）をやめた理由と、不完全な CSS Modules を愛する方法
$ yarn add -D sass
src/stylesディレクトリ内の CSS ファイルを SASS ファイルに変換するよー。
$ find src/styles -name "*.css" | sed 'p;s/.css$/.scss/' | xargs -n2 mv$ sed -i '' -e 's/\.css/\.scss/' src/pages/_app.tsx
$ sed -i '' -e 's/\.css/\.scss/' src/pages/index.tsx$ mkdir src/components
$ mkdir src/styles/layouts
$ touch src/styles/variables.scss
適宜ファイルのimportを変更してください。
参考記事 →Next.js に CSS Modules を導入する
styles/global.scss
- ここにグローバルに（アプリ全体で）読み込みたいスタイルを書く。
- _app.tsx で import styles/global.scss するだけで読み込み設定は完了。
styles/components
- コンポーネント用の.module.scss を入れてく
styles/layouts
- レイアウト用のコンポーネントは layouts ディレクトリに入れる
styles/variables.scss
- scss ファイルで使いまわしたい変数をここに入れる
ブラウザ間の誤差を吸収する為や、スタイルを追加しやすくする為に、デフォルト CSS はあります。
今回は、sanitize.cssを採用します。
$ yarn add -D sanitize.css
デフォルト CSS を全体に適応する為に、App コンポーネントで sanitize.css を読み込みます。
コードの静的解析と整形の為に、以下のツールを追加します。
$ yarn add -D prettier
$ touch .prettierrc.js
以下追加
module.exports = {
"semi": false,
"arrowParens": "always",
"singleQuote": true
)$ yarn add -D eslint eslint-plugin-react
$ yarn add -D eslint-config-prettier eslint-plugin-prettier
$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
$ touch .eslintrc.js
以下記述
module.exports = {
ignorePatterns: ['!.eslintrc.js', '!.prettierrc.js'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:prettier/recommended',
'prettier/@typescript-eslint',
],
plugins: ['@typescript-eslint', 'react'],
parser: '@typescript-eslint/parser',
env: {
browser: true,
node: true,
es6: true,
jest: true,
},
parserOptions: {
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
settings: {
react: {
version: 'detect',
},
},
rules: {
// 必要に応じてルールを追加
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
}Next.js の設定ファイルの先頭に eslint-disable を設定する。
/* eslint-disable
@typescript-eslint/no-var-requires
*/# ESLint のキャッシュファイルを追加
.eslintcachepackage.json
{
"scripts": {
"lint": "eslint --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore ."
}
}問題なく Lint が通るか確認します。
$ yarn lint
もし通らない場合は fix オプションをつけて yarn lint --fix と実行することで、整形可能なものに関しては自動整形することができます。
VSCode の設定ファイルを追加します。
$ mkdir .vscode
$ touch .vscode/settings.json
以下を設定することファイルの保存時に自動整形することができます。
settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}今回は Jest （Unit テスト）を採用
# Jest 関連モジュールをインストール
$ yarn add -D jest identity-obj-proxy
# Jest の TypeScript に関するモジュールをインストール
$ yarn add -D ts-jest @types/jest$ touch jest.config.js
module.exports = {
preset: 'ts-jest',
roots: ['<rootDir>/src'],
moduleNameMapper: {
// CSS モックをモックする設定
'\\.(css|scss)$': 'identity-obj-proxy',
// pages と components ディレクトリのエイリアスを設定（必要であれば他のディレクトリも追加）
'^(pages|components)/(.+)': '<rootDir>/src/$1/$2',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
globals: {
'ts-jest': {
tsconfig: {
jsx: 'react',
},
},
},
}テストを実行する為の NPM スクリプトを追記します。
package.json
{
"scripts": {
"test": "jest src/__tests__/.*/*.test.tsx?$"
}
}適当なテストを書いてみます。
$ mkdir src/__tests__
$ touch src/__tests__/Sample.test.tsxSmaple.test.tsx
/// <reference types="jest" />
import React from 'react'
import Home from 'pages/index'
it('Home ページコンポーネントが存在している', () => {
expect(Home).toBeTruthy()
})問題なくテストが動作しているか確認します。
$ yarn testエラーにならずに書いたテストをパスしていれば問題ないです。
リポジトリへのコミットやプッシュの際に、事前に Lint やテストを自動実行できるようにします。
これによりプロジェクトを健全に保つことができます。
lint-staged は Git のステージに上っているファイルだけを Lint の対象にすることができるツールです。
$ npx mrm lint-stagedlint-staged を実行する NPM スクリプトを追記します。
{
"scripts": {
"lint-staged": "lint-staged"
}
}https://www.youtube.com/watch?v=R35LJL6a-p0&t=1762s
husky はコミットやプッシュの前にテストなどを実行して、失敗したら止めることができる Git hooks を簡単に設定することがツールです。
$ yarn add -D husky@next$ yarn husky install
Git コマンド実行時に以下の処理を実行するようにします。
- コミット前にステージにあるファイルを対象に ESLint の実行
- プッシュ前にすべてのテストの実行
$ yarn husky add pre-commit "yarn lint-staged"
$ yarn husky add pre-push "yarn test"
$ touch .env.development
$ touch .env.production
Document コンポーネントのサイト URL に環境変数を設定します。
_document.tsx
class MyDocument extends Document implements MyDocumentInterface {
// 環境変数を追加
url = process.env.NEXT_PUBLIC_SITE_URL
}