next.js で "Hello World" する <js教入信その1>

この記事とは

いままでC言語C++を使ってきた筆者がjs教に入信することでQOLを向上させたいので、習得した知識をまとめるために作った。

やること

その1 : node.jsのダウンロード
その2 : npxのインストール
その3 : next.jsのプロジェクトの作成
その4 : 開発サーバーの起動

と言って感じで、C++であればコーディング→コンパイル→実行といった具合で単純だったが、お作法が多め。また、横文字しかないので頭が混乱する。

node.jsのダウンロード

javascriptはChrome、edge、firefoxなどの検索エンジンに搭載されているjavascriptエンジンによって動作するのが基本だが、これをパソコン上で動かせるようにするのがnode.jsだ。これをダウンロードする。node.jsの公式ページにあるインストーラーを実行して、PowerShellかcmdで以下の構文を打とう。

node.jsのバージョン確認

node -v　# インストールしたバージョンが表示される

npmのバージョン確認

npm -v　# インストールしたバージョンが表示される

C系のコンパイラでも-vはしっかりインストールできているか確認する定番のコマンドである。これでバージョンが表示されたら成功である。なお、npmはnode.jsをインストールしたときにもれなくついてくる。こちらも必要なものなのでバージョン確認をして正常にインストールされているか確認しよう。

npmとは

npmとはパッケージの管理をしてくれるもの。必要になったら自動でインストールしてくれます。パッケージとはC系でいうヘッダーファイルで、npmが#includeを自動でやってくれるとでも思っとく。

npxのインストール

プロジェクトフォルダーをどっかに作って PowerShell or cmd を開いて以下のコマンドを実行する

next.jsプロジェクトの作成

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

このコマンドを実行するとエラーが出るなぜならnpxがインストールできていないからだ

npxとは

npmはパッケージの管理を行うのに対してnpxはパッケージの実行を行う。C系の言語にはなかった考え方でキモイ

というものをインストールしていく

npxのインストール

npm install -g npx

これでさっきのコードを入力してプロジェクトを作成する。

開発サーバーの起動

いろいろ準備が整ったところでサーバーを作ろうmy-next-appフォルダに移動してそこで以下のコードを実行する

開発サーバーの起動

cd my-next-app
npm run dev

これで実行できた。最後に http://localhost:3000 にアクセスしてnext.jsのページが表示されたら成功。

最後に

開発環境の整備がかなり気持ち悪いがコード単体で見れば簡単なので頑張ろう