Next.js 앱에서 페이지 전환시 진행률 표시 줄 (페이지 상단에 나오는 사람)

좀처럼 최소한의 프레임 워크 "Next.js"에서는 기본적으로 진행률 표시 줄을 표시하지 않습니다.
Nuxt.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 저자의 기사는 여기 입니다. 자세히 알고 싶은 분은 들여다보십시오.