Next.js
Reactは、単体ではブラウザが読むことができず、動作させられません。そのため、主にはReactフレームワークというものを利用してページ（HTML、CSS、JS）の作成（ビルド）を行います。
代表的なフレームワーク
- Next.js…最も人気のあるReactフレームワークです。
- Gatsby…静的サイトの作成に特化したフレームワークです。
このドキュメントを作成しているDocusaurusも、Reactフレームワークの1つです。
Next.jsについて
簡単に言えば、夢中カレッジのLPは「Next.js（フレームワーク・開発環境）の上でReact（言語）を書く」というような形態になっています。
（前提知識）パッケージマネージャー
2025年現在、現代的なWeb開発ではnpmやyarnといったパッケージマネージャーを使用します。
パッケージマネージャーを使用すると、「そのフォルダ内で行う開発に対し、他人が作ってくれたプログラムを借りてこれる」という利点を得ることができます。「他人が作ってくれたプログラム」には、例えば
- Reactをいい感じにHTML、CSS、JSに翻訳するためのもの
- 開発環境でリロードしなくてもリロードさせてくれるもの
- SCSSやSASSを導入させてくれるもの
などがあります。
パッケージマネージャーは、Node.js上で動作します。
WordPressの開発においても、SCSSで書いたコードをビルドするためにはパッケージマネージャーに取ってきてもらったプログラムが必要です。
代表的なパッケージマネージャーには、
- npm
- yarn
- pnpm
などがあり、好みや環境により使い分けます。夢中カレッジLPではyarnを使用しています。
npm、yarn、pnpmは、原則として複数同時に使用してはいけません。
どれか1つを選んで、そのプロジェクト（フォルダ内）では同じものを使い続ける必要があります。
開発環境の起動
リポジトリのクローンをし、Node.jsの導入が整ったらそのフォルダ内で右クリックして「ターミナルで開く」を選択します。その後、
yarn install
または
yarn
を実行します。
これはyarnをインストールするコマンド…ではなく、パッケージマネージャーであるYarnにこのプロジェクトを動かすのに必要な外部のプログラムコードを取ってきてもらうために実行します。
完了したら、続けて、
yarn start
を実行します。そうすると、
http://localhost:3000
のような文字列が、ログのどこかに出現するはずです。この「localhost」というのは「今使っているこのパソコン」を表しており、「3000」はポート番号3000番を使用していることを示しています（ポート番号については、今は深く考えなくてOKです）。そのため、このリンクにアクセスすると自分のパソコンが公開しているサイトに飛ぶことになります。
このリンクをブラウザで開くと、カレッジLP（…に、そっくりなサイト）が出現するはずです。
httpで始まるため「安全ではありません」と警告が左上に出ることがあります。しかし、アクセス先は自分のパソコンなので、夢中カレッジのプログラムコードが不正に改造されている場合を除けば、アクセスして当然安全です。
localhostは「このパソコン」を示しているため、他人にこのURLを共有してもアクセスできません。一時的に他人に公開したい場合はngrokなどのトンネリングサービスを使用することができますが、あまり良くわからなければ実行しないほうが安全です。localhostの中身を共有しなくても、サイトの開発は普通に行えます。