Best of Next.js — April 2025

  1. 1
    Article
    Avatar of communityCommunity Picks·1y

    Why Companies Are Saying Goodbye to Next.js 🚪💨

    Developers and companies are increasingly moving away from Next.js due to issues like performance bottlenecks, overengineering, and vendor lock-in with Vercel. While Next.js offers benefits such as fast performance and SEO-friendly architecture, its complexities and limitations have made alternatives like Astro, Remix, and Qwik more appealing. For simpler, faster solutions, some developers are resorting to using React with Vite instead.

  2. 2
    Video
    Avatar of huxnwebdevHuXn WebDev·1y

    Next.js 15 Animations Masterclass: The Real Power Of Motion.dev

    Motion.dev is an advanced animation library for modern web projects using JavaScript, React, or Vue. It simplifies the creation of complex animations, providing extensive control over transformations and transitions. Installation is easy through npm, and it integrates seamlessly with frameworks like React and Next.js. Key components include the motion object, which leverages initial, animate, and exit props to manage animations effectively.

  3. 3
    Video
    Avatar of asaprogrammerAs a Programmer·1y

    Build Your Own AI Fitness Trainer for Free - Full Next.js Project

    The post provides a comprehensive guide on building an advanced AI fitness assistant using Next.js. The AI assistant interacts with users, gathers their fitness information, and generates personalized workout and diet plans. The project incorporates several technologies, including React, Clerk for authentication, Convex for the database, and Gemini for the language model. The application features a landing page, a user profile page, and program generation functionality, all while ensuring robust authentication and real-time capabilities.

  4. 4
    Video
    Avatar of bytegradByteGrad·1y

    AI Vibe Coding Tutorial + Workflow (Cursor, Best Practices, PRD, Rules, MCP)

    The post discusses a tutorial on building a daily joke app using AI code editors. It highlights the tools like Cursor, Visual Studio Code, and Windsurf, and explains the workflow for creating an app from scratch. Best practices, pitfalls to avoid, and the benefits of using AI in coding are emphasized. The tutorial also covers setting up backend services with Encore, implementing chron jobs, and managing database interactions seamlessly.

  5. 5
    Article
    Avatar of collectionsCollections·1y

    How to Build a Multi-Tenant EdTech SaaS Application with Next.js

    The guide provides detailed steps to build a multi-tenant EdTech SaaS application using Next.js. It covers setting up API calls with authorization, managing user roles with Zustand, and creating a responsive UI using Shadcn components. The backend integration includes using Permit.io for managing access, Appwrite for backend services, and creating a Node.js backend for added flexibility and security.

  6. 6
    Video
    Avatar of communityCommunity Picks·1y

    Build and Deploy a Multi-Tenant E-Commerce Platform with Next.js, React & Stripe Connect (2025)

    Build a multi-tenant e-commerce platform using Next.js, React, and Stripe Connect. Each merchant gets their own branded storefront with a unique subdomain. Customers can add products to their cart, checkout using Stripe, and leave reviews on purchased products. The setup suggests using bun for package management due to its speed and zero-config script running support. Merchants manage their products through a dashboard powered by Payload, while a super admin dashboard controls all platform entities.

  7. 7
    Article
    Avatar of auth0Auth0·1y

    Build an AI Assistant with LangGraph, Vercel, and Next.js: Use Gmail as a Tool Securely

    Learn how to build a personal AI assistant using LangGraph, Vercel AI SDK, and Next.js. This guide walks through integrating various tools such as Gmail, Google Calendar, and Google Drive securely by leveraging Auth0 for authentication and token management. The tutorial covers both unauthenticated tools like calculators and authenticated tools for accessing personal data, exemplified by implementing a Gmail search and draft feature.

  8. 8
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    Why is Next.js so slow??

    Server components in Next.js are under scrutiny for their performance, and while some apps using server components feel slow, the issue often lies with developer implementation rather than the technology itself. The post discusses the balance between client-side and server-side rendering, emphasizing the need for proper loading states and understanding of server behavior to optimize performance. Tools like Savala can streamline deployment by managing infrastructure needs such as CDNs and databases effectively.

  9. 9
    Video
    Avatar of bytegradByteGrad·1y

    The Ultimate Next.js Dashboard Stack (Shadcn, WebSocket / SSE, OLTP / OLAP Database)

    The video discusses building real-time analytical dashboards using Next.js, detailing how component libraries like Shadcn and Tremor can enhance the UI. It covers the use of WebSocket and Server-Side Events (SSE) for continuous data streaming between client and server. The importance of choosing the right database for transactional (OLTP) and analytical (OLAP) workloads is highlighted, recommending the use of DuckDB with Postgres and introducing Hydra for simplified management. A step-by-step guide on setting up this stack with a focus on real-time web analytics dashboards is provided.

  10. 10
    Article
    Avatar of nextjsNextJS·1y

    Beautiful Theme Switcher for Next.js apps

    A theme switcher component for Next.js applications, utilizing next-themes and Tailwind CSS, enables the support for system, light, and dark modes. Users can preview and install it directly or set it up quickly using the provided CLI command.

  11. 11
    Video
    Avatar of communityCommunity Picks·1y

    🎨 Build a Full Stack Canva Clone 2.0 with Next.js, React & Convex, ImageKit

    Learn to create a full stack Canva clone application using Next.js, React, Convex, and ImageKit. The guide covers setting up the workspace, implementing various editing features, and integrating AI for background removal and other image transformations. It also includes steps to manage user authentication and save designs in a Convex database, offering a comprehensive tutorial for building advanced web applications.

  12. 12
    Article
    Avatar of communityCommunity Picks·1y

    How to Build a Job Application and Interview Platform with Next.js, Stream, and Firebase How to Build a Job Application and Interview Platform with Stream.

    Learn how to build a comprehensive job application and interview platform using Next.js, Stream, and Firebase. This guide covers authentication, setting up database operations, real-time chat, and video calling features, providing a seamless experience for recruiters to post jobs, screen applicants, and conduct virtual interviews, while enabling job seekers to apply for jobs and communicate with recruiters within the application.

  13. 13
    Video
    Avatar of communityCommunity Picks·1y

    Ultimate ShadCN Tutorial 2025 | React Next.js ShadCN Dashboard Project

    Learn about the flexible and customizable ShadCN UI library, its integration with Radix UI for accessibility, and Tailwind CSS for styling. This tutorial covers building a responsive dashboard from scratch with components such as forms, dark mode, and more. Emphasizes the unique approach of ShadCN, where components are not pre-styled, allowing developers full control over the design.

  14. 14
    Article
    Avatar of robinwieruchRobin Wieruch·1y

    React.js AI Chat with OpenAI API

    This tutorial walks you through building a simple AI chat application using React.js, Next.js, and the OpenAI API. It covers setting up the development environment, installing the OpenAI SDK, creating an API route, and building a responsive front-end. The tutorial also includes steps to implement real-time streaming of OpenAI responses for a more interactive user experience.

  15. 15
    Article
    Avatar of supabaseSupabase·1y

    Supabase MCP Server

    Supabase has launched an official MCP (Model Context Protocol) server, allowing users to connect AI tools like Cursor and Claude directly to Supabase for tasks such as database management, data querying, and project configuration. The MCP server standardizes tool ecosystems, enhancing AI tool integration and enabling features like resource exposure and reusable prompts. Future enhancements include OAuth 2.0 support, improved schema discovery, and more database operation protections.

  16. 16
    Article
    Avatar of the_react_communityThe React Community·1y

    🚀 A Dev’s Dream Portfolio — Built with Next.js 15, MagicUI & AceternityUI

    Frontend Developer Kinh Bach shares his latest personal portfolio built using Next.js 15, MagicUI, and AceternityUI. The portfolio features stunning animated UI, modular and scalable architecture, and seamless theme support. Kinh highlights the importance of creating a custom portfolio and outlines future updates, including showcases, a dynamic projects section, and a timeline-based experience layout.

  17. 17
    Video
    Avatar of bytegradByteGrad·1y

    Next.js + Laravel Might Be The Ultimate Combination

    Learn how to combine Next.js with Laravel for a powerful web development setup. The guide walks you through using Laravel as a backend to expose API endpoints and Next.js for frontend UI, including deploying the Laravel app on Cloudways. It covers creating API routes, fetching data from Laravel into a Next.js application, and generating static pages for optimized performance.

  18. 18
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    Next.js 15.3: A Huge Change for Vercel

    Next.js 15.3 introduces significant improvements and course corrections, including Turbo Pack support for faster builds, a more modular approach with community support for RSpack, and the deployment adapters API for easier deployment on various platforms. These changes aim to enhance performance, modularity, and compatibility with different environments, demonstrating a major shift in Vercel's strategy to accommodate broader developer needs.

  19. 19
    Article
    Avatar of phProduct Hunt·1y

    Supabase UI Library - Drop-in components based on shadcn/ui & powered by Supabase

    Supabase UI Library offers customizable UI components based on shadcn/ui that can be easily integrated into Next.js, React Router, TanStack Start, or plain React projects. Features include Supabase Auth forms, Storage uploads, Realtime chat, cursors, and presence indicators.

  20. 20
    Video
    Avatar of developedbyeddevelopedbyed·1y

    Have you picked a framework yet?

    In 2025, the React ecosystem continues to evolve with significant changes in major frameworks. Next.js has introduced an adapter pattern for serverless deployments, while Remix and React Router have merged into React Router 7. The author discusses various approaches to building full stack applications, emphasizing the importance of understanding whether a project requires a dynamic or static setup. They highlight the advantages of single-page applications (SPAs), such as simplicity and speed, and cover new tools like Hano.js for better integration with modern runtimes. The post also compares different frameworks, discussing their pros and cons in terms of server-side rendering, initial load times, and caching mechanisms.

  21. 21
    Article
    Avatar of tigrisTigris·1y

    Going beyond vibe coding

    AI tools can simplify coding but can also introduce errors. The post highlights the importance of verifying AI-generated code, particularly when using language models for coding tasks. It discusses the challenges of handling environment variables in Next.js and cautions against blindly trusting AI-generated solutions without thorough checks.

  22. 22
    Article
    Avatar of microservicesioMicroservices.io·1y

    Vibe coding: the good, the almost, and the @#$%**

    This post discusses experiences using AI coding agents like GitHub Copilot, Junie, and Cursor. The author evaluates their performance in various development tasks, from creating Gradle plugins to setting up NextJS projects and handling configuration issues. While AI tools can increase productivity, they can also generate errors and confusion. Developers must carefully review AI-generated code and manage prompts effectively. Overall, AI coding assistants are useful, but they are not replacements for human developers.

  23. 23
    Video
    Avatar of bytegradByteGrad·1y

    Deploy Next.js To VPS With Dokploy (EASY!)

    Learn how to self-host a Next.js application on a VPS using Doc Ploy. The tutorial walks through setting up a GitHub repository, configuring a Hostinger VPS with Doc Ploy, and deploying your app while maintaining functionality such as fetching data with server actions and route handlers.

  24. 24
    Article
    Avatar of claraekekentaclaraekekenta's public Squad·1y

    Project Management Tool with ABAC Using Deepseek R1 and Permit.io

    AI has significantly impacted the tech sector; this tutorial introduces an AI-driven project management tool that utilizes ABAC for secure access control. The guide details setting up Appwrite for authentication and database storage, integrating Permit.io for defining user permissions, and using Deepseek R1 as the language model. The step-by-step instructions include creating accounts, setting up projects, and configuring access control policies.

See all Next.js archives