Next.js page.tsx使用useEffect实现启动页跳转报错解决方法

这个报错的核心原因是：Next.js 13+的App Router中，page.tsx默认是Server Component，而useEffect是React仅支持在Client Component中使用的客户端钩子，必须明确标记组件为客户端组件才能使用。

下面给两种可行的解决方式：

方式一：直接将page.tsx改为Client Component #

在你的启动页page.tsx最顶部（所有代码之前）添加"use client";指令，之后就可以正常使用useEffect和路由跳转逻辑了：

"use client";

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function SplashPage() {
  const router = useRouter();

  useEffect(() => {
    // 设置2秒后跳转目标页面
    const redirectTimer = setTimeout(() => {
      router.push('/your-target-page'); // 替换成实际要跳转的页面路径
    }, 2000);

    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearTimeout(redirectTimer);
  }, [router]);

  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '24px'
    }}>
      启动页加载中...
    </div>
  );
}

方式二：封装独立的Client Component处理跳转 #

如果不想把整个启动页改为Client Component（比如需要保留启动页的服务端渲染内容），可以把跳转逻辑抽成单独的客户端组件：

1. 创建components/SplashScreen.tsx文件，标记为Client Component并实现跳转逻辑：

"use client";

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function SplashScreen() {
  const router = useRouter();

  useEffect(() => {
    const redirectTimer = setTimeout(() => {
      router.push('/your-target-page');
    }, 2000);

    return () => clearTimeout(redirectTimer);
  }, [router]);

  return null; // 或者渲染跳转提示文本
}

2. 在启动页的page.tsx（仍为Server Component）中引入这个组件：

import SplashScreen from '@/components/SplashScreen';

export default function SplashPage() {
  // 这里可以渲染服务端生成的启动页内容
  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '24px'
    }}>
      启动页加载中...
      <SplashScreen />
    </div>
  );
}

注意事项 #

• 路由跳转要使用next/navigation中的useRouter，而非旧Pages Router的next/router；
• 必须清理定时器，避免组件卸载后定时器仍执行导致的异常；
• 如果启动页需要SEO友好的静态内容，优先选择第二种方式，保留page.tsx的Server Component特性。

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