Zenn
🐾

【自分用メモ】Next.js環境構築(TS)

2022/11/11に公開
Next.js
TypeScript
idea

0.前提条件

【エディタ】VScode
　　拡張機能: ESlint,Prettier,PostCSS Language Support,Tail CSS IntelliSence
【パッケージ管理ツール】yarn

1.プロジェクトスタート

ディレクトリを作成したい場所で以下のコマンドを実行する
フォルダの名前を何にするか聞かれるので、好きな名前を入力する

yarn create next-app --typescript

作成したディレクトリへ移動して以下のコマンドを実行すると、localhost:3000が立ち上がる
.nextフォルダが作成される

yarn dev

2.ディレクトリ構成

  • srcフォルダとcomponentフォルダを作成する
  • srcフォルダにcomponentとpagesとstyleフォルダを入れる
  • rootフォルダ
    tsconfig.jsonに以下の記述を追加することで、ファイルがある場所がrootフォルダになる
jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

3.拡張子

.eslintrc.jsonの拡張子を.jsに変更する

4.VScodeの設定

  • Default Formatter
    Prettie -Code formatterを選択する
  • Format On Save
    チェックを入れる
  • Import Module Specifier
    non-relativeを選択する
  • Editor: Quick Suggestion
    stringsをonにする
  • その他もろもろ
setting.js
{
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "css.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

5.必要なものを追加

  1. ESlint + Prettier
    JavaScriptなどのための静的検証ツールとコードフォーマッター
  2. Mantain + TailwindCSS
    UIコンポーネントライブラリとCSSフレームワーク
  3. SWR
    データ取得のためのReact Hooksライブラリ
    ターミナルでyarn add swrを実行する
  4. supabase
    オープンソースのBaas(Backend-as-a-Service)と呼ばれるサービスのひとつ
    ターミナルでyarn add @supabase/supabase-jsを実行する

Discussion