Next.jsを少しずつ理解していく2【環境構築】

今回は、今後の学習に活用するNext.jsの環境構築の手順を紹介します。Next.jsを導入するにはお手元の環境にNode.jsがインストールされていることが前提となります。

 

Node.js、WSLなどのセットアップについて

本記事では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とは?

「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のプロジェクトの構成ファイルについて紹介します。

コメントを残す

CAPTCHA