🙆‍♀️

【初心者】Next.jsでホームページをつくろう①〜Next.jsの環境構築をしよう〜

に公開
Next.js
初心者
tech

はじめに

こんにちは！「選挙×テクノロジー」で民主主義をアップデートすべく、個人開発をしながら勉強中です！今回はNext.jsでホームページを作成していくシリーズです。

対象読者

  • 初学者として同じ目線で学びたい方
  • 初学者の私にアドバイスしてくださる聖人

もくじ

  1. まずNode.jsをインストール
  2. Next.jsの環境をセットアップ
  3. npm run devでサーバー立ち上げ

1.Node.jsをインストール

なぜNode.jsが必要か

​Next.jsとNode.jsの関係は、「ゲーム機本体」と「ゲームソフト」の関係に似ています。

  • Node.js = ゲーム機本体
    ​これがないと、そもそもソフトが動きません。プログラムを動かすための「土台・環境」です。
  • Next.js = ゲームソフト
    あなたが作りたいアプリやWebサイトを作るための「便利なキット」です。

本来、JavaScriptという言語は「ブラウザ（ChromeやSafariなど）」の中でしか動けません。それを「パソコン本体でも動けるようにしてあげる」のがNode.jsの役割です。だから、最初にインストールする必要があるのです。

インストール方法

インストール方法はNode.jsの公式サイト（日本語）をご参考に。

インストールが終わったら、本当にNode.jsが準備できたか確認しましょう。
パソコンの「ターミナル（Mac）」か「PowerShell（Windows）」を開いて、以下の呪文を打ち込みます。

node -v

v20.xx.x のように数字が出てくればOKです。これで土台は完成です！

2.Next.jsの環境をセットアップ

ターミナルでコマンド実行

ターミナルで、プロジェクトを作りたい場所（デスクトップなど）に移動して、以下のコマンドを打ち込みます。
※ my-app の部分は、自分の好きなアプリ名に変えてOKです。

npx create-next-app@latest my-app

コマンドを打つと、「Would you like to use TypeScript?」などいくつか英語で質問されますが、全てそのまま「Enterキー」を連打で大丈夫です！

これは「いま居るディレクトリにnext.jsの環境を構築して下さい」といった命令になります。

【メモ】npmとnpxの違いはコチラ↓

これで、フォルダの中に Next.js のひな形（必要なファイル一式）が自動生成されました。

作られたファイルの説明

自動生成されたファイルの大事な部分について超ざっくり説明すると以下の図になります。これならイメージしやすいですね！

my-app/
├ public/← 🖼️ 画像置き場
└ src/
　　└ app/
    　├ layout.tsx ← 🦴 ヘッダーフッター
    　└ page.tsx   ← 📄 トップページ

npm run devでサーバー立ち上げ

実はここまでできたらもうすでにWEBサイトが自分のパソコンに完成しています！
​これからそのWebサイトを表示させてみましょう。

プロジェクトのフォルダに移動

まず、さきほど作ったフォルダの中に移動します。

cd my-app

いよいよスイッチオンです。以下を実行しましょう。

npm run dev

ターミナルに以下のような文字が出るはずです。

- Local: http://localhost:3000

Chromeなどのブラウザを開いて、アドレスバーに http://localhost:3000 と入力してみてください。
​画面にカッコいいNext.jsのロゴが表示されましたか？
これが表示されれば、環境構築は成功です！ おめでとうございます！🎉

Discussion