Next.jsアプリでページ遷移時にプログレスバー（ページ上部に出るやつ）を出す

4304 ワード
React next.js フロントエンド JavaScript JSX JavaScript テキストリンク

なかなかにミニマルなフレームワーク「Next.js」ではデフォルトではプログレスバーを表示しません。
Nuxt.jsなら勝手にやってくれるんだけどな…と思いつつ、ここではNext.jsでの実現方法を書いておきます。超簡単です！

必要なもの

nextjs-progressbar

以上！

実装方法

まず、当然ですけどnextjs-progressbarをインストールします。

$ yarn add nextjs-progressbar

/pages/_app.js（ない場合は作る）（_app.jsって何、という方はこちらをどうぞ）を編集します。

/pages/_app.js
import React from 'react'
import App from 'next/app'
import NextNprogress from 'nextjs-progressbar' // ここ！

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <>
        <NextNprogress /> { /* ここ！ */ }
        <Component {...pageProps} />
      </>
    )
  }
}

export default MyApp

ここで一旦宣伝です。

宣伝

先日、@svfreerider さんと共にRemote Club｜海外移住や海外フリーランスの情報サイトというサービスを出しました！
既に海外移住した人と、これからしたいと考えている人のつながりを作り、より多くの方々が好きなところで生きていけるようになればいいという思いからRemote Clubを作りました。

少しでも海外移住に興味のある方、既に移住している方は是非Remote Clubを覗いていっていただけると嬉しいです！
フィードバックも待ってます！
よろしくおねがいします！

まとめ

Next.jsでも特に困ることなくプログレスバーを実装できました。
Nuxt.jsだとデフォルトで表示されるし便利、と思ったけど、まぁ必要な人は追加する、というスタンスのほうが自然な気もしました。
遷移先でAPIなどを使って外部からデータを取得する場合は、どうしても遷移に時間がかかり不自然に感じてしまいます（自分は）。
ということで、クライアントでの遷移にはプログレスバー表示したい！というかたは是非どうぞ！

ちなみにnextjs-progressbar作者の方の記事はこちらです。詳しく知りたい方は覗いてみてください。