Next.js如何实现欢迎页仅首次访问展示 重载页面时不再重复渲染

核心逻辑依赖localStorage存储用户的访问标记，首次访问后写入标记，后续进入页面直接跳过欢迎页渲染，修改后的代码如下：

import { useState, useEffect } from 'react';
import { AnimatePresence, motion } from 'framer-motion';

export default function Home() {
  // 初始值设为null避免SSR/SSG场景下服务端与客户端渲染不匹配
  const [showWelcome, setShowWelcome] = useState(null);

  useEffect(() => {
    // 仅客户端执行时读取本地存储标记
    const hasSeen = localStorage.getItem('hasSeenWelcome');
    if (hasSeen === 'true') {
      setShowWelcome(false);
      document.querySelector('body').classList.remove('loading');
    } else {
      setShowWelcome(true);
      document.querySelector('body').classList.add('loading');
    }
  }, []);

  // 欢迎页隐藏后写入访问标记
  useEffect(() => {
    if (showWelcome === false) {
      localStorage.setItem('hasSeenWelcome', 'true');
      document.querySelector('body').classList.remove('loading');
    }
  }, [showWelcome]);

  // 初始状态为null时不渲染内容，避免欢迎页闪烁
  if (showWelcome === null) return null;

  return (
    <AnimatePresence>
      {showWelcome ? (
        <motion.div key="loader">
          {/* Loader动画结束后调用setShowWelcome(false)即可，需要固定展示时长可在Loader内部加定时器触发 */}
          <Loader setLoading={setShowWelcome} />
        </motion.div>
      ) : (
        // 此处放置原有首页内容
        <div>首页正常内容</div>
      )}
    </AnimatePresence>
  );
}

补充说明 #

• 如果用户手动清除浏览器本地存储，再次访问时会重新展示欢迎页，属于正常逻辑
• 若需要跨子域共享访问标记，可以改用cookie存储，判断逻辑和上述代码完全一致

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