【Next.js_①】強力なフロントエンドのフレームワーク
webサイトを作成する際に強力なツールであるNext.jsをインストールするまでの記録
1.0_Next.jsとは
Next.jsはオープンソースのReactのフレームワークです。
このブログと同様の静的サイトジェネレータ「SSG(Static Site Generator)」になります。
Hugoにはない機能ですが、SE0やアプリ開発を効率化させるSSR(Server Side Rendering)を備えているのも大きな特徴です。
要は、慣れてしまえば、簡単に強力なサイト構築が可能となります。
Next.js は、本番環境に必要なすべての機能 (ハイブリッド静的レンダリングとサーバー レンダリング、TypeScript サポート、スマート バンドル、ルート プリフェッチなど) を備えた最高の開発者エクスペリエンスを提供します。設定は必要ありません。
2.0_Next.jsをインストールする事前確認
まずは作業するためのフォルダを作成します。
注意点！作成するプロジェクト（ファイル名）は大文字は使えません。
フォルダを作成したら、vsコードでそのフォルダを開きます。
vsコード上でターミナルを起動します。
Next.jsを利用するには、nodeとnpmのインストールが事前に必要になります。
現在、インストールされているか確認するには、以下のコードをターミナルで実行しましょう。
$ node -v
$ npm -v
結果、バージョンの情報が表示されればインストールされていますので、次の手順に進めます。
まだインストールされていない場合は、あらかじめインストールする必要があります。
2.1_node.jsのインストール
node.js公式のページからインストールしましょう。
node.js公式
2.2_npmのインストール
以下のコマンドを実行しましょう。
なお、sudoは管理者権限で実行するという意味なので、パスワードを求められると思います。
sudo npm install -g npm
3.0_Next.jsをインストール
以下のコマンドを実行します。 今回は、「my-project」と言う名前のファイルを作成します。
$ npx create-next-app my-project
成功したら、ターミナルで新しく作成された、my-projectと言うディレクトリに移動します。
$ cd my-project
ディレクトリを移動したら、 以下のコマンドを実行して、サーバーを起動します。
$ npm run dev
ローカルのURL(http://localhost:3000)がターミナルに表示されるので、アクセスします。
以下の画面が表示されればインストールが成功です。
次回は具体的に画面の編集方法と、cssの強力なツールであるTailwind.cssを記録したい思います。
お疲れ様でした。
→ 2022/8/8更新【Tailwind】簡単にcssのコーディングができるツール