Zenn
🐾

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

2022/07/24に公開
Next.js
idea

0.前提条件

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

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

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

yarn create next-app

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

yarn dev
ディレクトリ構成
.
├── .next
│   └── cache...
├── node_modules
│   └── @babel...
├── pages
│   ├── api
│   │　  └── hello.js
│   ├── _app.js
│   └── index.js
├── public
│   └── favicon.ico...
├── styles
│   ├── globals.css
│   └── Home.module.css
├── eslint.json
├── next.config.js
├── package.json
└── yarn.lock

2.ディレクトリ構成

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

3.拡張子

React関係の.jsファイルの拡張子を.jsxに変更する
.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