ホームページ >ウェブフロントエンド >jsチュートリアル >#ローカル システムに Next-React をセットアップします。

#ローカル システムに Next-React をセットアップします。

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-14 06:25:29358ブラウズ

#ow to setup Next-React on your local system.

npx create-next-app@latest コマンドを使用して React with Next.js をインストールするには、次の手順に従います。

1. Node.js がインストールされていることを確認します

Next.js プロジェクトを作成する前に、Node.js をシステムにインストールする必要があります。次のコマンドを実行して、インストールされているかどうかを確認します:

node -v

インストールしていない場合は、Node.js 公式 Web サイトからダウンロードしてインストールします。

2. ターミナルまたはコマンド プロンプトを開きます

Windows では、コマンド プロンプト または PowerShell を開きます。 macOS または Linux では、ターミナル を開きます。

3. プロジェクトを作成するフォルダーに移動します

cd コマンドを使用して、新しいプロジェクトを作成するフォルダーに移動します。例:

cd path/to/your/project/folder

4. npx create-next-app@latest コマンドを実行します

次に、次のコマンドを実行します:

npx create-next-app@latest
  • 新しい Next.js プロジェクトを構成するための質問が表示されます。
  • 質問と回答の例:
    • プロジェクトの名前は何ですか?: プロジェクト名を入力します (例: my-next-app)。
    • TypeScript を使用しますか?: 好みに応じて [はい] または [いいえ] を選択します。
    • ESLint を使用しますか?: lint を有効にするかどうかに応じて、[はい] または [いいえ] を選択します。
    • Tailwind CSS を使用しますか?: スタイル設定に Tailwind を使用する場合は、[はい] を選択します。
    • src/ ディレクトリを使用しますか?: [はい] または [いいえ] を選択します。
    • App Router を使用しますか?: 好みに応じて [はい] または [いいえ] を選択します。
    • デフォルトのインポート エイリアスをカスタマイズしますか?: [はい] または [いいえ] を選択します。

すべてのプロンプトに答えると、コマンドによって必要な依存関係がすべてインストールされ、プロジェクト ファイルが作成されます。

5. 新しいプロジェクト フォルダーに移動します

インストールが完了したら、新しい Next.js プロジェクトのフォルダーに移動します。

cd my-next-app

my-next-app をプロジェクトの実際の名前に置き換えます。

6. 開発サーバーを実行します

開発サーバーを起動して、新しい Next.js プロジェクトの動作を確認するには、次のコマンドを実行します。

npm run dev

デフォルトでは、プロジェクトは http://localhost:3000 でアクセスできます。

7. コードエディターでプロジェクトを開きます

VS Code などの任意のコード エディターでプロジェクト フォルダーを開きます:

code .

これで、新しい Next.js (React) プロジェクトが正常に作成され、設定されました!

以上が#ローカル システムに Next-React をセットアップします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。