以前、Next.jsは環境構築が容易で、試しやすいような記事を書きました
Next.jsの環境構築が容易だと言っても、つまずくことが多々あるかと思います
勉強したいとなったとしても、そもそも練習する環境がない！となったらやる気も削がれますよね？

なので、今回、環境構築が簡単なことをわかっていただくため、設定方法を案内したいと思います

環境構築に必要なもの

コードを記載するエディター（こちらでは、VSCodeを使用）
Node.js(今回のNext.jsはJavaScriptという言語を使うため)

VSCodeはコードのエディターでエンジニアがよく使っているものです
利用料もかからず、さまざまな言語で使用できるので、おすすめです
下記のサイトよりインストールができます

Node.jsはJavaScriptで使われているもので、開発でよく使われています
今後開発をしていくのであれば、インストールをおすすめします

Next.jsの設定

準備ができたら、早速Next.jsを使えるように設定しましょう

まず、どこにNext.jsのデータを入れるかを決めます
Next.jsではたくさんのファイルが自動的に作成されます
場所はどこでもいいのですが、管理しやすいところにフォルダを作成します

次にVSCodeがインストールできていたら、アイコンをクリックし、起動します
VSCodeの画面が出るので、さっき、作成したフォルダをVS Codeにおいてみてください（下記の画面のように、フォルダを置こうとしてみる）

すると、左にフォルダの名前が表示されると思います
この時、下記画面が出たら、Yes,I trust the authorsを選択してください

これは、VSCodeでフォルダを開ける際に、このフォルダを開けて大丈夫？の確認のため、表示されます
自分で作成したものなので、Yesで進めて問題ないです

次にVSCodeでターミナル（Macの場合）を開きます

Windowsも同じ形で、ファイルなどのバーの所にターミナルがあると思うので、こちらを押して、下にウィンドウが開くことを確認してください

上記のような画面が開いたらここで作業を行なっていきます
この表示されている、％の左側はフォルダの設置場所が載っています
人によって設定場所が異なるため、名称が異なります

ここで、下記コマンドを入力します

npx create-next-app@14

@の後ろで、Next.jsのバージョンを指定できます
例えば、14などの数字を入れるとNext.js14系のインストールを行います
latestを入れると最新版が入ります

次に下記内容が出てくるので、答えていきます

なんというプロジェクト名にするか？（下記の場合、my-appで設定）
What is your project named? my-app

TypeScriptを使いますか？（TypeScriptはよく使われるのでYesを選択）
Would you like to use TypeScript? No / Yes

ESLintを使いますか？（こちらはコードを綺麗にするため、Yesを選択します）
Would you like to use ESLint? No / Yes

TailwindCSSを使いますか？（デザインを簡潔にできるので、Yesを選択します）
Would you like to use Tailwind CSS? No / Yes

’src’ディレクトリにcodeを配置しますか？（こちらもYesを選択します）
Would you like your code inside a `src/` directory? No / Yes

App Routerを使いますか？（これを使った方が開発が簡単に思えるのでYesを選択します）
Would you like to use App Router? (recommended) No / Yes

インポートエイリアスのカスタマイズをしますか？　（こちらはデフォルトでNoなのでそのままNoを選択）
Would you like to customize the import alias (`@/*` by default)? No / Yes

途中errorなどの表示が出なければ、これで設定は完了です
インストールが行われるので、入力できるまで少し待ちます

入力できたら、
下記を入力します

cd my-app
上記画像では最初の質問でmy-appとしているので、cd の後にmy-appを入れています
それぞれで設定したプロジェクト名を入れてください

cdとはChange directoryの意味で、フォルダを移動する際に使用します

次に下記を入力します

npm run dev

npm run devは、Next.jsを起動する際に使用します
このコードの後、http://localhost:3000
という記載が出てくると思います

このhttp://localhost:3000をブラウザ（Google Chromeがおすすめ）に入力します

Google Chromeを起動すると一番上にあたりに、上記の画像のようなところがあります
こちらに http://localhost:3000を入力します

起動が成功したら、下記の画面が表示されます

これで設定は完了です

まとめ

設定はいかがだったでしょうか？
ちょっと手順はあるのですが、比較的、容易に設定ができたのではないでしょうか？

途中、エラーが起きる場合があるとしたら、Node.jsが入っていないかバージョンが古いか、または途中のcdの部分で、何かがあるかが予想されます

ターミナルでerrorなど表示が出ているかと思いますの、なんの作業をしたの時に問題が起きたかを確認いただければと思います