Next.js 13中AOS(滚动动画库)无法正常工作问题求助

问题根源 #

你的代码存在两个核心问题：

1. 服务器组件误用客户端API：Home是异步服务器组件，直接在<Script>标签里调用AOS.init()会因服务器端无DOM环境导致初始化失效，不符合Next.js 13 App Router的运行规则。
2. 初始化时机不对：即便用<Script>执行代码，也没确保DOM加载完成后再初始化AOS，导致AOS无法识别带有data-aos属性的元素。

具体修复步骤 #

方案1：创建独立的AOS初始化客户端组件

1. 新建客户端组件components/AOSInit.jsx：

'use client';

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

export default function AOSInit() {
  useEffect(() => {
    AOS.init({
      // 可选配置，可按需调整
      duration: 1000,
      once: true, // 动画仅执行一次
    });
  }, []);

  return null;
}

2. 在Home组件中引入该初始化组件：

import Hero from "../components/index/Hero"
import ItSolutions from "@/components/index/ItSolutions"
import Skills from "@/components/index/Skills"
import AOSInit from "@/components/AOSInit";

const getData = async (type) => {
  const projectId = 'q8l0xi0c'
  const dataset = 'production'

  const query = encodeURIComponent(`*[_type == "${type}"]`)
  const url = `https://${projectId}.api.sanity.io/v2021-10-21/data/query/${dataset}?query=${query}`
  const response = await fetch(url)
  const data = (await response.json()).result
  return data
}

const Home = async () => {
  const members = await getData('member')
  const blogs = await getData('blog')
  const customers = await getData('customer')
  const solutions = await getData('solution')

  return (
    <div>
      <AOSInit />
      <Hero />
      <ItSolutions solutions={solutions} />
      <Skills />
    </div>
  )
}

export default Home

方案2：在Skills组件内直接初始化AOS

将Skills改为客户端组件，在内部完成AOS初始化：

'use client';

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

export default function Skills() {
  useEffect(() => {
    AOS.init({
      duration: 1000,
      once: true,
    });
  }, []);

  return (
    <div className="max-w-screen-xl mt-28 pt-36 px-4 pb-28 sm:px-16 md:px-8 lg:grid lg:grid-cols-2 
    lg:gap-20 lg:mt-16 xl:px-20 xl:mx-auto " data-aos="fade-up"> HI There
    </div>
  )
}

额外注意事项 #

• 确认已正确安装AOS：npm install aos --save 或 yarn add aos
• App Router中服务器组件无法导入CSS，因此AOS的样式必须在客户端组件中导入（上述两种方案已处理此问题）
• 可根据需求调整AOS配置，比如offset（触发动画的滚动偏移量）、easing（动画缓动效果）等参数

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