Skip to content

Development Guide

Jump to bottom
nejiko edited this page Apr 7, 2024 · 4 revisions

Next.js アプリ開発

環境構築

  1. Node.js のインストール
    https://nodejs.org/ja/

    node --version
npm install -g npm
npm --version

  2. Corepack有効化

    corepack enable

新規プロジェクト作成

workspace % npx create-next-app@latest
Need to install the following packages:
  create-next-app@13.4.9
Ok to proceed? (y) y
✔ What is your project named? … next-minesweeper
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … Yes

既存プロジェクトの開発環境初期化

  1. リポジトリをクローン

    git clone https://github.com/nejiko96/next-minesweeper.git

  2. 依存パッケージの初期化

    cd next-minesweeper
npm install
# or
yarn

開発の流れ

  1. アプリ起動

    npm run dev
# or
yarn dev

    サーバが起動して
    http://localhost:3000/
    といった URL が表示されるのでブラウザから開くとアプリが動かせる

  2. 起動した状態のままソースを追加・変更すると自動でブラウザに反映される

  3. 停止
    Ctrl+C

  4. ビルド

    npm run build
# or
yarn build

    .next フォルダにビルド結果が生成される

  5. デプロイ

    1. VercelがGitHubのソース更新を検知して勝手にデプロイする
    2. Vercelにサインアップしたらいきなりリポジトリを選択させられて自動連携しはじめた
    3. チームで使うとお金を取られるので、その時には自分でGitHub Actionsの設定をしたほうがよい

VSCode の設定

eslint (JavaScript コードチェッカー)

  1. コードが最新の TypeScript のお作法に沿って書かれているかチェックしてくれる

  2. プロジェクト作成時の質問で「Would you like to use ESLint?」にYesと答えると
    eslint がプロジェクトに追加されて設定が行われた状態になっている

  3. VSCode の拡張機能で「ESLint」をインストール

    1. エディタでソースを開くとコードチェックエラーが「問題」タブに出てくるようになる

    2. .vscode/settings.json に以下の設定をするとソース保存時に自動で修正される

      {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

Prettier （コードフォーマッター）

コードをいい感じに整形してくれる

  1. パッケージ追加

    • prettier : Prettier本体
    • eslint-config-prettier : eslint のフォーマットルールを一部無効化する
    npm install --save-dev prettier eslint-config-prettier
# or
yarn add --dev prettier eslint-config-prettier

  2. .prettierrc.json を作成

    {
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false
}

  3. .eslintrc.json の設定追加

    {
  "extends": ["next/core-web-vitals", "prettier"]
}

  4. VSCode の拡張機能で「Prettier」をインストール

  5. .vscode/settings.json の設定追加

    // ESLintのフォーマット機能を無効化
"eslint.format.enable": false,

// 保存時にPrettierによる整形を行う
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

Tailwind CSS (CSS ライブラリ)

  1. プロジェクト作成時の質問で「Would you like to use Tailwind CSS? 」にYesと答えると
    プロジェクトに追加されて設定が行われた状態になっている

  2. VSCode の拡張機能「Tailwind CSS IntelliSense」を入れておくと便利

  3. eslint-plugin-tailwindcss の導入

    • class の並び順をソートしてくれる ずらずら並ぶのはそのまま

    • パッケージ追加

      npm install --save-dev eslint-plugin-tailwindcss
# or
yarn add --dev eslint-plugin-tailwindcss

    • eslintrc.json に設定追加

      "extends": [
  "next/core-web-vitals",
  "prettier",
  "plugin:tailwindcss/recommended"
],

  4. .vscode/settings.json の設定追加

    "files.associations": {
  "*.css": "tailwindcss"
}
Clone this wiki locally