Best of Next.js β€” December 2024

  1. 1
    Article
    Avatar of robinwieruchRobin WieruchΒ·1y

    React Tech Stack [2025]

    Discover a comprehensive React tech stack for full-stack applications in 2025. Key components include Next.js for its powerful features, optional use of Astro for landing pages, Tailwind CSS for rapid styling, Shadcn UI for UI management, and various tools for data fetching, state management, authentication, and more. The stack is based on extensive research and practical experience from developing a profitable SaaS application.

  2. 2
    Article
    Avatar of hordeHordeΒ·1y

    First do it. Then do it right. Then do it better.

    The key message from a Next.js conference highlights the importance of starting projects even without full understanding, learning through the process, and improving iteratively. Embracing this approach can lead to personal and professional growth across various areas.

  3. 3
    Article
    Avatar of communityCommunity PicksΒ·1y

    Building In-App Notifications in Next.js

    In-app notifications are essential for keeping users engaged and informed about important updates and activities. This guide walks you through implementing a real-time notification system using Next.js and Stream, covering steps like setting up a Stream application, creating feed groups, building a Next.js app, and designing the notification interface. The tutorial also explains generating dynamic user tokens and deploying the application to Vercel.

  4. 4
    Article
    Avatar of nextNext.jsΒ·1y

    Next.js 15.1

    Next.js 15.1 introduces support for React 19, improved error debugging with enhanced source maps, and new APIs like `after`, `forbidden`, and `unauthorized`. These updates aim to enhance developer experience and provide more granular control over authentication and error handling.

  5. 5
    Video
    Avatar of youtubeYouTubeΒ·1y

    Build a Real-Time Google Docs Clone With Next 15, React, Tailwind (2024)

    Learn to build a functional Google Docs clone using modern web technologies like Next.js 15, React 19, and Tailwind CSS. The project supports real-time synchronization, collaborative editing, commenting, and more. Users can choose from various document templates, customize formatting, and export documents in multiple formats, including PDF and JSON.

  6. 6
    Article
    Avatar of communityCommunity PicksΒ·1y

    Justd

    Justd is a collection of accessible React UI components based on React Aria Components, designed for easy customization and integration into projects. It includes built-in Tailwind CSS for seamless styling. Various starter kits for frameworks like Next.js, Laravel, and Remix are provided. The project is open-source and available on GitHub for contributions.

  7. 7
    Article
    Avatar of communityCommunity PicksΒ·1y

    Chakra UI

    Chakra UI offers accessible React components to build high-quality web apps and design systems, compatible with Next.js. It streamlines design with semantic tokens, customizable typography, and component variants. Highly praised for its built-in dark mode, accessibility, and time-saving features, Chakra UI boasts significant community support and adoption.

  8. 8
    Video
    Avatar of bytegradByteGradΒ·1y

    Next.js Top 7 Security Best Practices (Checklist)

    Ensure the security of your Next.js applications by following a comprehensive checklist that includes dependency management, data validation, and setting up content security policies. Learn how to use tools like arcjet to protect against common vulnerabilities and automate security checks efficiently.

  9. 9
    Article
    Avatar of hnHacker NewsΒ·1y

    Why we switched to Astro (and why it might interest you)

    The post details the reasons and process behind migrating a website from Next.js to Astro. It highlights the benefits, such as simplified architecture and enhanced performance with server-side rendering. The new stack allows instant feedback for content edits and efficient caching strategies, resulting in a faster, more reliable user experience. Future articles will dive into practical aspects of using Astro with DatoCMS.

  10. 10
    Article
    Avatar of communityCommunity PicksΒ·1y

    Building a Discord Clone Using Next.js and Tailwind

    This series of blog posts guides you through building a clone of the Discord app using Next.js, Stream's Chat SDK, and Stream's Video SDK. The project is broken down into five parts: setup, server list creation, channel list customization, message list styling, and adding audio/video calling features. The posts provide detailed instructions and the full code is available on GitHub.

  11. 11
    Article
    Avatar of communityCommunity PicksΒ·1y

    leerob/next-saas-starter: Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui.

    A starter template for building a SaaS application using Next.js, Postgres, and Stripe. It offers features like authentication, Stripe payment integration, a marketing landing page, subscription management, and a user dashboard. The template includes instructions for setting up the environment, migrating and seeding the database, and deploying to Vercel.

  12. 12
    Article
    Avatar of communityCommunity PicksΒ·1y

    Building a Slack Clone with React and TailwindCSS

    Build a Slack-like collaboration app using React (Next.js), TailwindCSS, Prisma, and Stream SDKs. The guide covers project setup, database configuration, user authentication with Clerk, and creating a user interface. Follow the three-part series to add real-time messaging, video calls, and more, resulting in a robust app for team collaboration.

  13. 13
    Article
    Avatar of devsquadDev SquadΒ·1y

    Nexbase - A modern, design-focused next js v15 boilerplate.

    Nexbase is a modern SaaS boilerplate built with Next.js 15, TypeScript, Tailwind CSS, and other industry-leading tools. It emphasizes both design and development speed, with built-in security features, weekly updates, and comprehensive functionalities. Ideal for developers seeking high-quality and aesthetically pleasing projects.

  14. 14
    Article
    Avatar of communityCommunity PicksΒ·1y

    Adding AI Chat Features to a Modern Next.js Application

    This post guides you through building an AI-powered chat application using Next.js, Stream’s React Chat SDK, and a local LLM. Key features include listening for user messages to trigger LLM responses, generating dynamic channel names based on initial user prompts, and streaming AI responses in real-time. It highlights the importance of real-time message handling, dynamic content creation, and seamless AI integration, making for an engaging user experience.

  15. 15
    Article
    Avatar of opensourcefrontendOpen Source Front EndΒ·1y

    πŸš€ Cursify: A Cursor Animation Library for React & Next.js 🎨

    Cursify is a cursor animation library designed for React and Next.js projects, offering customizable cursor animations, plug-and-play components, and pre-built design templates. It is optimized for performance and helps in creating engaging animations for landing pages and marketing sites.

  16. 16
    Article
    Avatar of awsfundamentalsAWS FundamentalsΒ·1y

    Building a Social Stats Dashboard with SST & Next.js

    Learn how to build a Social Stats Dashboard for tracking AWS Fundamentals Newsletter subscribers using AWS Lambda, Serverless Stack (SST), and Next.js. This guide is tailored for AWS beginners and walks through setting up the infrastructure, fetching data from third-party APIs, and displaying it on a user interface using serverless components and functions.

  17. 17
    Article
    Avatar of nextjsNextJSΒ·1y

    Why I Created My Own CMS with Next.js as a Software Developer

    Building a custom CMS with Next.js offers tailored solutions for managing core models like Post, Category, Newsletter, and Comment, along with implementing robust authentication. Off-the-shelf CMS platforms like WordPress or Strapi can be either too restrictive or overly complex for specific needs, leading to the creation of a more effective custom solution.

  18. 18
    Video
    Avatar of youtubeYouTubeΒ·1y

    πŸ”΄ Lets build a Ticket Marketplace SAAS with NEXT.JS 15 (Convex, Stripe Connect, Clerk, Tailwind, TS)

    This post guides you through creating a full-stack ticket marketplace SaaS using Next.js 15, Convex, Stripe Connect, Clerk for authentication, and Tailwind CSS for styling. The app includes features such as real-time updates, queue systems for ticket buying, multiactor authentication, server-side functions, cron jobs, rate limiting, and automatic caching. The entire backend is managed by Convex, while Stripe Connect handles the payments and web hooks for transaction processing.

  19. 19
    Article
    Avatar of communityCommunity PicksΒ·1y

    Implementing Group Chat with Redis Pub/Sub in Next.js 15

    Discover how to build a scalable group chat application using Redis Pub/Sub and Next.js 15. Learn the fundamentals of Redis Pub/Sub, how to set up a Next.js project, and implement key features such as message sending, retrieval, and user management. The tutorial also addresses UI design and real-time functionalities, providing a foundation for building robust chat applications.

  20. 20
    Article
    Avatar of collectionsCollectionsΒ·1y

    Web Development Roadmap and Future Trends for 2025

    Web development is rapidly evolving towards 2025, driven by AI integration, and new tools and practices. Essential skills like HTML, CSS, and JavaScript remain foundational while frameworks such as React and Next.js streamline development. Key trends include Progressive Web Apps, Accelerated Mobile Pages, Single Page Applications, and serverless architecture. AI tools enhance customization, efficiency, and quality through chatbots, code review, and no-code platforms. Continuous learning and adapting to innovations like motion UI and micro frontends are crucial for developers to stay relevant.

  21. 21
    Article
    Avatar of freecodecampfreeCodeCampΒ·1y

    Next.js vs React – Differences and How to Choose the Right One for Your Project

    This post compares Next.js and React by exploring their differences, strengths, and optimal use cases for web development projects. It explains key concepts such as server-side rendering (SSR) and client-side rendering (CSR), as well as the benefits and drawbacks of each approach. The post provides practical advice on when to use React or Next.js based on project requirements like SEO, performance, scalability, and interactivity.