【next.js】next.jsの環境構築方法

asaba 著者:asaba

【next.js】next.jsの環境構築方法

今回はreactのレンダリングを高速化してくれるというフレームワーク、next.js

についてです。

 

reactでは、通常ではscriptはクライアント側で読み込むのですが、

これが大規模になってくるとクライアント側だけでは処理が重く

パフォーマンスに悪影響が出てしまいます。

 

そんな中開発されたnext.jsは、reactのscriptをサーバーサイドで読み込むことができるため

レンダリングでの早いレスポンスを期待することができます。

今回はそのnext.jsの開発環境の構築方法を記載します。

(結構簡単でした。)

 

構築方法

①まずcreate-react-app sampleでreactを作ります。

②cd sampleで移動

③npm i nextでインストールをします。npmのバージョンは

6.13.0でした。

④npm iで再度インストールをします。

まず、sampleフォルダの中のpackage.jsonを開いて

コマンドが打てるようにスクリプト群の一番下に”dev” : “next”を追加します。

 

</pre>
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "next"
},
<pre>

⑤最後にnpm run devをしてttp://localhost:3000/でローカル

サーバーにアクセスをします。

画面のような文字が表示されたら環境構築成功になります。

 

以上でnext.jsの環境構築は終了です。

ちょっとしか書いていないので使用感は分かりませんが、

使いにくいという印象はなかったです。

reactを使ったことのある方はそこまで苦労しなそう・・・。

 

ただ、一つ感じたのが、reactでのcssの書き方で保存をしていると

cannot resolveになってしまうので、もう完成してしまったアプリを

next.jsに合わせて書き直すのは骨が折れそうだなと思いました。

 

また、npm i とuninstallを繰り返していてもwebpackでライブラリが欠落したり

してしまうのでそちらの考慮しないと書き直しは怖くてできないです。

  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。