Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@kanye__east

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

progress7.gif

なかなかにミニマルなフレームワーク「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作者の方の記事はこちらです。詳しく知りたい方は覗いてみてください。

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What is going on with this article?