Nextjsの構築メモ

npx create-next-app --ts

~~yarnで作られてまうな〜npmがいいなあ〜~~

これでいけた

npx create-next-app --ts --use-npm

こばしゅん

プロジェクト作るのはこれだけか。

こばしゅん

tailwindcssいれてみる

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

実装をsrcディレクトリに移動したいので、下記のように書く

tailwind.config.js

module.exports = {
  purge: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2022.5 更新

purgeオプションはcontentオプションに名前変わったっぽい

公式では @tailwindみたいに書かれてるけど、lintに怒られるのでこっち

/* ./styles/globals.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

こばしゅん

eslint

デフォルトにプラスα

npm install -D eslint-config-airbnb @typescript-eslint/eslint-plugin @typescript-eslint/parser

こばしゅん

.eslintrc

{
  "extends": [
    "next/core-web-vitals", 
    "airbnb", 
    "airbnb/hooks", 
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "react/jsx-filename-extension": [ // tsxファイルでJSXを使うため
      "error",
      { "extensions": [".jsx", ".tsx"] }
    ],
    "react/react-in-jsx-scope": 0, // Reactの宣言もういらんやろ
    
    "react/jsx-props-no-spreading": 0, // propsをスプレッドで許可したいため
    "@typescript-eslint/explicit-module-boundary-types": 0 // return typesは指定せずに型推論でいけそうな気がするため
  }
}

最初のふたつはrecommendでカバーされてほしいなあ。

こばしゅん

env、環境変数の型定義

ルートに以下を配置

globals.d.ts

declare namespace NodeJS {
    interface ProcessEnv {
      readonly NODE_ENV: 'development' | 'production' | 'test';

      /** サイト名 */
      readonly NEXT_PUBLIC_SITE_NAME: string;
    }
  }

こんな感じで補完されるようになる、うれしい

参考
https://maku.blog/p/r8iry9g/

こばしゅん

これ大事

tailwind.config.js

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */

module.exports = {
 ...
}

こばしゅん

tailwindcssのビルドではまった

purgeのスコープをしっかり指定しないとプロダクションビルドではまる

こばしゅん

Push時に型チェック走らせたい

npm install --save-dev husky

pkgに以下追加&実行

package.json

"scripts": {
...
    "check-types": "tsc --noEmit",
    "prepare": "husky install"
  },

下記実行

npx husky add .husky/pre-push "npm run check-types"

これでPush時に型チェックが走ってエラーだしてくれる〜！わーい

参考

https://github.com/typicode/husky