nextjs toploader
v3.7.15
NPMの使用：
npm install nextjs-toploader糸の使用：
yarn add nextjs-toploader使用してインポート：
import NextTopLoader from 'nextjs-toploader' ;appフォルダー構造のためのapp/layout.jsでの使用RootLayout()の<body></body>内部のreturn()に<NextTopLoader />をレンダリングするには：
import NextTopLoader from 'nextjs-toploader' ;
export default function RootLayout ( { children } ) {
return (
< html lang = "en" >
< body >
< NextTopLoader />
{ children }
</ body >
</ html >
) ;
}pagesフォルダー構造のpages/_app.jsでの使用レンダリング<PagesTopLoader />をMyApp()のreturn()にadd（推奨）：
import { PagesTopLoader } from 'nextjs-toploader/pages' ;
export default function MyApp ( { Component , pageProps } ) {
return (
< >
< PagesTopLoader />
< Component { ... pageProps } /> ;
</ >
) ;
} pagesルーターで<NextTopLoader />を使用することもできますが、 nextjs-toploaderバージョン2.6.12以降、 useRouterフックサポートに<PagesTopLoader />を使用することをお勧めします
useRouterフックとの互換性appフォルダー構造のためのapp/layout.jsを使用したuseRouterフックの使用useRouterフック（アプリルーター）を使用するときにトップローダーをトリガーする場合：
// Import the useRouter hook from nextjs-toploader to trigger the TopLoader
import { useRouter } from 'nextjs-toploader/app' ;次に、たとえばコードで使用するだけです。
const router = useRouter ( ) ;
router . push ( '/some-page' ) ;pagesフォルダー構造のpages/_app.jsを使用したuseRouterフックの使用useRouterを使用するときにトップローダーをトリガーする場合、 MyApp()のreturn()に<PagesTopLoader />を追加します。
import { PagesTopLoader } from 'nextjs-toploader/pages' ;
export default function MyApp ( { Component , pageProps } ) {
return (
< >
< PagesTopLoader />
< Component { ... pageProps } /> ;
</ >
) ;
}add <NextTopLoader />をレンダリングするには、app.jsのApp()のコンポーネント内のreturn()に追加します。
import NextTopLoader from 'nextjs-toploader' ;
const App = ( ) => {
return (
< div >
< Router >
< NextTopLoader />
< Routes > { /* Your Routes Here */ } </ Routes >
</ Router >
</ div >
) ;
} ;
export default App ;小道具が<NextTopLoader />に渡されない場合、以下はデフォルトの構成が適用されます。
< NextTopLoader
color = "#2299DD"
initialPosition = { 0.08 }
crawlSpeed = { 200 }
height = { 3 }
crawl = { true }
showSpinner = { true }
easing = "ease"
speed = { 200 }
shadow = "0 0 10px #2299DD,0 0 5px #2299DD"
template = '<div class="bar" role="bar"><div class="peg"></div></div>
<div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
zIndex = { 1600 }
showAtBottom = { false }
/>color ：トップローダーのデフォルト色を変更します。initialPosition ：トップローダーの初期位置をパーセンテージで変更するには、： 0.08 = 8% 。crawlSpeed ： msの増分遅延速度。speed ： msのトップローダーのアニメーション速度easing ：Easing（CSS Easing String）を使用したアニメーション設定。height ： pxのトップローダーの高さ。crawl ：トップローダーの自動増加動作。showSpinner ：スピナーを表示するかどうか。shadow ：トップローダーの滑らかな影。 （それを無効にするためにfalseに設定）template ：トップローダーにカスタムHTML属性を含める。zIndex ：トップローダーのZindexを定義します。showAtBottom ：下部にトップローダーを表示します。 （モバイルデバイスでの可視性を確保するために、トップローダーの高さを上げる） NextTopLoaderProps （トップローダーに渡された小道具）| 名前 | タイプ | デフォルト値 |
|---|---|---|
color | string | "#2299DD" |
initialPosition | number | 0.08 |
crawlSpeed | number | 200 |
height | number | 3 |
crawl | boolean | true |
showSpinner | boolean | true |
easing | string | "ease" |
speed | number | 200 |
shadow | string | false | "0 0 10px #2299DD,0 0 5px #2299DD" |
template | string | "<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>" |
zIndex | number | 1600 |
showAtBottom | boolean | false |
showForHashAnchor | boolean | true |
このプロジェクトは、コード貢献者の貢献により可能になりました。
組織でこのプロジェクトをサポートしてください。あなたのロゴは、あなたのウェブサイトへのリンクでここに表示されます。このプロジェクトは、以下からオープンコレクティブまたは同等の方法でサポートできます
upi id：thesgj@upi（international upi id）
