スキルアップを始める

Next.jsの新規インストール手順-Part1(プロジェクトフォルダ作成)

Vercel(ヴァーセル)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

Next.jsはReactアプリケーションのための人気のあるフレームワークです。以下はNext.jsのセットアップ手順の基本的なガイドです。

Node.jsのインストール

Node.jsのインストール: Next.jsを使うには、まずNode.jsとnpm(Node.jsのパッケージマネージャ)をインストールする必要があります。公式ウェブサイトからダウンロードできます。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

新しいプロジェクトフォルダ作成

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

npx create-next-app my-nextjs-app

my-nextjs-appの部分はプロジェクトの名前です。任意の名前を使用できます。

プロジェクトディレクトリに移動

プロジェクトディレクトリに移動: 作成されたプロジェクトディレクトリに移動します。

cd my-nextjs-app

Next.jsのインストール

プロジェクトフォルダ内で以下のコマンドを実行して、必要な依存関係をインストールします。

npm install --save next react react-dom

プロジェクトの実行

プロジェクトの実行: 以下のコマンドを実行して、プロジェクトをローカルで実行します。

npm run dev 

これにより、開発サーバーが起動し、ブラウザで http://localhost:3000 にアクセスするとアプリケーションが表示されるはずです。

まとめ

もし、これらの手順を試しても問題が解決しない場合は、プロジェクトのフォルダ構造やファイル内容に誤りがないか、特に package.json ファイルの内容を確認してみてください。

以上の手順で、開発サーバーが起動し、ブラウザで http://localhost:3000 にアクセスするとアプリケーションが表示されるはずです。

つづく。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら