react-burger-menuライブラリをnextjsで使ってみた
こんにちわ。nap5です。
react-burger-menuライブラリをnextjsで使ってみたので、紹介したいと思います。
nextjsについてはこちらになります。
react-burger-menuライブラリについてはこちらになります。
デモサイトです。
デモコードです。
SEO対策関連でSSRやらSSGやら、いろいろあるみたいですが、クローラーが最近だとSPAでもJS実行後のWEBページをキュレーションしようと頑張るみたいです。
ダイナミックパスが使える点を踏まえてユーザー管理が発生するアプリではnextjsはいいかもしれません。あるいはページごとにOGPなどを設定したい場合はハンディではないかと思います。SPAだとOGPは単一しか設定できないですからね。
現時点だとSPAの場合、GoogleはSEO対策として事前に静的コンテンツに変化する仕組みの一つ「ダイナミックレンダリング」というものを提供しているらしいです。これはJavaScriptを正常に即時処理できないケースのフォールバックのようです。ユーザーエージェントを見てクローラーボットなら作成した静的コンテンツをサーブして、それ以外はSPAの振る舞いを維持させるようです。
上記静的コンテンツへの変換をハンディにするサービスとして、prerender.ioは重宝しそうと思いました。
nextjsにはデフォルトでハンディな機能がたくさんあるので、普段でも触れていきたいですね。ページトランジションのイベントが用意されているのはかなり便利だと考えています。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？