在Next.js中如何使用自定义加载器替代默认加载器

根据使用的Next.js路由体系（App Router/Pages Router），可以通过不同方式实现自定义加载器替代默认效果，以下是常见场景的具体实现：

1. App Router 页面级自定义加载 #

在App Router中，Next.js提供了loading.js约定式文件来定义页面的加载组件，无需手动判断状态，框架会自动在数据加载时渲染该组件：

// app/[page]/loading.js
export default function CustomLoading() {
  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      height: '100vh' 
    }}>
      <div className="custom-spinner">加载中...</div>
      {/* 这里可以替换为你的自定义动画组件 */}
    </div>
  )
}

2. 组件内条件加载（对应你的示例场景） #

如果是在组件内部根据业务状态控制加载显示，直接通过状态判断渲染自定义加载组件即可，完善后的示例如下：

'use client' // App Router下的客户端组件需要添加此标识

import { useState, useEffect } from 'react'
import CustomLoading from './CustomLoading'
import TargetContent from './TargetContent'

export default function DataDrivenComponent() {
  const [isRefreshing, setIsRefreshing] = useState(true)

  useEffect(() => {
    // 模拟数据请求或异步操作
    const fetchData = async () => {
      await new Promise(resolve => setTimeout(resolve, 2000))
      setIsRefreshing(false)
    }
    fetchData()
  }, [])

  // 加载状态下渲染自定义组件，否则渲染业务内容
  if (isRefreshing) {
    return <CustomLoading />
  }

  return <TargetContent />
}

3. 路由切换时的全局自定义加载（App Router） #

要在路由跳转过程中显示自定义加载组件，可在根layout.js中监听路由事件：

'use client'

import { useRouter } from 'next/navigation'
import { useState, useEffect } from 'react'
import CustomLoading from './CustomLoading'

export default function RootLayout({ children }) {
  const router = useRouter()
  const [isRouting, setIsRouting] = useState(false)

  useEffect(() => {
    const handleRouteStart = () => setIsRouting(true)
    const handleRouteEnd = () => setIsRouting(false)

    router.events.on('routeChangeStart', handleRouteStart)
    router.events.on('routeChangeComplete', handleRouteEnd)
    router.events.on('routeChangeError', handleRouteEnd)

    // 组件卸载时移除监听
    return () => {
      router.events.off('routeChangeStart', handleRouteStart)
      router.events.off('routeChangeComplete', handleRouteEnd)
      router.events.off('routeChangeError', handleRouteEnd)
    }
  }, [router])

  return (
    <html lang="zh-CN">
      <body>
        {isRouting && <CustomLoading />}
        {children}
      </body>
    </html>
  )
}

4. Pages Router 全局自定义加载 #

如果使用Pages Router，可在_app.js中监听路由状态实现全局加载：

// pages/_app.js
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import CustomLoading from '../components/CustomLoading'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const startLoading = () => setIsLoading(true)
    const endLoading = () => setIsLoading(false)

    router.events.on('routeChangeStart', startLoading)
    router.events.on('routeChangeComplete', endLoading)
    router.events.on('routeChangeError', endLoading)

    return () => {
      router.events.off('routeChangeStart', startLoading)
      router.events.off('routeChangeComplete', endLoading)
      router.events.off('routeChangeError', endLoading)
    }
  }, [router])

  return (
    <>
      {isLoading && <CustomLoading />}
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

内容的提问来源于stack exchange，提问作者Danny Coder