Next.js触ってみました

こんにちわ、ななきです。

ReactのプロジェクトをNext.jsにのせようってことがあり、Nextを触っていたのですが意外とハマりどころが多かったのでいろいろまとめてみます。

プロジェクトの作成についてはcreate-next-appをしておけばいいと思います。

基本のページ遷移

ページの遷移は基本的にはnext標準のLinkコンポーネントを使うようです。

 

このように何も指定していないaタグをLinkで囲う事によってaタグにリンクが挿入されます。

prefetchなどのオプションもあるようです。

また、aタグにはclassNameやpropsなどの属性を付与できなかったのでそこも注意ですね。

propsにrouterを注入

ドキュメントにも書いてありますが、withRouterでコンポーネントをラップします。

 

このようにqueryやpathnameを受け取れるようになります。

また、props.routerのpushを使えばページの遷移も出来ます。

getInitialPropsでstateを更新

exampleを見ればわかるんですけど、流れが把握出来ないと少しつまづきました。

Reduxはサーバサイドレンダリング(以後SSR)時とクライアントサイドで一度ずつ初期化されるので、getInitialPropsでstateを更新した後の値をクライアントサイドの初期化時に受け取ることによって参照することが出来ます。

その受け取ってる箇所がexampleではcreateStoreの引数のinitialStateになりますね。

SSR時は空オブジェクト、クライアントサイドでは更新後のstateを受け取ります。

getInitialPropsで非同期通信

getInitialProps内でAPIを叩いてレスポンスをstoreに渡したいって状況はあると思います。

何も考えず書くと非同期処理が実行されるのですが、処理が完了する前にクライアントサイドのレンダリングに移ってしまいデータを渡せません。

ですので処理が完了するのを待つために下記のように async/await を使用します。

こうすることでawaitの処理が完了するまで待つようになります。

styled-componentsがちらつく

styled-componentsを使っていたのですが、SSR時にスタイルが展開されずクライアントサイドで展開されるため展開完了前はスタイルがあたらずチラツキがありました。

こちらもexampleがあります。

exampleのように _document.js を /pages 以下に配置するのと同時に .babelrc  ファイルも編集します。

動的ルーティング

動的ルーティングとは /blog/:id  のようなルーティングのことですね。

Nextには標準では動的ルーティングの機能はありません。

ですのでnextjs-dynamic-routesのようなライブラリを使います。

readmeだけだと使い方が分かりづらいのですが簡単です。

まず以下のようにファイルを作ります。

routes.js内の router.add の箇所でルートを追加しています。

この時、 name にあたる箇所が使用するコンポーネント名( /pages 以下に配置)になり、実際のURLは pattern に記述したとおりになります。

最後にnextの起動をexpressを介して行うようになるので package.json の scripts を修正します。

これで動的ルーティング出来るようになったかと思います。

ページ遷移の方法についてはreadmeに書いてあるので見ながら動かしてみてください。

まとめ

とりあえず振り返りようにまとめてみましたが、機能的に必要だけど情報が一箇所に無いので調べるのが大変だったりしました。

Nuxtはこの辺いい感じにやってくれるので楽だなとも思いました。

ちなみにwebpackも最小限だったりするので拡張が必要な場面が多々あると思いますが、拡張する方法はドキュメントみつつ必要なローダー入れてくださいって感じです。

Archives

MasatoChiba
Frontend Developer