AppRouterでプログレスバーを出したい
takky94
👆 こういうやつ、indicatorとかも呼ばれるアイツ
今までnprogressというライブラリを拡張したnext-progressなるものを利用していたが、AppRouter事変で逝かれてしまった
next-progressではnext/routerのrouteChangeStartにhookしてNprogress.start()を発火していたが、
今の所next/navigationのuseRouterではそこらへんサポートされてないらc
そもそもの話ローディング用途にはloading.jsがあるのでこういう用途のためにサポートされることは今後もないのかも
色々掘ってみるとハック的なやり方にはなっちゃうけど、Linkコンポーネントに引っ掛ける方法は見つけた
'use client'
import Link from 'next/link'
import { PropsWithChildren, useEffect } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
export const CustomLink: React.FC<PropsWithChildren<{ href: string }>> = ({
href,
children
}) => {
useEffect(() => {
return () => {
NProgress.done()
}
}, [])
return (
<>
<Link href={href} onClick={() => NProgress.start()}>
{children}
</Link>
</>
)
}
他にはuseEffectの依存にusePathname()とかuseSearchParams()を引っ掛けるやり方も見たけどそっちは遷移前での表示ができないので微妙だった
takky94As of right now we're not planning to add additional features to the Pages Router, especially when there is no migration strategy for the feature to App Router at a later point. In App Router you can't observe replace vs push.
今のところ、私たちはPages Routerに機能を追加する予定はありません。特に、その機能を後からApp Routerに移行する戦略がない場合は。App Routerでは、リプレースとプッシュを比較することはできません。