Next.js纯静态客户端渲染页面中自定义404错误页的实现方案咨询

没问题，我来帮你搞定纯静态Next.js页面的自定义404处理！

对于纯静态页面，我们没法依赖SSR/ISR的服务器端判断逻辑，所以得在客户端完成URL有效性校验，再决定渲染正常内容还是自定义404页面。下面是适配你的需求的完整解决方案：

核心思路 #

1. 预定义或导入所有有效的用户名列表（因为是静态页面，所有可访问的用户名应该是已知的）
2. 监听路由参数和用户认证状态，双重校验URL有效性与用户权限
3. 分层处理渲染逻辑：加载状态 → 无效URL（404）→ 未登录提示 → 正常用户页面

修改后的完整代码 #

import { onAuthStateChanged } from "firebase/auth";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { auth } from "../../lib/firebase";

// 替换成你实际的有效用户名列表，也可以从静态JSON文件导入
const VALID_USERNAMES = ["john_doe", "jane_smith", "ibraheem_haseeb"];

export default function Username() {
  const [currentUser, setCurrentUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isValidUsername, setIsValidUsername] = useState(false);
  const router = useRouter();
  const { username } = router.query;

  useEffect(() => {
    // 校验用户名是否在有效列表中
    const checkUsernameValidity = () => {
      if (typeof username === "string") {
        setIsValidUsername(VALID_USERNAMES.includes(username));
      } else {
        setIsValidUsername(false);
      }
    };

    // 监听Firebase认证状态变化
    const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      setIsLoading(false);
    });

    // 初始化校验用户名，路由变化时重新校验
    checkUsernameValidity();

    // 清理监听，避免内存泄漏
    return () => {
      unsubscribeAuth();
    };
  }, [username]); // 路由参数变化时重新执行

  // 加载中状态
  if (isLoading) {
    return <div className="loading">Loading...</div>;
  }

  // 无效URL，渲染自定义404页面
  if (!isValidUsername) {
    return (
      <div className="custom-404-container">
        <h1>404 - 页面不存在</h1>
        <p>你访问的用户页面不存在，请检查URL是否正确</p>
        <Link href="/">
          <button className="btn">返回首页</button>
        </Link>
      </div>
    );
  }

  // 未登录状态提示
  if (!currentUser) {
    return (
      <div className="auth-required-container">
        <h1>请先登录</h1>
        <p>登录后才能查看该用户页面</p>
        <Link href="/login">
          <button className="btn">前往登录</button>
        </Link>
      </div>
    );
  }

  // 正常渲染用户页面
  return (
    <div className="username-main-container">
      <div className="username-container">
        <div className="user-img-container">
          <img 
            src={currentUser.photoURL} 
            alt={currentUser.displayName} 
            className="user-img" 
          />
        </div>
        <div className="information-container">
          <h1>{currentUser.displayName}</h1>
          <Link href={`/${username}/public`}>
            <button className="btn">发送匿名消息</button>
          </Link>
        </div>
      </div>
    </div>
  );
}

关键细节说明 #

• 静态用户名校验：因为是纯静态页面，所有可访问的用户名必须是预定义的（可以放在单独的JSON文件里导入，方便维护），这样在客户端就能直接判断URL是否有效。
• 状态监听优化：把auth实例直接替换成回调返回的user对象，逻辑更清晰，避免不必要的状态传递。
• 分层渲染逻辑：从加载状态到错误状态再到正常状态，逐步处理，用户体验更流畅。
• 内存泄漏防护：在useEffect返回函数中清理Firebase的认证监听，避免组件卸载后出现内存泄漏。

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