Next AI News is a full-stack replica of Hacker News (HN) that incorporates Next.js and AI-generated content. The project follows various design principles and utilizes a range of technologies for its implementation.
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
Pages
Home page
Forum Page
Details
- Technology Stack:
- Uses Next.js 14 with App Router and RSC on the Node.js runtime.
- All pages are server-rendered and dynamic, with no data caching.
- Mutations are performed via Server Actions.
- Streaming is utilized to maximize speed and concurrency.
- Package Management:
- Utilizes pnpm for package management.
- Data Layer:
- Employs Drizzle ORM and Zod as the data layer.
- Authentication:
- Uses Auth.js’s Next-Auth for password authentication.
- UI Generation and Styling:
- Initial UIs are generated with Tailwind, Shadcn UI, and Radix UI.
- Rust Compiler:
- Developed and tested with the new Next.js –turbo Rust compiler.
- Search Highlights:
- Implements react-highlight-words for search highlights.
- PPR (Partial-Page Rendering):
- Uses PPR (experimental) to precompute the shells of pages, serving them statically from the edge for faster TTFB and optimized CSS/fonts.
- Deployment:
- Deployed serverlessly on Vercel’s Edge Network.
- Utilizes Cron Jobs for AI generation.
- Serverless Functions (Node.js) for SSR.
- KV (Upstash) for rate-limiting.
- Postgres (Neon) for core storage and search with pg_trgm.
This project showcases a comprehensive and modern tech stack, emphasizing serverless deployment and AI integration for content generation. It leverages various tools and optimizations for enhanced performance and user experience.
Steps to install
# Clone this repo git clone https://github.com/rauchg/next-ai-news.git # Navigate to directory and install packages cd [folder] npm install # Start the App npm start
Live Demo & GitHub
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
