はじめに
Next.jsについて少し学んでみました。
✅ゴール
・Next.jsの理解を深める
✅参考教材
📚React.js&Next.js超入門
Next.jsの雛形を作成するコマンドを紹介せずに説明されていたのでびっくり。
Next.js
✅Next.jsとは
Reactをサーバーサイドでレンダリングし表示するプログラムで、静的Webページとして作成・表示できる。
また、複数ページの作成も簡単にできる。
Reactはクライアントサイドレンダリングで、サーバー側から受け取るソースコードを見ても、表示はわからない。
そのため、デバッグはReact devtoolsを使わないとできない。また、検索エンジンなどで不都合が生じる。
サーバーサイドレンダリングは、サーバー側でページを生成するため上記の問題を解決できる。
✅特徴
・pagesディレクトリでページを用意。※HTMLファイルは用意しない。
・next.config.jsで設定情報を記述。
・ビルドするとHTMLファイルが生成される。※静的になるので注意。
・スタイルはビルトインCSSを使う。
・<head>タグは専用の<Head>タグでJSX内に記述。
✅使ってみる
プロジェクト作成
mkdir next && cd next npx create-next-app next
ディレクトリ構造
実行
yarn dev
🙄かなりシンプルなページですね～
デフォルトでpages/api/hello.jsがあったので確認。
ためしにindex.jsを複製、other.jsを作成してアクセスしてみる。
🙄確認できました。ここ辺りの仕組みはNuxt.jsとそっくりですね～◎
おわりに
ネットサーフィンしていてドキュメントのなさに驚きました。
こういった点で日本ではVue.js/Nuxt.jsの方が使われているんだろうなと感じました。
※Udemyでも英語のモノしか見つからない。英語わかるようにしたい。。。
コメントを残す