Next.jsのチュートリアルをまじめにやってみる
yukiやったことがなかったため。Next.jsを最近使う機会があるのだけど、Next.jsがいまいちなにをやっているのかわかってない。React.jsは結構好きで使っていた。
hisayuki mori一通り終わったあたりで、これもオススメです
yukiこなしているチュートリアルはこれになる。
yukiまず最初に知ったのはcreate-next-appというコマンドだった。次からプロジェクトを作る際に使いたい。
yuki基本的なLinkとかpagesが何とかは知っていたのですっ飛ばしたけど、CSS周りがわかってなかったのでメモ。普段はコンポーネントを用意してくれるライブラリを使ってしまうことが多く、この辺りの理解を完全にすっ飛ばしていたと思う。
Next.jsが扱うCSSは、チュートリアルが扱う限りではスコープの違いによりふたつあるようだ。
- ローカルスコープで定義されるもの。つまり、コンポーネント単位が適用範囲となるCSS。
- グローバルスコープで定義されるもの。つまり、
_app.jsで定義し、全部のコンポーネントに対して適用となるCSS。
yukiclsxというライブラリがちょっと紹介されていた。知らなかったので、あとでキャッチアップしておく。
yukiPre-rendering
デフォルトでは、Next.jsは各々のページを事前に生成（pre-render）しておく。生成されたHTMLは読み込まれるとJavaScriptコードが読みこまれて、インタラクティブなページとして動作する。このことをhydrationと呼ぶらしい。
React.js単体だとこれは動いていないので、JavaScriptをオフにするとページを見られなくなってしまう。
最初の読み込みのタイミングで、可能な限り生成されたHTMLを読み込む。次に、それでも難しかったものはあとからJavaScriptを読み込むといった流れ？
yukiNext.jsにはふたつのプリレンダリングの仕方がある。
- Static Generation: ビルドしたタイミングで生成されるHTMLのことで、リクエスト間で共通して同じものが返される。
- Server-side Rendering: Next.js側のサーバーでリクエストごとに生成されるHTML。
この生成方式はページごとに選べるらしく、ひとつのNext.js appの中にふたつのプリレンダリング方式を混在させることもできるらしい。すごい。
どちらをどの場面で使うべきかと言うと、
- Static Generation
- こちらをNext.jsは推奨している。まあ普通に考えて、これが一番速いからね。
- ユーザーからのリクエストに先立ってページをプリレンダリングできないようなケースでは、Static Generationはいいアイディアではない。たとえばページが頻繁に更新されるものや、リクエストのたびにコンテンツが変わるようなもの。
- Server-side Rendering
- 上記では満たせないケースで使用する。
ちなみにだが、データのフェッチのする・しないに関わらずStatic Generationはワークするらしい。
yukiStatic Generationのために、データの取得は getStaticProps で可能。サンプルだとファイルシステムから取得しているのでビルド時点で情報があるじゃん！ないとダメなの？と思ったけど、データベースからも取ったりできるらしい。わお。
yukigetserverSidePropsはサーバーサイドレンダリングのときに利用できる。また、そもそもデータのプリレンダリングが不要な場合には、SWRが使える。Next.js的にはデータの取得時にはこっちの利用を推奨しているみたい。
yukiDynamic Routingのところにはふたつ出てくる。
-
getStaticPaths: あらかじめ候補となるパスの情報を渡しておくと、静的にページをプリレンダリングしてくれる機能っぽい？ -
getStaticProps: ↑で取得したパラメータを元に、各ページ用にpropsを生成してくれる君っぽい。
yuki日付のところではdate-fnsが使われていたのでメモ