Next.jsReact启动器

nextjs-with-aos-example — Next.js 启动器模板

作者 brunos3d

一个在 Next.js 项目中集成 AOS 滚动动画库的示例启动器，演示如何初始化 AOS 并为禁用 JavaScript 的浏览器补充样式。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

演示在 Next.js 中集成 AOS 滚动动画库的完整接入方式

02

在 _app.tsx 中随页面初始化 AOS

03

在 _document.tsx 中为 AOS 推断样式，兼顾禁用 JavaScript 的浏览器

04

基于 create-next-app 的 TypeScript 起始模板，结构熟悉

05

提供在线演示站点，可直接查看滚动动画效果

06

采用 MIT 许可，允许免费使用、修改、商用和分发

模板详细介绍

该模板是一个基于 Next.js 的示例项目，核心目的是在 Next.js 应用中接入 Animate On Scroll Library（AOS），实现滚动触发的元素显现动画。作者在 README 中说明，创建它的动机是：直接在项目中反复添加滚动事件监听容易带来维护和性能上的麻烦，因此把滚动动画的职责交给 AOS 处理。

模板重点处理了 AOS 在 Next.js 中的两个接入点：在 _app.tsx 中随页面初始化 AOS，以及在 _document.tsx 中为 AOS 推断样式，使 JavaScript 被禁用的浏览器也能正常显示内容。项目结构沿用 create-next-app 的 TypeScript 起始模板，README 提到该基础模板来自 João Pedro Schmitz。

使用方式有两种：通过 create-next-app 的 -e 参数直接以该仓库为模板创建项目，或克隆仓库后在项目目录执行依赖安装与开发命令，默认在本地 3000 端口预览。仓库采用 MIT 许可，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材需单独核对许可，域名、托管等外部服务也可能另行收费。

Next.jsReact启动器

适合你的项目吗？

适用场景

  • 需要在 Next.js 项目中加入滚动触发显现动画时，参考其接入写法
  • 想了解 AOS 在 Next.js 的 _app 与 _document 中如何配置时，作为对照示例
  • 以 create-next-app 模板方式快速起一个带滚动动画的 TypeScript 项目
  • 评估把滚动动画逻辑从自写事件监听迁移到 AOS 的可行性

适合人群

  • 使用 Next.js 与 React 的前端开发者
  • 需要在页面中加入滚动动画效果的开发者
  • 希望以现成模板快速启动 TypeScript 项目的开发者
  • 想参考 AOS 在 Next.js 中初始化与样式处理方式的学习者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    推荐使用 npx create-next-app ts-next -e https://github.com/brunos3d/nextjs-with-aos-example 直接以该仓库为模板创建项目

  2. 2

    也可克隆仓库后在项目目录执行 npm install 或 yarn 安装依赖

  3. 3

    安装完成后运行 yarn dev 启动开发服务器

  4. 4

    在浏览器打开 http://localhost:3000 查看项目

  5. 5

    演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/brunos3d/nextjs-with-aos-example/blob/main/LICENSE.mdhttps://github.com/brunos3d/nextjs-with-aos-example/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 77 / 100
技术栈
Next.js · React
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2024-01-11
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 176160af77a0bd2b33eeb981967462532194c9554fe46fb484e6ed763b293c7c

2026-10-02T20:45:56.282Z

来源文件 / 仓库
# nextjs-with-aos-example

🔺 NEXT.JS - Example project using Next.js with [Animate On Scroll Library](https://www.npmjs.com/package/aos).

### 🚀 [Demo](https://nextjs-with-aos-example.vercel.app/)

## 💬 Explanations

This project was created from the need to implement `reveal scroll animations` in projects using [Next.js](https://nextjs.org/).
As simple as it sounds, most of the time it becomes a headache when you start running into performance issues from multiple additions of event listeners to your site's DOM.
One solution is to externalize this responsibility using [AOS](https://www.npmjs.com/package/aos).
However this has some points of attention such as for example:
- [Initialize AOS](https://github.com/BrunoS3D/nextjs-with-aos-example/blob/461faf6325f8599ee09f226d15774c8905e2fdab/src/pages/_app.tsx#L10) with your page
- [Infer styles](https://github.com/BrunoS3D/nextjs-with-aos-example/blob/461faf6325f8599ee09f226d15774c8905e2fdab/src/pages/_document.tsx#L18) for AOS to work on browsers whose javascript has been disabled

With this I decided to create a template that helps me in creating projects with next using everything that is best created by my friend [João Pedro Schmitz](https://github.com/jpedroschmitz).

## 🚀 Getting started

The best way to start with this template is using `create-next-app`.

```
npx create-next-app ts-next -e https://github.com/brunos3d/nextjs-with-aos-example
```

If you prefer you can clone this repository and run the following commands inside the project folder:

1. `npm install` or `yarn`;
2. `yarn dev`;

To view the project open `http://localhost:3000`.

**After your pull request is merged**, you can safely delete your branch.

## 📝 License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.

---

Template made by [João Pedro Schmitz](https://github.com/jpedroschmitz)

AOS Implementations made with 💜 by [Bruno Silva](https://github.com/brunos3d)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

ai-website-cloner-template

ai-website-cloner-template

Clone any website with one command using AI coding agents

Next.js · 启动器

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …

Next.js · 电商

Next-js-Boilerplate

Next-js-Boilerplate

Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。

Next.js · 启动器

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

next-forge

next-forge

Production-grade Turborepo template for Next.js apps.

Next.js · 启动器