day28. web3.0のためのフロントエンド開発 – 開発環境のセットアップ（フロントエンド） –

% npx create-next-app@13.1.6
Need to install the following packages:
  create-next-app@13.1.6
Ok to proceed? (y) y
✔ What is your project named? … nextjs-funding
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Would you like to use experimental `app/` directory with this project? … No
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/simokawa/code/token-village/nextjs-funding.

Using npm.

Installing dependencies:
...

% cd nextjs-funding
% npm install moralis react-moralis web3uikit moralis-v1 ethers
...
% npm install -D prettier tailwindcss postcss autoprefixer
...
% cp ../funding/.prettierrc .
% cp ../funding/.prettierignore .
% mkdir components
% mkdir constants

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [ // 以下の2行を追加する
        "./pages/**/*.{js,tx,jsx,tsx}", 
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

.
├── .next/*             # Next.jsのビルドプロセスの結果が格納される（随時、npm run buildで生成される）
├── components/*        # Reactのコンポーネントを定義するファイル（これらのコンポーネントがpages/index.tsx等で利用される）
    ├── Fund.tsx        # 投資家の情報や投資・引き出しのアクションなどを定義した部分（index.tsxで呼び出して使う）
    └── Header.tsx      # ページのヘッダー部分を定義する（index.tsxで呼び出して使う）
├── constants/*         # 定数を格納するための場所で、コントラクトに関連するような情報を保存する
    ├── abi.json        # 操作したい対象のコントラクトのインターフェースが定義されているファイル（例えば、fund関数を呼ぶ際のインプット、アウトプットの形式などが定義されている）
    ├── contractAddress # デプロイされたコントラクトのアドレス（chain ID毎）を保持する
    └── index.ts        # 上記の2つの値を持つ変数をexportしているファイル（利用するファイルでimportして使うためのもの）
├── node_modules/*      # npmパッケージがインストールされる場所
├── out/*               # 静的サイトとしてエクスポートされた際に生成される（next.config.jsにexportの設定がされている場合、npm run buildで作成される）
├── pages/*             # このディレクトリー内のファイルは自動的にルートとして認識される
    ├── api/*           # APIルートを作成するためのディレクトリー。このディレクトリー内に定義されたファイルは、APIエンドポイントとして扱われ、サーバーサイドのロジックを実行できる場所となります
    ├── _app.tsx        # 全ページ共通のレイアウトやステートを持つ場合に利用するAppコンポーネント
    └── index.tsx       # リクエストされたパスが、"/"（ルート）だった際に表示されるページ（トップページ）
├── public/*            # 静的ファイルをこのディレクトリに配置するとルートディレクトリから直接アクセスできるようになります
├── styles/*            # スタイルシートや CSS モジュールを格納する
    └── globals.css     # グローバルスタイルを定義するためのCSSファイル。アプリケーション全体に適用したい場合。
├── .gitignore          # git（ソース管理ツール）で管理対象外のファイルを定義するファイル
├── .prettierrc         # prettierの設定ファイル
├── .prettierignore     # prettierで対象外とするファイルを定義するファイル
├── next.config.js      # Next.js のカスタム設定を行うためのファイル
├── package-lock.json   # Node.jsが依存関係に関する詳細情報として保持しているファイル
├── package.json        # プロジェクトのnpm(yarn)設定ファイル
├── postcss.config.js   # PostCssの設定ファイル
├── tailwind.config.js  # Tailwindcssの設定ファイル
└── tsconfig.json       # Typescriptのコンパイル設定を保持するファイル