News-app-master
所属分类：搜索引擎
开发工具：TypeScript
文件大小：124KB
下载次数：0
上传日期：2023-05-11 17:00:45
上 传 者：
sh-1993
说明： 使用Next13.3、TypeScript、Tailwind构建的新闻web应用程序，具有实时数据。使用下一主题的暗光模式。的GraphQL...
(News web app with live data built with Next13.3,TypeScript, Tailwind. Dark/Light mode using next-themes. GraphQL for batching multiple api calls. StepZen for generating TypeScript definitions automatically. Live data pulled via Mediastash Api. Revalidation and prebuilding pages with generateStaticParams reducing wait time.)
文件列表:
main (0, 2023-05-12)
main\.eslintrc.json (116, 2023-05-12)
main\.vscode (0, 2023-05-12)
main\.vscode\settings.json (107, 2023-05-12)
main\app (0, 2023-05-12)
main\app\Article.tsx (1385, 2023-05-12)
main\app\DarkModeButton.tsx (1020, 2023-05-12)
main\app\Header.tsx (1335, 2023-05-12)
main\app\Navlink.tsx (292, 2023-05-12)
main\app\Navlinks.tsx (731, 2023-05-12)
main\app\NewsList.tsx (393, 2023-05-12)
main\app\Providers.tsx (251, 2023-05-12)
main\app\ReadMoreButton.tsx (564, 2023-05-12)
main\app\SearchBox.tsx (1144, 2023-05-12)
main\app\TimeStamp.tsx (181, 2023-05-12)
main\app\[article] (0, 2023-05-12)
main\app\[article]\page.tsx (1515, 2023-05-12)
main\app\globals.css (470, 2023-05-12)
main\app\head.tsx (233, 2023-05-12)
main\app\layout.tsx (487, 2023-05-12)
main\app\loading.tsx (199, 2023-05-12)
main\app\news (0, 2023-05-12)
main\app\news\[category] (0, 2023-05-12)
main\app\news\[category]\page.tsx (635, 2023-05-12)
main\app\page.tsx (291, 2023-05-12)
main\app\search (0, 2023-05-12)
main\app\search\page.tsx (613, 2023-05-12)
main\constants.ts (142, 2023-05-12)
main\curl (0, 2023-05-12)
main\curl\index.graphql (563, 2023-05-12)
main\index.graphql (62, 2023-05-12)
main\lib (0, 2023-05-12)
main\lib\fetchNews.ts (1844, 2023-05-12)
main\lib\sortNewsByImage.ts (533, 2023-05-12)
main\next.config.js (134, 2023-05-12)
main\package-lock.json (259837, 2023-05-12)
main\package.json (846, 2023-05-12)
main\pnpm-lock.yaml (98138, 2023-05-12)
... ...
Currecntly: fixing few bugs in production related to caching and read the more ts file
preview of the app can be found below
News Web Application with Live Data
This is a web application built with Next13.3, TypeScript, and GraphQL, utilizing StepZen for generating TypeScript definitions automatically. Live data is pulled via the Mediastash API with revalidation of stale data every 20 seconds using next revalidate, prebuilt pages along with instant caching to reduce wait time and pulling dynamic data at each request. The application also includes a dark/light mode feature using next-themes and tailwindcss.
Technologies Used
- Next13.3
- TypeScript
- GraphQL
- StepZen
- Mediastash API
- Next-Themes
- TailwindCSS
Features
- Live data from the Mediastash API with revalidation
- GraphQL for efficient batching of multiple API calls
- Automatic TypeScript definition generation with StepZen
- Prebuilt pages to reduce wait time
- Streaming SSR for incremental rendering parts of UI to the client.
- Custom svg loader using React Suspense under the hood.
- Dark/light mode feature with next-themes and tailwindcss
Installation and Usage
- Clone the repository:
git clone https://github.com/your-username/news-web-app.git
- Install dependencies:
npm install or yarn or pnpm install
- Start the development server:
npm run dev or yarn run dev or pnpm run dev
- Open http://localhost:3000 in your browser to view the app.
Contributing
Contributions are welcome! Please feel free to open issues or pull requests.
近期下载者：
相关文件：
收藏者：