https://github.com/sans-script/anime-vault
This project leverages Next.js 14 to build a server-side rendered application featuring Server Actions for backend logic, Infinite Scroll for dynamic data loading, and Framer Motion for smooth animations. I developed this application for educational purposes following a tutorial from JavaScript Mastery on YouTube.
https://github.com/sans-script/anime-vault
Last synced: 12 months ago
JSON representation
This project leverages Next.js 14 to build a server-side rendered application featuring Server Actions for backend logic, Infinite Scroll for dynamic data loading, and Framer Motion for smooth animations. I developed this application for educational purposes following a tutorial from JavaScript Mastery on YouTube.
- Host: GitHub
- URL: https://github.com/sans-script/anime-vault
- Owner: sans-script
- Created: 2024-07-12T00:11:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T01:00:03.000Z (almost 2 years ago)
- Last Synced: 2025-03-02T03:35:26.710Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://anime-vault-flame-kappa.vercel.app
- Size: 1.48 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Next.js 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
This project leverages Next.js 14 to build a server-side rendered application featuring Server Actions for backend logic, Infinite Scroll for dynamic data loading, and Framer Motion for smooth animations.
### Server Actions
Next.js 14 introduces Server Actions to seamlessly integrate server-side logic into the application flow. In the provided example, `fetchAnime` function in `action.ts` demonstrates fetching anime data from the Shikimori API (Application Programming Interface) server-side:
```typescript
"use server";
import { AnimeProp } from "@/components/AnimeCard";
export const fetchAnime = async (page: number) => {
const response = await fetch(
`https://shikimori.one/api/animes?page=${page}&limit=8&order=popularity`
);
const data = await response.json();
return data.map((item: AnimeProp, index: number) => (
));
};
```
### Infinite Scroll
The `LoadMore.tsx` component showcases Infinite Scroll functionality using `react-intersection-observer` to trigger data fetching as the user scrolls:
```tsx
import { useEffect, useState } from "react";
import { useInView } from "react-intersection-observer";
import { fetchAnime } from "@/app/action";
import AnimeCard from "./AnimeCard";
let page = 2;
function LoadMore() {
const { ref, inView } = useInView();
const [data, setData] = useState([]);
useEffect(() => {
if (inView) {
fetchAnime(page).then((res) => {
setData((prevData) => [...prevData, ...res]);
page++;
});
}
}, [inView]);
return (
<>
{data}
>
);
}
export default LoadMore;
```
### Framer Motion Animations
The `AnimeCard.tsx` component employs Framer Motion to animate the appearance of anime cards with smooth transitions:
```tsx
import Image from "next/image";
import { MotionDiv } from "./MotionDiv";
const variants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
};
function AnimeCard({ anime, index }: Prop) {
return (
{/* Anime card content */}
);
}
export default AnimeCard;
```
`MotionDiv.tsx`
```tsx
"use client";
import { motion } from "framer-motion";
export const MotionDiv = motion.div;
```
### Summary
Next.js 14 enables building robust server-side rendered applications with integrated Server Actions for backend operations, Infinite Scroll for dynamic content loading, and Framer Motion for enhancing user interface interactions with smooth animations. This combination enhances both performance and user experience in modern web applications.
### Metadata
- Title: Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
- URL: https://www.youtube.com/watch?v=FKZAXFjxlJI
### Notes
- Next.js server-side app with server actions, infinite scroll, and Framer Motion animations
- 🔍 Server actions in Next.js simplify API calls and business logic handling, streamlining development processes and reducing code complexity.
- 🔁 Infinite scroll implementation improves user engagement by seamlessly loading content as the user scrolls, enhancing the overall browsing experience.
- 🎨 Framer Motion integration allows for smooth and visually appealing animations within Next.js components, enhancing the app's aesthetic and interactivity.
- 🛠️ Balancing server-side rendering with client-side animations ensures a harmonious user experience, leveraging the strengths of both approaches effectively.
- 📊 Leveraging server actions for data fetching optimizes performance and responsiveness, enabling efficient handling of dynamic content updates.
- 💡 Tailoring animations to specific app features enhances user engagement and interaction, creating a more immersive and enjoyable user experience.
- 🚀 Understanding the practical benefits of server actions in real-world app development scenarios empowers developers to create efficient and dynamic applications.