Community Picks·2yTop Next.js Tools for Next-Gen Developers
Next.js is a powerful React framework ideal for building performance and SEO-friendly web applications. This post highlights essential tools for developers to enhance productivity, including those for SEO, authentication, data management, UI component testing, and styling. Key tools such as NextAuth.js, Prisma, Tailwind CSS, Storybook, Jest, and Cypress are covered to help streamline development and ensure high-quality applications.
Community Picks·2yBuild an Invoice App with Next.js 15
Learn to build a full stack invoice app using Next.js 15, TypeScript, Tailwind, and Shaden components. The app will allow invoice creation, payment processing through Stripe, and email notifications via Resend. It leverages new React 19 APIs and uses Drizzle ORM to manage Postgres data. The app includes social login, multi-factor authentication through Clerk, and is deployed on Vercel.
freeCodeCamp·2yMobile App Development Course with React Native, Supabase, Next.js
Learn to build a complete e-commerce mobile app with React Native, Supabase, Stripe, and Next.js through a comprehensive freeCodeCamp course. The course covers front-end design, secure back-end setup, payment integration, and deployment, making it ideal for full-stack developers aiming to enhance their skills.
Web Dev Simplified·2yBuild a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind
Learn how to build a modern full-stack application using Next.js, TypeScript, Drizzle, ShadCN, and Tailwind CSS. The tutorial covers setting up a clone of Calendly that integrates with Google Calendar, allowing users to schedule events based on availability. The steps include user authentication using Clerk, database setup with Postgres and Neon, and utilizing Tailwind CSS for styling.
MDN Blog·2yFixing your website's JavaScript performance
Web performance can be hit hard by JavaScript issues like long tasks, large bundle sizes, and hydration. Long tasks lock the main thread, blocking user interactions; large bundles slow down download, parse, and execution times; and hydration can delay interactivity in server-rendered pages. Strategies to address these include breaking up JavaScript work, using Web Workers, implementing tree shaking, code splitting, lazy loading, and considering alternatives to popular JavaScript frameworks that may improve performance.
Coding in Public·2yFavorite New Tailwind Extension
Fluid Tailwind is a new plugin that leverages the CSS clamp function to allow smooth transitions of values like padding, margin, and text sizes within Tailwind CSS. This plugin simplifies writing Tailwind classes and enhances UX by providing fluid transitions between values. The post also guides on setting up and configuring the plugin properly to work with Tailwind's default settings.
YouTube·2yBuild a 3D Ecommerce Landing Page with Next.js 14, GSAP, Three.js and Prismic - Full Course 2024
The post details a comprehensive course aimed at building an interactive 3D e-commerce landing page using Next.js, GSAP, Three.js, and Prismic. The project revolves around creating a stunning website for a fictional soda brand named Fizzy. The course covers foundational aspects using Next.js and Prismic for scalability and management, designing with Tailwind CSS, adding animations with GSAP, and incorporating 3D effects with Three.js. The post assures step-by-step guidance for users of all levels, highlighting the customizable nature of the project, and provides resources and support materials.
Community Picks·2yBuilding a Google Meet Clone with React and TailwindCSS
This post is part two in a series on building a Google Meet clone using Next.js and TailwindCSS. It focuses on creating the meeting page UI, which includes custom video layouts, call controls, and integrating features such as screen sharing, chat messaging, and call recording. The custom components such as `ParticipantViewUI`, `VideoPlaceholder`, `GridLayout`, and `SpeakerLayout` are detailed. Additionally, the post explains how to add animations using GSAP and integrate call control buttons for toggling the microphone, camera, screen sharing, recording, and leaving the call. Finally, a Meeting Popup component is introduced to notify the meeting creator and provide the meeting link for sharing.
YouTube·2yBuild a Nextjs Project Management App & Deploy on AWS | Cognito, EC2, Node, RDS, Postgres, Tailwind
In this detailed guide, Ed Row demonstrates building and deploying a full-stack project management application using Nextjs, Node.js, and AWS. The application includes features like task drag-and-drop, multiple views (list, timeline, table), and user authentication via AWS Cognito. The front end utilizes Nextjs with Redux Toolkit for state management and Tailwind CSS for styling. The backend is handled by Node.js with Express and Prisma for database interactions. AWS services such as EC2, RDS, and Amplify are used for deployment, ensuring the application is scalable and enterprise-ready.
Community Picks·2yShadcn: The Secret to Productive UI Development
Shadcn is a versatile, open-source library offering pre-built UI components that enhance productivity and maintainability in web development. Combining Tailwind CSS with Radix UI primitives, it provides flexible and accessible design elements that can be seamlessly integrated with frameworks like Next.js. Shadcn promotes consistent codebases, easy maintenance, and efficient collaboration in large teams, making it a valuable tool for developers.
YouTube·2yNext.js Full-Stack School Management App Full Tutorial | Role Based School Dashboard Project
This guide walks through creating a full-stack school management application using Next.js, implementing role-based dashboards for different users (admin, teacher, student, parent) with specific functionalities such as protected routes, pagination, and search functionalities. The backend is built using PostgreSQL and Prisma ORM, and deployed with Docker and Hostinger. The guide covers setting up the database schema, handling various user roles, and deploying the application efficiently.
YouTube·2yBuild a Jira Clone With Nextjs, React, Tailwind, Hono.js | Part 1/2 (2024)
Antonio's step-by-step course teaches you how to build a full-featured Jira clone using Next.js, React, Tailwind CSS, and Hono.js. It's targeted at developers looking to enhance their skills with complex web applications and project management tools. The project includes building a comprehensive task management interface with different views, user management features, workspace customization, and more. It also covers the initial setup, selecting runtimes, and ensuring dependencies are correctly installed.
LogRocket·2yAdvanced Next.js caching strategies
Next.js offers robust support for complex React applications, including various caching mechanisms like request memorization, data cache, full route cache, and router cache. Understanding these caching strategies is crucial to avoid bugs and stale data issues. Strategies such as cache invalidation and revalidation are essential for keeping data updated. Tools like `next-cache-toolbar` and `next-shared-cache` can simplify managing and debugging cache in your Next.js projects.
Web Dev Simplified·2yHow To Build A $1,000,000 SaaS In 7 Hours
Learn how to build a million-dollar SaaS business using the latest Next.js features, focusing on clean, modular, and maintainable code. The project demonstrates creating a clone of the 'Parody Deals' website, featuring customizable country-based discounts, detailed analytics, and Stripe integration for subscription management. The guide walks through setting up a full tech stack with modern tools like Next.js, Tailwind CSS, Stripe, Clerk for authentication, and Neon for database management, ensuring scalable and clean architecture.
Community Picks·2yHow to prevent re-render in React with Tailwind CSS
Learn how to prevent re-renders in React components by using Tailwind CSS and HTML, instead of JavaScript, to manage conditional class application. The post illustrates both traditional and alternative methods, emphasizing the benefits of the data-* attribute and group modifier for simpler, more efficient component design without triggering re-renders.
Collections·2yBuild and Deploy an AI-Powered Email SaaS with Next.js 14, Prisma, OpenAI, Stripe, and Tailwind CSS
Learn to build and deploy an AI-powered email client using Next.js 14, Prisma, OpenAI, Stripe, TypeScript, and Tailwind CSS. This comprehensive guide covers setting up the project, database management with Prisma, AI integration for email responses, payment processing with Stripe, styling with Tailwind CSS, and deploying to Vercel. Perfect for developers looking to create and monetize a sophisticated SaaS product.
Community Picks·2ynuqs 2
nuqs 2.0.0 introduces several new features and improvements, including support for various React frameworks (like Next.js, React SPA, and Remix), a built-in testing adapter, and notable bundle size reductions. The update also involves breaking changes, such as the introduction of adapters and deprecated APIs. Community feedback helped shape these updates, and there's a focus on future enhancements like type-safe routing and better validation integration.
Community Picks·2yA Beginners Guide to How Server-Side Rendering (SSR) Works
Server-side rendering (SSR) optimizes web performance and accessibility by rendering a complete HTML page on the server before sending it to the user's browser. This approach ensures faster load times, better SEO, and improved accessibility. Fleek enhances SSR by offering decentralized, scalable, and low-latency infrastructure, making development faster and more efficient. SSR is particularly beneficial for content-heavy websites requiring quick load times and high search engine visibility.
Community Picks·2yCreate A Booking App From Scratch | React, Next.js, Appwrite, Tailwind
Learn to build a comprehensive booking app for meeting rooms using Next.js, React, Appwrite, and Tailwind CSS. The tutorial covers UI design, authentication, image storage, database integration, and preventing double bookings. Step-by-step, you'll implement features like adding rooms, booking forms, and managing bookings, all while utilizing Appwrite for backend services.
developedbyed·2yMy Favourite Way To Deploy Any Web App on VPS
Learn an easy way to deploy web applications on a private server using Dog Ploy, with a detailed setup guide on using Hetzner VPS and integrating analytics with Umami. This method supports various applications including Next.js and Go, allows for easy scaling, and provides a smooth deployment experience.
Community Picks·2yWhen should I Use Server Action (Next.js 14)
Explores the use cases and pitfalls of Server Actions in Next.js 14. While Server Actions offer a streamlined and secure way to handle server operations, database mutations, and form submissions without exposing sensitive logic to the client, they aren't always the best choice. Potential issues include performance bottlenecks, unnecessary server load, and security concerns. The article provides a comprehensive overview of when to use Server Actions effectively and when to opt for more traditional methods.
Community Picks·2ySelf-Hosting Next.js
Learn how to self-host a Next.js app on a $4 Linux VPS with a PostgreSQL database, Nginx reverse proxy, and Docker. The guide covers the detailed steps for setting up the server, creating a deploy script, managing Docker containers, and addressing key configurations for self-hosting. It contrasts VPS versus dedicated server options and explores trade-offs such as scalability, performance, and cost. It also delves into features like image optimization, streaming components, middleware, and environment variable handling in a self-hosted setup.
YouTube·2yBuild a Full-Stack AI Web App in 12 Minutes: Cursor, OpenAI o1, V0, Firecrawl & Patched
A developer shares their process of building a full-stack AI web app in 12 minutes using cutting-edge tools like OpenAI's o1 model, Firecrawl for web scraping, and Next.js for application structuring. The tutorial covers setting up components, handling data through APIs, and automating code reviews and documentation with Patched. This project demonstrates how leveraging modern tools can significantly speed up development and improve project management.
