Next.jsプロジェクトの初期セットアップ

1. Node.jsのインストール

Next.jsを使用するには、Node.jsがインストールされている必要があります。もしまだインストールしていない場合、公式サイトからインストールしてください。

Node.js公式サイト

インストール後、以下のコマンドでNode.jsとnpmのバージョンを確認します。

node -v
npm -v

2. Next.jsプロジェクトの作成

次に、Next.jsの新しいプロジェクトを作成します。ターミナルで以下のコマンドを実行します。

npx create-next-app@latest sonotecture

実行後、以下のような質問が表示されます。

TypeScriptの使用: Yesを選択（型安全な開発のため）
ESLintの設定: Yesを選択（コード品質を維持するため）
src/ディレクトリの使用: Yes（ディレクトリ構成の明確化）
Tailwind CSS: No（今回はシンプルに進めます）
app/ディレクトリ（Next.js 13）: Yes
インストール後にnpm installを実行: Yes

3. 必要な依存パッケージのインストール

次に、音楽生成とビジュアライゼーションのために必要なライブラリをインストールします。

npm install tone three

4. ESLintとPrettierの設定

コードフォーマットを整えるため、ESLintとPrettierを導入します。

npm install --save-dev eslint-config-prettier eslint-plugin-prettier prettier

次に、.eslintrc.jsonファイルを編集し、Prettierとの統合を追加します。

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

.prettierrcファイルを作成し、Prettierの設定を定義します。

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

5. プロジェクトの確認

設定が完了したら、以下のコマンドでプロジェクトを起動して、正しくセットアップされているか確認します。

npm run dev

ブラウザでhttp://localhost:3000にアクセスし、Next.jsのスタートページが表示されるはずです。

6. プロジェクトをGitHubにプッシュ

最後に、プロジェクトをGitHubにプッシュして、リポジトリに反映します。

リポジトリをGitHub上で作成。
以下のコマンドを使って、ローカルリポジトリを初期化し、GitHubリポジトリにプッシュ。

git init
git add .
git commit -m "Initial Next.js project setup"
git remote add origin https://github.com/your-username/sonotecture.git
git branch -M main
git push -u origin main

これでNext.jsプロジェクトの初期セットアップが完了しました！次のステップや質問があれば教えてくださいね。

20m61 / Sonotecture