NextJS作品集网站添加单次显示限时启动屏方案咨询

实现思路 #

用 React 状态控制启动屏的显示/隐藏，结合 sessionStorage 灵活控制展示时机：

• 若要单次会话仅显示一次（刷新页面不再重复展示）：通过sessionStorage标记已展示状态
• 若要刷新页面也显示：移除sessionStorage的判断逻辑即可

步骤1：创建启动屏组件 components/SplashScreen.js #

import { useEffect, useState } from 'react';

const SplashScreen = () => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    // 设置启动屏显示时长（示例为4秒，可在3000-5000毫秒间调整）
    const timer = setTimeout(() => {
      setIsVisible(false);
    }, 4000);

    // 组件卸载时清理定时器
    return () => clearTimeout(timer);
  }, []);

  if (!isVisible) return null;
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      background: '#000', // 可替换为你的作品集主题色
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 9999,
      transition: 'opacity 0.5s ease-out' // 添加淡出过渡动画
    }}>
      {/* 自定义启动屏内容，比如logo、作品集名称等 */}
      <h1 style={{ color: '#fff', fontSize: '2rem' }}>你的作品集名称</h1>
    </div>
  );
};

export default SplashScreen;

步骤2：在 _app.js 中集成启动屏 #

方案A：单次会话仅显示一次（刷新不重复展示） #

import { useEffect, useState } from 'react';
import Top from '../components/top';
import SplashScreen from '../components/SplashScreen';

function MyApp({ Component, pageProps }) {
  const [showSplash, setShowSplash] = useState(false);

  useEffect(() => {
    // 检查会话是否已展示过启动屏
    const hasShown = sessionStorage.getItem('splashShown');
    if (!hasShown) {
      setShowSplash(true);
      // 标记已展示，会话内不再重复显示
      sessionStorage.setItem('splashShown', 'true');
    }
  }, []);

  return (
    <>
      {showSplash && <SplashScreen />}
      <Top />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方案B：刷新页面也显示启动屏 #

如果不需要会话内仅显示一次，直接移除sessionStorage逻辑即可：

import { useState } from 'react';
import Top from '../components/top';
import SplashScreen from '../components/SplashScreen';

function MyApp({ Component, pageProps }) {
  // 始终在页面加载时显示启动屏
  const [showSplash, setShowSplash] = useState(true);

  return (
    <>
      {showSplash && <SplashScreen />}
      <Top />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

自定义调整建议 #

• 时长调整：修改SplashScreen组件中setTimeout的毫秒数（3000=3秒，5000=5秒）
• 样式定制：替换背景色、文字内容、添加logo或动效，完全匹配你的作品集风格
• 动画优化：可以在隐藏时先修改透明度为0，延迟1秒后再销毁组件，让过渡更自然

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