# 50days50projectsUseNextJs

**Repository Path**: pkmer/50days50projects-use-next-js

## Basic Information

- **Project Name**: 50days50projectsUseNextJs
- **Description**: 使用nextjs重新实现一遍50days50projects
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-03-21
- **Last Updated**: 2025-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 初衷

用 NextJS 实现[50days50projects](https://github.com/bradtraversy/50projects50days)中的案例，排解开发后端的郁闷

![projects](./attachments/images/image.png)

# 运行

```bash
pnpm run dev
```

# Icon

- [iconify](https://iconify.design/docs/icon-components/react/#ssr)

# 相关技术说明

1. 服务端请求数据统一使用next.js内置的fetch 有缓存的功能
2. 客户端请求数据（因为有些api是国外的需要科学上网，我的vscode获取不到api请求，所以只能在浏览器端处理），此时使用react query（缓存）

# case列表

## [01 Github Profiles](<./src/app/(cases)/github-profiles>)

<img src="./attachments/images/githubprofiles.gif" alt="示例图片" />

## [02 Clock](<./src/app/(cases)/theme-clock>)

<img src="./attachments/images/theme-clock.gif" alt="示例图片" />

## [03 Auto Text Effect](<./src/app/(cases)/auto-text-effect>)

<img src="./attachments/images/text-effect.gif" alt="示例图片" />

## [04 Jokes](<./src/app/(cases)/jokes>)

<img src="./attachments/images/jokes.gif" alt="示例图片" />

## [05 movie app](<./src/app/(cases)/movie-app>)

<img src="./attachments/images/movie-app.gif" alt="示例图片" />

## [06 sticky navbar](<./src/app/(cases)/sticky-navbar>)

<img src="./attachments/images/sticky-navbar.gif" alt="示例图片" />

## [07 kinetic-loader](<./src/app/(cases)/kinetic-loader>)

<img src="./attachments/images/kinetic-loader.gif" alt="示例图片" />

## [08 live user filter](<./src/app/(cases)/live-user-filter>)

<img src="./attachments/images/live-user-filter.gif" alt="示例图片" />

## [09 Double Click Heart](<./src/app/(cases)/double-click-heart>)

<img src="./attachments/images/double-click-heart.gif" alt="" />

## [10 testimonial box switcher](<./src/app/(cases)/testimonial-box-switcher>)

<img src="./attachments/images/testimonial-box-switcher.gif" alt="" />

## [11 Animated Countdown](<./src/app/(cases)/animated-countdown>)

<img src="./attachments/images/animated-countdown.gif" alt="示例图片" />

## [12 Border lineanimated](<./src/app/(cases)/border-line-animated>)

<img src="./attachments/images/border-line-animated.gif" alt="示例图片" />

## [13 Hoverboard](<./src/app/(cases)/hoverboard>)

<img src="./attachments/images/hoverboard.gif" alt="示例图片" />

## [14 Feedback UI Design](<./src/app/(cases)/feedback-ui-design>)

<img src="./attachments/images/feedback-ui-design.gif" alt="示例图片" />

## [15 Rotating navigation animation](<./src/app/(cases)/rotating-navigation-animation>)

<img src="./attachments/images/rotating-navigation-animation.gif" alt="示例图片" />

## [16 Simple Timer](<./src/app/(cases)/simple-timer>)

<img src="./attachments/images/simple-timer.gif" alt="示例图片" />

## [17 Verify Account UI](<./src/app/(cases)/verify-account-ui>)

<img src="./attachments/images/verify-account-ui.gif" alt="示例图片" />

## [18 Quiz App](<./src/app/(cases)/quiz-app>)

<img src="./attachments/images/quiz-app.gif" alt="示例图片" />

## [19 Good Cheap Fast](<./src/app/(cases)/good-cheap-fast>)

<img src="./attachments/images/good-cheap-fast.gif" alt="示例图片" />

## [20 adding-and-removing-items-animated](<./src/app/(cases)/adding-and-removing-items-animated>)

<img src="./attachments/images/adding-and-removing-items-animated.gif" alt="示例图片" />

## [21 toast-notification](<./src/app/(cases)/toast-notification>)

<img src="./attachments/images/toast-notification.gif" alt="示例图片" />

## [22 Event Keycodes](<./src/app/(cases)/event-keycodes>)

<img src="./attachments/images/event-keycodes.gif" alt="示例图片" />