Best of Next.jsMarch 2025

  1. 1
    Article
    Avatar of communityCommunity Picks·1y

    Introducing the Supabase UI Library

    Supabase has released an official UI Library consisting of ready-to-use components built on shadcn/ui, compatible with various React frameworks. The library includes components for password-based authentication, file uploads, real-time cursor sharing, user avatars, and chat functionalities. These components are fully customizable with Tailwind CSS and designed to simplify the integration of complex features in your projects. Additionally, Supabase provides AI code editor rules to enhance development with Supabase and Postgres.

  2. 2
    Video
    Avatar of huxnwebdevHuXn WebDev·1y

    THE BIGGEST NEXT.JS COURSE ON THE INTERNET ( PART 1 )

    This post introduces the largest Next.js course available online, detailing the comprehensive curriculum which includes Next.js, Prisma, Drizzle, AJ, Clerk, Motion, GraphQL, Stripe, TRPC, testing frameworks, and design systems. The course aims to make participants proficient in Next.js by building over 50 projects and completing 100 challenges with 98% of the code written in TypeScript. Additionally, prerequisites include familiarity with React.js.

  3. 3
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Build a Social Learning Platform using Next.js, Stream, and Supabase

    Learn how to build a social learning platform connecting students with professionals using Next.js, Stream SDKs for video calls and chat, and Supabase for backend services. The platform allows students to view posts, follow instructors, and join video sessions, while instructors can schedule meetings, share posts, and create community channels. This comprehensive guide covers setting up authentication, creating user roles, adding video conferencing, and integrating group chat functionalities.

  4. 4
    Video
    Avatar of developedbyeddevelopedbyed·1y

    Reacts Big 2025 Comeback!

    Explore the new full-stack React framework called TanStack Start, which presents an alternative to Next.js. The post delves into the framework's setup and its integration with Cloudflare services such as durable objects and KV storage. It highlights TanStack Start's support for server-side rendering, streaming, and caching while maintaining ease of use and type safety. The tutorial also covers adding Tailwind CSS and a database, showcasing a complete project setup.

  5. 5
    Video
    Avatar of youtubeYouTube·1y

    Build an Enterprise Nextjs Rental App | AWS, EC2, Cognito, Shadcn, RDS, S3, Node, React

    This guide walks you through building a scalable, enterprise-grade rental application using Nextjs for the frontend and Node.js for the backend, fully deployed on AWS. The application features user authentication with AWS Cognito, property search with Mapbox integration, and comprehensive dashboards for both tenants and managers. Key technologies include Redux Toolkit, Tailwind CSS, Shadcn, and AWS services like EC2, S3, RDS, and API Gateway. Detailed instructions and code samples are provided for each step to help you understand and implement the entire setup.

  6. 6
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    Build a Full Stack AI Note Taking App with Next.js and Supabase

    Learn how to build a full-stack AI note-taking app using Next.js 15, Supabase, Prisma ORM, and OpenAI API through a step-by-step course by freeCodeCamp. This guide covers everything from project setup and database integration to adding AI-powered interactions and deploying on Vercel.

  7. 7
    Video
    Avatar of bytegradByteGrad·1y

    AI-Scraping Is Getting Crazy Easy Now

    Traditional web scraping required manually pinpointing data within HTML structures and managing infrastructure for requests. AI-based solutions like Scraperless simplify this process by allowing users to describe the desired data without specifying HTML details. Scraperless utilizes free-form prompts to determine scraping targets and offers integration via API keys, allowing developers to incorporate it into their applications seamlessly. Results are available in formats like CSV, making data handling straightforward with minimal user effort.

  8. 8
    Article
    Avatar of robinwieruchRobin Wieruch·1y

    Authorization in Next.js

    Learn how to implement authorization in Next.js applications using React Server Components, Server Actions, and the App Router. This guide explains the importance of enforcing authorization close to the data source, discusses different layers of authorization, and provides code examples for ensuring only authorized users can access and modify data. Additionally, it covers the use of middleware and layouts for route-based authorization and user experience enhancements.

  9. 9
    Article
    Avatar of lobstersLobsters·1y

    Why we ditched Next.js and never looked back

    Northflank encountered significant performance and scalability issues with Next.js, leading them to develop a custom server-side rendering solution using React and Express. They observed substantially faster page loads, improved SEO rankings, and reduced crashes after the switch. The team criticizes Next.js for being bloated, slow, and overly complex, especially when used at scale.

  10. 10
    Article
    Avatar of nextjsNextJS·1y

    Can you take a look to my agency site?

    A user seeks feedback on their agency website built with GSAP and NextJS. The site link is provided for review and suggestions.

  11. 11
    Video
    Avatar of fireshipFireship·1y

    Next.js rocked by critical 9.1 level exploit...

    A critical 9.1 security exploit affecting Next.js allows attackers to bypass authentication and authorization in middleware, putting many applications at risk. The vulnerability was discovered and reported on February 27th but was only patched on March 18th, leading to significant controversy and competitive drama between companies like Cloudflare and Vercel. Developers are advised to upgrade their Next.js apps immediately, especially if using middleware for security purposes, to mitigate potential damage.

  12. 12
    Article
    Avatar of communityCommunity Picks·1y

    Optimizing Next.js Applications: A Concise Guide

    Next.js has become a popular framework for building fast and SEO-friendly React applications, but as apps grow, they can become slow and inefficient. This guide covers strategies for optimizing performance, including reducing JavaScript bundle size, optimizing images, improving data fetching patterns, and preventing unnecessary re-renders. Additionally, advanced techniques like using incremental static regeneration, SWR for smart caching, and deploying to CDNs are discussed.

  13. 13
    Video
    Avatar of developedbyeddevelopedbyed·1y

    New React Animation API Is Insane

    Next.js 14.2 introduces page transitions in server components using the new view transitions API. This allows smooth fade and crossfade animations on page navigation and element state changes. The API supports official React packages and enables easy customization through CSS or JavaScript. It simplifies animation between states, including deletion and position transitions, enhancing the user experience with minimal code effort.

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

    “🚀 My New Portfolio – Built with Next.js & TailwindCSS! + WP RESTful API as Backend 🎨💻”

    Launched a new website to showcase work in UI/UX design, front-end development, and digital product strategy. Built using Next.js, TailwindCSS, and Wordpress RESTful API for the backend. Visit at https://iuiux.com and share feedback.

  15. 15
    Article
    Avatar of tech_hunterTechunter·1y

    🚀 Just Launched My Brand-New Portfolio! 🚀

    Check out my newly launched personal portfolio featuring dark/light mode, interactive dashboard, Spotify now playing, blog stats, city temperature, and more. Built with Next.js, Sanity CMS, React, and Tailwind. I appreciate your feedback!

  16. 16
    Video
    Avatar of awesome-codingAwesome·1y

    It's gonna get much worse...

    Recent Nex.js security vulnerability allowed attackers to bypass middleware-based security checks and access protected routes like admin dashboards and user settings. The issue highlights the need for multiple layers of security and raises concerns about the impact of easier web development tools leading to lower programming standards. Increased reliance on AI and decreased focus on code quality may contribute to ongoing security challenges.

  17. 17
    Article
    Avatar of uxuiUX/UI·1y

    Portfolio Website – Inspired by tailwindcss.com

    Explore a portfolio website built by a software developer and UI/UX designer using Next.js, Tailwind CSS, and shadcn/ui. The site features a clean, minimalistic design with dark mode, vCard integration, SEO optimization, and email protection. It also supports MDX & Markdown for blogs, with syntax highlighting and RSS feed integration. The source code is available on GitHub.

  18. 18
    Article
    Avatar of hnHacker News·1y

    kern/filepizza: :pizza: Peer-to-peer file transfers in your browser

    FilePizza is a peer-to-peer file sharing service using WebRTC to eliminate the need for intermediary servers. It features a modern UI with dark mode, mobile browser support, direct browser-to-browser transfers, password protection, and the use of Redis for out-of-process storage. Users can upload multiple files at once and monitor transfer progress, and files are encrypted during transfer. A hosted instance is available at file.pizza.

  19. 19
    Article
    Avatar of communityCommunity Picks·1y

    Welcome to Solito

    Solito is a library that combines React Native with Next.js, allowing developers to share navigation code across platforms. The project evolved from earlier works like expo-next-react-navigation and aims to streamline the hardest part of cross-platform development: navigation. Solito has gained significant community traction and includes patterns and examples for building powerful, cross-platform applications.

  20. 20
    Article
    Avatar of opensourcefrontendOpen Source Front End·1y

    Built an OSS implementation of WEB-RTC in Next.JS and Shad CN, with self hosted coturn

    Developed an open-source video-call and chat application using WebRTC and Socket.IO for signaling. The app, created with Next.js, Shad CN, Tailwind, and Flask, supports rooms with up to 3 people due to its mesh architecture. The platform ensures privacy with features like password-protected rooms, no storage or interception of data, and direct peer-to-peer communication without server-side processing. Configuration of self-hosted coturn was emphasized for effective traversal across ISPs.

  21. 21
    Article
    Avatar of twirThis Week In React·1y

    This Week In React #227: Next.js, tRPC, React Query, React Router, StyledComponents, MUI, Base UI, Next Intl

    This post highlights the Next.js middleware bypass vulnerability and its impact on self-hosted apps. Several new releases are mentioned, including React Query 5.69, tRPC 11.0, and Material UI 7.0. React Native celebrates its 10th anniversary with notable mentions of the community's contributions. Updates on tools like Rsdoctor, Base UI, and various React-related resources are also provided.

  22. 22
    Article
    Avatar of nextjsNextJS·1y

    New Next.js-powered & open-source framework for composable frontends

    Open Self Service is an open-source development kit designed to build composable Customer Service Portals. It integrates multiple APIs and headless services to decouple the backend from the frontend, offering features like a Next.js starter app managed with Strapi, an API harmonization server, and SDK integrations. The project is developer-focused, built with TypeScript, Next.js, React, NestJS, and Tailwind, and is highly customizable and extensible.

  23. 23
    Article
    Avatar of opensourcesquadOpen Source·1y

    Open Self Service - open-source composable frontend for Customer Portals

    Open Self Service (O2S) is an open-source development kit for creating composable Customer Service Portals. It decouples the backend from the frontend, integrates various APIs and headless services, and comes with a Next.js starter app managed by Strapi, an API harmonization server, and an SDK for seamless data fetching. Built with TypeScript, Next.js, React, NestJS, and Tailwind, it's customizable and extensible for developers.

  24. 24
    Video
    Avatar of communityCommunity Picks·1y

    🎙️Build & Deploy an AI Voice Agent for Education | Next.js, React, Tailwind, Convex, AssemblyAI

    Learn to build and deploy an AI-powered voice agent for educational purposes using a full-stack tech stack, including Next.js, React, Tailwind CSS, Convex, and AssemblyAI. This application will teach you how to convert text to speech and vice versa, perform mock interviews, learn languages, and more. The guide covers everything from setting up the project, integrating authentication, designing UI components, and managing data with Convex database.

  25. 25
    Video
    Avatar of wdsWeb Dev Simplified·1y

    Next.js Finally Fixed Caching

    Next.js has improved its caching mechanisms with the introduction of Dynamic IO and use cache features. These new tools simplify the caching process, making it more intuitive and less intrusive by default. Dynamic IO allows asynchronous code to automatically mark a page as dynamic, requiring explicit caching setup, while the use cache feature provides powerful caching options. These changes aim to offer better control and reliability for developers working with dynamic content.