Next.js如何创建全局根组件实现页面刷新时的统一鉴权请求

Next.js 本身提供全局统一的应用根入口，不需要在每个页面重复编写逻辑，根据项目使用的路由模式选择对应实现即可，两种方案都能覆盖全部路由路径（包括根路径、/login、/register、/profile等），且逻辑仅在F5刷新、新标签页打开站点时执行，客户端路由跳转不会重复触发。

方案1：Pages Router 模式（匹配你提供的项目结构） #

从你给出的项目文件结构判断，当前项目使用的是Pages Router模式，该模式自带全局自定义App组件，作用等价于原生React的App.js根组件，对应文件路径为pages/_app.tsx（JS项目则为pages/_app.js）。这个组件会自动包裹所有业务页面，且在整个应用生命周期中仅挂载一次，客户端路由跳转不会触发组件重挂载。

• 实现步骤：
  • 若pages目录下没有_app.tsx文件，直接新建即可，Next.js会自动识别该文件为全局根入口
  • 在文件中编写鉴权逻辑，通过空依赖数组的useEffect即可保证逻辑仅在首次加载时执行
    示例代码：

// pages/_app.tsx
import type { AppProps } from 'next/app'
import { useEffect } from 'react'
import { fetchAuthStatus } from '@/api/user' // 替换为你项目实际的鉴权请求方法

export default function GlobalApp({ Component, pageProps }: AppProps) {
  // 空依赖数组：仅在组件首次挂载（刷新/新标签页打开）时执行，客户端路由跳转不会触发
  useEffect(() => {
    // 请求默认会自动携带域名下的cookie
    fetchAuthStatus()
  }, [])

  return <Component {...pageProps} />
}

注意：该文件自动生效于所有路由，不需要在任何单独页面引入或重复编写逻辑。

方案2：App Router 模式（Next.js 13+ 版本适用） #

如果后续项目升级为Next.js 13+的App Router模式，全局根入口为app/layout.tsx，由于根layout默认是服务端组件，需要单独抽离客户端组件承载鉴权逻辑，同样可以实现全局一次挂载的效果：

• 实现步骤：
  • 新建客户端全局Provider组件，标记为客户端组件
  • 在根layout中引入该组件，包裹所有页面内容
    示例代码：

// app/components/AuthProvider.tsx
'use client' // 必须添加该标记，声明为客户端组件
import { useEffect } from 'react'
import { fetchAuthStatus } from '@/api/user'

export default function AuthProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    fetchAuthStatus()
  }, [])

  return <>{children}</>
}

// app/layout.tsx
import type { Metadata } from 'next'
import AuthProvider from './components/AuthProvider'

export const metadata: Metadata = {
  title: '站点名称',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  )
}

逻辑生效原理 #

不管是Pages Router的_app.tsx还是App Router中挂载在根layout的客户端Provider，都属于应用级根节点。Next.js客户端路由跳转（通过next/link、router.push触发的跳转）只会更新页面级别的组件内容，不会卸载重挂载全局根节点，配合空依赖的useEffect，就能精准实现需求，不需要在单个页面写重复代码。

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