Next.jsアドベントカレンダー2018の1日目です。
Reactを使ってSPAで開発したい事情がある、でもSEOとユーザビリティのためにSSRが最適解。
そういった場合、Reactを用いたシンプルなIsomorphic JavascriptフレームワークであるNext.jsがあります。
使ってみると案外簡単でフレキシブルで、非常に良いです。
世間ではNuxt.jsが大流行ですが、Next.jsを少しでも使ってもらえるように、はじめるにあたってのガイドを共有したいと思います。
特徴を知る
Next.js公式サイトの中にある、チュートリアルの冒頭に下記特徴が書かれています。
- Server-rendered by default
- デフォルトでサーバーサイドレンダリングされる
- Automatic code splitting for faster page loads
- 高速ページローディングのため自動でコードスプリッティング
- Simple client-side routing (page based)
- ページごとにルーティングが作られる、シンプルなクライアントサイドでのルーティング
- Webpack-based dev environment which supports (HMR)
- HMRをサポートしたWebpackベースの開発環境
- Able to implement with Express or any other Node.js HTTP server
- Expressや、どのNode.jsのHTTPサーバでも実行可能
- Customizable with your own Babel and Webpack configurations
- BabelやWebpackでの独自カスタマイズが容易
Next.jsを半年使ってみて思うのは、シンプルでフレキシブルなフレームワークということ。
エッセンシャルな機能はあらかたデフォルトで用意してくれています。
さらに、どの状態管理ライブラリを使うか、どのHTTPサーバを使うか、どのCSSフレームワークを入れるか、TypeScriptを使うかなど、開発者が技術を自由に選択し簡単に導入できることが利点だと思います。
また、Next.jsを生んだ会社ZEITのエンジニア@nkzawaさんが、Next.jsがOSS化された際のブログを日本語訳しています。
こちらも是非ご一読を。
https://qiita.com/nkzawa/items/1e0e93efd13fb982c8c0
手を動かしてみる
公式サイトではNext.jsの基本を学べるチュートリアルが用意されています。
https://nextjs.org/learn
Next.jsはシンプルなフレームワークなので、最初の学習コストが低いと思っています。
Reactもおぼつかないレベルだった私でも、Next.jsのエッセンシャルな挙動は半日で理解できました。
抑えるべきポイントは、
- ページがルーティングとして使われること
-
getInitialProps()というサーバーサイド・クライアントサイド両者で実行される、データ取得のための重要な関数があるということ - HTTPサーバーからReactコンポーネントへのデータの流れを知ること
- 初回アクセスでSSRされたソースをブラウザでレンダリングした後の、SPAの挙動をするためのNext.jsが用意するAPI群を知ること
でしょうか。
明日のアドアドベントカレンダー記事はチュートリアルの翻訳とまとめをしてみようかと思います。
↑「Next.jsチュートリアル翻訳」を書きました。
困った時は
チュートリアルだけでは開発で困ることもあります。そんなときは下記の資料が役に立ちます。
README
困ったらリファレンス的にGitHubのREADMEを見ています。Next.jsの機能全体が網羅されていて、ここを読めばたいていのことは解決します。
https://github.com/zeit/next.js
実は同僚が中心となって日本語化ページを鋭意作成中です。ある程度翻訳できたらここに共有したいです。
Examples
Next.jsは公式リポジトリに、各種ライブラリの導入方法やベストプラクティスのソースコード例が大量に置いてあります。
自分が導入したい技術の名称をこのページで検索すればたいてい引っかかります。
https://github.com/zeit/next.js/tree/master/examples
Issues
READMEでもExamplesでも拾えない困ったことがあると、GitHubのIssueに答えがあります。ベストプラクティスなども議論されていたりして、かなり助かっています。
[困っている事象] next.jsで検索するとたいていClosed issueが出てきてくれて、読めば解決します。
Showcase
Next.jsをプロダクションで使っているWebサイトがここで紹介されています。
https://nextjs.org/showcase
Reactを使っている人は一度は目にしたことがあるかもしれない、styled-componentsの公式サイトもNext.jsで作られていたりします。
https://www.styled-components.com/
そしてソースコードが公開されているので、Next.jsをプロダクション運用で始める際には是非参考にしてみて下さい。
https://github.com/styled-components/styled-components-website
Spectrum
SpectrumというコミュニティチャットにNext.jsチャネルがあります。
https://spectrum.chat/next-js
ここでリアルタイムで開発者とやりとりできます。
おわりに
この記事はNext.jsアドベントカレンダーの1日目なのですが、昨日時点で4つしか枠が埋まっていませんでした。
Next.jsのことを紹介、解説する記事をなるべく多く作っていきたいと思います。