LogRocket·1yBuilding an AI agent for your frontend project
AI is becoming increasingly important across multiple domains, providing substantial advantages. This tutorial guides you through building an AI agent from scratch, using BaseAI and Langbase, to create a webpage FAQ generator. The tutorial covers the entire process from setup to deployment, including building AI agents with memory using RAG technology and integrating AI agents into a Next.js frontend app.
ByteGrad·1yNext.js 15 Authentication COMPLETE Guide (+ Best Practices, Pitfalls)
This post provides a comprehensive guide on implementing authentication in Next.js 15, emphasizing server-side security, proper use of cookies and tokens, and the importance of roles and permissions. It highlights best practices and pitfalls to avoid when using server components and middleware to protect routes and actions. Additionally, it underscores the benefits of using third-party services for authentication to avoid errors and save development time.
freeCodeCamp·1yHow to Optimize Next.js Web Apps for Better Performance
Learn key techniques to optimize the performance of Next.js web applications, including using the Next.js Image and Script components, removing unused dependencies, caching, Incremental Static Regeneration (ISR), font optimization, lazy loading, and code splitting. These strategies enhance user experience by improving speed, reducing load times, and ensuring efficient resource use.
As a Programmer·1yNext.js Tutorial 2025 - Build a Full Stack Social App with React & Next.js
Learn to build a full stack social media application using React and Next.js. This detailed guide covers implementing core features like user authentication with Clerk, post creation, comments, likes, and notifications. The project also includes updating profiles, enabling dark mode, and ensuring a responsive UI design with Tailwind CSS. You will also integrate a PostgreSQL database using Prisma ORM and Neon, demonstrating key functionalities step-by-step.
Theo - t3․gg·1yMy Biggest Tutorial Ever (Build A FULL Google Drive Clone with React, Next, TypeScript and more)
In this extensive tutorial, the author shares a comprehensive guide on building a full Google Drive clone from scratch using React, Next.js, TypeScript, and other modern tools. By diving into real-world development scenarios, including debugging and using AI tools, the tutorial aims to provide a holistic learning experience. Key points include setting up the project, using various tools and technologies, deploying early, and ensuring smooth development workflows with effective debugging and deployment strategies. The tutorial is made possible by the support of several sponsors and is designed to be accessible to learners for free.
Web Dev Simplified·1yBuild A Course Platform LMS With Next.js 15, React 19, Stripe, Drizzle, Shadcn, Postgres
The post provides a detailed tutorial on how to build a course platform LMS using Next.js 15, React 19, Stripe, Drizzle, and Postgres. The platform allows users to purchase individual courses or bundles, with functionalities for signing in, processing payments, viewing purchase histories, and marking course progress. The admin side includes dashboards to manage sales, refunds, courses, and products. Key practices include setting up databases with Drizzle, using the canary version of Next.js for the latest features, and integrating Clerk for user management. This comprehensive guide also covers best practices and the technical reasons behind various coding choices.
ByteGrad·1yBuild A Next.js SaaS From Scratch (Step-By-Step)
Learn to build a full-stack Next.js SaaS application from scratch. The tutorial covers the creation of a landing page, a private dashboard for tracking expenses, user authentication, integration with Stripe for payments, and adding analytics using Posthog. Key Next.js concepts such as server components, routing, and database interaction are also explained.
As a Programmer·1yVideo Calling Interview Platform: Build a Full Stack Project with React & Next.js
The post provides a comprehensive guide to building a video calling interview platform with React and Next.js. Key features include video and audio calls, screen sharing, a code editor with support for multiple programming languages, and interview management functionalities for candidates and interviewers. The project utilizes Convex for a real-time database, Clerk for authentication, and Stream for video calls, ensuring that all required tools are free to start. Detailed instructions are provided for setting up and deploying the application.
DEV·1yI Built an Open-Source Code Snippet Collection
SnipNest is an open-source collection for storing and sharing code snippets, created to alleviate the frequent need to search for the same solutions repeatedly. It uses MDX files for organizing snippets with metadata and offers a Visual Studio Code extension for easy access. The project encourages community contributions to expand its repository.
JavaScript Mastery·1yBuild and Deploy a Fullstack App with Admin Dashboard | Next.js, PostgreSQL, Redis, Auth.js
This post guides you through building and deploying a production-grade University Library management system using Next.js, PostgreSQL, Redis, and Auth.js. The project consists of two interconnected applications within a monorepo architecture, teaching industry-standard practices such as rate limiting, DDoS protection, caching, database queries, multimedia uploads, and automated workflows. Technologies like Tailwind CSS, Drizzle ORM, and ImageKit are used to create a polished and scalable application, catering to both user-facing and admin interfaces.
YouTube·1yHow I Code Apps SOLO That Actually Make Money (Idea + Build + Marketing Guide)
This guide explains how to think of an app idea, build it, and market it to make money. The author, having built over 14 apps and making a stable income from them, suggests copying existing app ideas to validate the market quickly, choosing popular tech stacks like Next.js for web apps and Expo for mobile apps for better support, and leveraging platforms like Supabase and Stripe for backend solutions and payment processing. Marketing strategies include social media and Reddit advertising, focusing on what works and iterating over time for better results.
ByteGrad·1yStream Video In React & Next.js OPTIMALLY (WebM, CDN, m3u8 / HLS / ABS, ImageKit)
Learn how to optimally stream videos using React and Next.js, including adaptive bitrate streaming for different network conditions. The tutorial explains the use of the native video tag and Video.js player for HLS streaming, and the benefits of hosting videos on ImageKit, such as automatic format and quality optimization, CDN integration, and using signed URLs for security.
ByteGrad·1yNext.js Multi-Tenant & Local-First Apps Are Easy Now
SQLite can be challenging to use in production, but Turo, a sponsor of the video, simplifies the process by allowing easy setup of multi-tenant and local-first apps. Turo can manage numerous databases, create embedded replicas for low latency, and even integrate AI capabilities like storing vector embeddings. In a demo, the post shows creating a Next.js app with Turo's database management, showcasing benefits like simple database replication, creating multi-database schemas, and enabling point-in-time recovery.
Theo - t3․gg·1ySSR, ISR, PPR? Breaking Down JS Rendering For 2025
The post dives deep into different methods of rendering web applications: Server Side Rendering (SSR), Incremental Static Regeneration (ISR), and Purely Pre-Rendered (PPR). It highlights the evolution of these techniques over time, their benefits, drawbacks, and how they impact frameworks like Next.js, React, and others. The post uses diagrams and real-world examples to explain the complexities and optimizations in web rendering strategies, providing a comprehensive understanding of current and future trends in web development.
Community Picks·1y🤖 Build an AI Travel Planner with CopilotKit, LangGraph & Google Maps API 🤩
Learn how to enhance a travel planner application with AI using CopilotKit, LangGraph, and Google Maps API. This tutorial covers integrating an agentic copilot, real-time state updates, and implementing human-in-the-loop workflows, offering a comprehensive guide to building and deploying the application.
NextJS·1yBuilding an Animated Link Component with react-rough-notation in Next.js
Learn how to create an animated link component using react-rough-notation in Next.js. This guide covers the implementation details, including installing necessary dependencies, creating utility functions, and applying customizable animation styles. It also demonstrates various use cases such as customizing styles, supporting responsive design, and enhancing accessibility.
AI ❤️ JS·1yAI Powered Logo Generator (It's Open Source)
An AI-powered logo generator has been created featuring AI-based logo creation, style presets, color and size customization, user history, and a public gallery. It is built using Next.js, TypeScript, Tailwind CSS, Nebius AI, PostgreSQL, and Vercel. Feedback is welcome.
Community Picks·1yAdvanced Web Analytics for React Apps
ReactLens Analytics provides a privacy-first, real-time analytics solution for React and Next.js apps. It offers simple integration, customizable dashboards, and in-depth user behavior analysis, ensuring compliance with GDPR while collecting anonymous usage data.
