今回は、今後の学習に活用するNext.jsの環境構築の手順を紹介します。Next.jsを導入するにはお手元の環境にNode.jsがインストールされていることが前提となります。
本記事ではNode.jsのインストール方法については解説していません。その他、Windowsユーザー向けのWSLの導入、VScodeのセットアップなどについては別記事にて解説予定です。
Next.jsのプロジェクトを作る
まずは、「NEXTJS」というプロジェクトディレクトリを作成します。次に、作成したディレクトリでnpx create-next-appを実行してください。今回のプロジェクト名は「hello-world」を指定しています。
mkdir NEXTJS
cd NEXTJS
npx create-next-app hello-world
先ほど作成したhello-worldディレクトリにて、npm run devを実行します。
cd hello-world
npm run dev
「npm run ○○○」を実行すると、○○○に対応したスクリプトが実行されます。devはデフォルトで設定されているスクリプトの1つで、Next.jsアプリケーションを実行するためのコマンドです。
hello-world/package.jsonファイルを確認すると、scriptsにdevが登録されていることが確認できます。
ブラウザでlocalhost:3000にアクセスすると、Next.jsプロジェクトが起動していることを確認できます。
画面に「Welcome to Next.js」と表示れている文字列を「Hello,World!!」に書き換えてみましょう。
index.jsファイルを開いて、<h1>タグで囲まれた箇所を「Hello,World」に置き換えます。
hello-world/pages/index.js
//変更前
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
//変更後
<h1>
Hello,World!!
</h1>
再び、localhost:3000を確認すると、変更が反映されていることが分かります。ページを更新しなくても自動的に反映されます。
まとめ
以上で環境構築は終わりですが、以降の記事のための下準備も行ってしまいましょう。
pagesフォルダにあるapiディレクトリとindex.jsファイルを削除し、新しくindex.jsファイルを作成します。
Terminal
rm -r pages/api
rm -r pages/index.js
mkdir pages/index.js
作成したindex.jsでは「Home Page」とだけ表示するシンプルなコードを記述します。
pages/index.js
function Home() {
return <h2>Home Page</h2>
}
export default Home
次回はNext.jsのプロジェクトの構成ファイルについて紹介します。
