如何解决Next.js页面跳转时的闪烁问题？

页面闪烁的核心原因是你在useEffect中执行跳转逻辑——useEffect是客户端组件渲染完成后才触发的，此时当前页面内容已经渲染到DOM中，会先显示页面再执行跳转，从而产生视觉闪烁。

以下是几种无闪烁跳转的实现方案：

方案1：服务端预重定向（Pages Router 推荐） #

直接在服务端层面判断用户状态，提前完成重定向，客户端不会渲染当前页面，彻底避免闪烁。在页面组件中添加getServerSideProps：

export async function getServerSideProps(context) {
  // 从请求中获取用户信息（比如从Cookie、Session或数据库查询）
  const user = await getUserFromRequest(context.req);

  if (!user) {
    return {
      redirect: {
        destination: '/user/login',
        permanent: false,
      },
    };
  }

  return {
    props: { user }, // 将用户信息传递给页面组件
  };
}

// 你的页面组件
export default function HomePage({ user }) {
  return <div>已登录内容</div>;
}

方案2：客户端加载拦截（需配合AuthContext的loading状态） #

如果只能在客户端处理，必须在AuthContext中添加loading状态，在用户状态未确定前不渲染页面内容：

第一步：更新AuthContext，加入loading状态 #

import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true); // 初始化加载状态为true

  useEffect(() => {
    // 模拟获取用户信息（比如从localStorage或API请求）
    const fetchUser = async () => {
      const savedUser = localStorage.getItem('user');
      if (savedUser) {
        setUser(JSON.parse(savedUser));
      }
      setLoading(false); // 获取完成后关闭加载状态
    };

    fetchUser();
  }, []);

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuthContext = () => useContext(AuthContext);

第二步：在页面/Layout中拦截渲染 #

import { useAuthContext } from '../contexts/AuthContext';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function HomePage() {
  const { user, loading } = useAuthContext();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !user) {
      router.push('/user/login');
    }
  }, [user, loading, router]);

  // 加载中或未登录时，不渲染页面内容（可替换为加载动画）
  if (loading || !user) {
    return null;
  }

  return <div>已登录内容</div>;
}

方案3：Next.js App Router 全局拦截（推荐） #

如果使用Next.js 13+的App Router，用Middleware做全局路由拦截，这是最高效的方式：

// middleware.js
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 从Cookie中获取用户认证标识
  const userToken = request.cookies.get('auth-token');

  // 拦截未登录用户访问受保护页面的请求
  const isProtectedRoute = request.nextUrl.pathname === '/' || request.nextUrl.pathname.startsWith('/dashboard');
  if (!userToken && isProtectedRoute) {
    return NextResponse.redirect(new URL('/user/login', request.url));
  }
}

// 指定需要拦截的路径
export const config = {
  matcher: ['/', '/dashboard/:path*'],
};

或者在Server Component中直接使用redirect：

// app/page.js
import { redirect } from 'next/navigation';
import { getUser } from '@/lib/auth';

export default async function HomePage() {
  const user = await getUser();
  if (!user) {
    redirect('/user/login');
  }

  return <div>已登录内容</div>;
}

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