Zenn
🔥

Next.js周りのセットアップ ~Next.jsプロジェクト作成~

2025/01/14に公開
Next.js
Node.js
TypeScript
Web
tech

今回扱う技術

  • Next.js
  • TypeScript
  • ESLint
  • Prettier
  • Prisma
  • NextAuth
  • TailWindCSS

Next.jsの作成

https://qiita.com/Itsuki54/items/bb41982fd1c9d6e81b17

前回は核となるnodeのインストールを行いました

今回はcreate-next-appについて解説していきたいと思います

create-next-appとは

create-next-appは、Next.jsプロジェクトを迅速かつ簡単にセットアップするための公式CLIツールです。このツールを使用すると、数分以内にプロジェクトの基本的な構成が整ったNext.jsアプリケーションを作成できます。手動でのセットアップや初期設定の手間を省き、すぐに開発に取り掛かることができます。

主な特徴

  1. 迅速なセットアップ: create-next-appは、必要な依存関係やディレクトリ構造を自動的に作成します。これにより、開発者はすぐにコーディングを始めることができます。
  2. TypeScriptサポート: プロジェクト作成時にTypeScriptを選択できるため、型安全な開発が可能です。
  3. Zero-Config: 初期設定がほとんど不要で、ベストプラクティスに基づいた設定が自動的に適用されます。
  4. 柔軟なカスタマイズ: プロジェクトの成長に合わせて設定を簡単にカスタマイズできます。

使用方法

  1. プロジェクトの作成:
    以下のコマンドを実行して、新しいNext.jsプロジェクトを作成します。プロジェクト名をmy-next-appとしますが、お好みの名前に変更できます。
    npx create-next-app@latest my-next-app

以下に、npx create-next-app@latest my-next-app コマンドの各設定項目について解説します。

コマンドの分解

npx create-next-app@latest my-next-app

  • npx: npxは、npmパッケージを実行するためのコマンドです。これにより、ローカルにインストールされていないパッケージを一時的に実行できます。これを使用することで、create-next-appのようなCLIツールをグローバルにインストールせずに使用できます。

  • create-next-app: これは、Next.jsの公式CLIツールです。新しいNext.jsプロジェクトをセットアップするためのテンプレートを提供します。@latestは、最新バージョンのパッケージを指定するためのタグです。

  • my-next-app: これは、作成するプロジェクトの名前です。この名前のディレクトリが作成され、その中にNext.jsプロジェクトがセットアップされます。

設定項目の解説

  1. Project name:

    • 説明: プロジェクトの名前を指定します。これにより、プロジェクトディレクトリが作成されます。
    • 使用例: my-next-app

  2. TypeScript:

    • 説明: TypeScriptを使用するかどうかを選択します。TypeScriptは、JavaScriptに型定義を追加する言語で、コードの品質と可読性を向上させます。
    • 選択肢: Yes または No
    • デフォルト: No (ただし、--typescriptフラグを使用すると自動的にYesになります)

  3. ESLint:

    • 説明: ESLintを設定するかどうかを選択します。ESLintは、JavaScript/TypeScriptコードの静的解析ツールで、コード品質を保つための規則を適用します。
    • 選択肢: Yes または No
    • デフォルト: Yes

  4. Tailwind CSS:

    • 説明: Tailwind CSSを設定するかどうかを選択します。Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、迅速なスタイリングが可能です。
    • 選択肢: Yes または No
    • デフォルト: No

  5. srcディレクトリ:

    • 説明: ソースコードを格納するためのsrcディレクトリを使用するかどうかを選択します。srcディレクトリは、コードの構造を整理するためによく使用されます。
    • 選択肢: Yes または No
    • デフォルト: No

  6. import alias:

    • 説明: モジュールのインポート時に使用するエイリアスを設定するかどうかを選択します。これにより、長い相対パスを短縮してインポートできます。
    • 選択肢: Yes または No
    • デフォルト: No

例: 詳細な設定

以下に、各設定項目を詳しく設定する例を示します。

npx create-next-app@latest my-next-app

コマンドを実行すると、対話形式で以下のようなプロンプトが表示されます。

  1. What is your project named? (my-next-app)

    • プロジェクトの名前を入力します。デフォルトは my-next-app です。

  2. Would you like to use TypeScript with this project? (y/N)

    • TypeScriptを使用するかどうかを選択します。y と入力して Enter キーを押すと使用します。

  3. Would you like to use ESLint with this project? (y/N)

    • ESLintを使用するかどうかを選択します。y と入力して Enter キーを押すと使用します。

  4. Would you like to use Tailwind CSS with this project? (y/N)

    • Tailwind CSSを使用するかどうかを選択します。y と入力して Enter キーを押すと使用します。

  5. Would you like to use src/ directory with this project? (y/N)

    • srcディレクトリを使用するかどうかを選択します。y と入力して Enter キーを押すと使用します。

  6. Would you like to use experimental app/ directory with this project? (y/N)

    • appディレクトリを使用するかどうかを選択します。y と入力して Enter キーを押すと使用します。

  7. What import alias would you like configured? (default is @/*)

    • インポートエイリアスを設定します。デフォルトは @/* です。

以上が、npx create-next-app@latest my-next-app コマンドの各設定項目の詳細な解説です。

セットアップ

npx create-next-app my-next-app

:::note
今回はすべてyesで行います
:::

GitHubで編集を提案

Discussion