Community Picks·2yHow I Use ChatGPT as a Frontend Developer (5 Ways)
A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working with regular expressions, and finding code solutions. By leveraging ChatGPT, tasks such as creating Material UI skeletons or finding regex solutions become more efficient, saving time and enhancing productivity.
Community Picks·2yGlass: an AI copilot for React and Next.js developers.
Glass provides an AI-powered assistant for React and Next.js developers, enabling them to create components, modify props, and write Tailwind CSS directly from the browser. It also allows developers to visualize component structures by hovering over elements and instantly jump to the source code of the selected element.
Community Picks·2yImplement Clean Architecture in Next.js
Clean architecture, a concept developed by Robert Martin, integrates various software architectures like hexagonal, onion, and others into a cohesive framework. It focuses on ensuring that the business logic of an application remains independent of frameworks, UI, databases, and external agencies. The post discusses implementing clean architecture in a Next.js application, highlighting the importance of separating different concerns through layers. It explains how to structure code to make applications more testable and maintainable. Key aspects include dependency injection, unit testing, and the interaction between different architectural layers.
Robin Wieruch·2yReact is a Full-Stack Framework
React has evolved into a full-stack framework with the introduction of Server Components and Server Actions, allowing for seamless integration between frontend and backend. This paradigm shift has created an environment where TypeScript has become the industry standard, and tools like tRPC make calling backend functions more efficient. While initially popular as a frontend framework, React's new capabilities, especially as implemented in Next.js, empower developers to directly access server-side resources. This marks the beginning of a new era of full-stack development where React developers can implement features across the entire stack, from UI to database.
LogRocket·2yNext.js View Transitions API
User expectations for seamless web application experiences have led to the development of the View Transitions API. This API enhances navigation, providing smooth and fluid transitions between views in both single-page (SPA) and multi-page apps (MPA). Implementing transitions is simplified with the next-view-transitions library, which integrates smoothly with Next.js. The post outlines how to set up a Next.js project, install the library, and build components to showcase transitions, highlighting the ease of use, performance optimization, and consistency of using the library compared to manual implementation.
Web Dev Simplified·2yHow to Build and Deploy a Portfolio with Next.js that Will Land You Jobs
Learn how to build an impressive portfolio website using Next.js, MDX, and Tailwind CSS. The guide covers setting up the project, writing markdown content with embedded JSX, styling with Tailwind CSS and Shat CN UI library, and deploying the portfolio to Vercel. Ideal for landing jobs or attracting freelance clients.
Hacker News·2ystack-auth/stack: Open-source Clerk/Auth0 alternative
Stack Auth is an open-source, developer-friendly user authentication solution that supports Next.js frontends and backend integrations via REST API. It offers a quick setup and the flexibility to export and self-host user data at any time. The post provides comprehensive setup instructions including dependency installation through Docker, local development execution, and Prisma database initialization. Contributors are encouraged to join their Discord and follow contribution guidelines.
Community Picks·2yWhy Is Next.Js 15 Revolutionizing Web App Development?
Next.js 15 Release Candidate introduces major updates aimed at enhancing web application development. Key features include full support for React 19 RC, revamped caching strategies with configurable invalidation periods, and experimental Partial Prerendering for hybrid rendering approaches. Additionally, the release introduces a new next/after API for handling secondary tasks post-response and updates to the create-next-app tool, including support for Turbopack. Improvements in bundling external packages and hydration error handling further optimize performance and simplify debugging. Developers are encouraged to explore these features to prepare for the official release.
Coins Bench·2yBuild a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd: Part One
Learn how to build a Web3 movie streaming decentralized application (dApp) using NextJs, TypeScript, Tailwind CSS, and Sia Renterd. This guide covers setting up the project, installing necessary packages, and configuring environment variables. The tutorial is split into three parts: project setup, backend development, and frontend integration, making it easy to follow and implement the steps to create your own video streaming platform.
freeCodeCamp·2yHow to Build an Invoice SaaS App with Next.js, Resend, Clerk and Neon Postgres
This tutorial guides you through building a complete invoicing web application using Next.js, Resend, Clerk, and Neon Postgres. Key functionalities include managing customers, creating invoices, printing and sending invoices via email, and handling real-time communication between the frontend and backend. You'll gain experience with setting up a Postgres database, implementing user authentication with Clerk, and using React-to-print for PDF generation.
YouTube·2yBuild Nextjs Inventory Management Dashboard & Deploy on AWS | Postgres, Node, Tailwind, EC2, RDS, S3
Learn to build a full-stack inventory management dashboard using Next.js, with a Node.js backend, and deploy it on AWS. The application features dark and light modes, responsive design, and pages for inventory, products, users, settings, and expenses. The frontend uses Redux Toolkit for state management and Tailwind CSS for styling. The backend relies on Node.js and Express.js with Prisma for interacting with a PostgreSQL database, and the deployment involves AWS services like EC2, RDS, Amplify, and S3. Detailed steps for setting up the project, including installing necessary packages and configuring Redux and Tailwind, are also covered.
Community Picks·2yrealvjy/nxt-lnk: Custom bio links for creatives who love coding. A perfect custom alternative for linktree, bio and other shortner platform.
A guide to using the `nxt-lnk` template for creating custom bio links, ideal for creatives who love coding. The template supports dark mode, can be self-hosted on Vercel or Netlify, and allows customization with minimal coding. It uses styled components for styling, and key files include `BioData.js` and `LinksData.js`. Instructions for setup, editing, and deployment are provided, along with examples of social media link configurations.
YouTube·2yBuild a Real-Time Slack Clone With Nextjs, React, Tailwind, Auth.js | Part 1/2 (2024)
Learn to build a fully functional Slack clone leveraging technologies like Next.js, React, Tailwind CSS, and Bun. The course covers creating a system with real-time communication, message reactions, threaded replies, and direct messaging. Also included are advanced features like image sharing, user role management, and custom invite systems to enhance security.
Community Picks·2yBuild a team-based task manager with Next.js, Neon, and Clerk
Learn to build a team-based task management app using Next.js, Neon, and Clerk. This guide walks through setting up a multi-tenant application with isolated tasks for different teams using Clerk's Organizations feature. It covers project setup, database configuration with Neon, and coding adjustments necessary to enable multi-tenancy and user-specific permissions.
Syncfusion·2yWhat’s New in Next.js 15 RC?
Next.js 15 RC introduces new features including support for React 19 RC, improved hydration error handling, and advanced caching updates. The update divides features into stable improvements like caching and experimental features like the React Compiler and partial prerendering. Instructions are provided for upgrading to the latest version using npm or yarn. The React Compiler aims to optimize code automatically, and new caching controls offer more flexibility. Enhancements in create-next-app and response execution with next/after API are also covered.
Telerik·2yUnderstand Error Handling in Modern Next.js
Error handling is crucial in web application development to ensure optimal performance and user experience. This post explores how to effectively handle client-side and server-side errors in Next.js applications. It covers syntax, runtime, and data fetching errors on the client side, and API route and layout resolution errors on the server side. The use of error boundaries in React to catch and manage errors gracefully is also discussed, with practical examples provided.
Community Picks·2ynextjs-toploader
A Next.js Top Loading Bar component called `nextjs-toploader` utilizes nprogress and works with Next.js 14 and React. It can be installed via npm or yarn and integrated into different components. The default configuration includes parameters like color, speed, height, and more, which can be customized as needed.
Community Picks·2yBuilding an App with Next.js and Electron with Server Components Support
Learn how to build an application combining Next.js and Electron, with support for React Server Components (RSCs). The guide covers setting up the project, configuring Next.js for standalone output, and running and packaging the app. Additionally, it explains how to send commands from Next.js to Electron and handle dynamic content rendering server-side for improved performance.
Community Picks·2yBuilding an AI-powered quiz application with Next.js and OpenAI
Learn how to build an AI-powered quiz application using Next.js and OpenAI. The tutorial covers creating a dynamic quiz interface, leveraging OpenAI to generate questions, managing user score, and best practices for integrating AI features. Additionally, it introduces Latitude AI, a platform for developing AI applications, and guides you through setting up the project, from creating a new Next.js app to deploying AI-powered features.
Dev Squad·2yTop 5 JavaScript Frameworks for 2024
Stay ahead in web development with the top 5 JavaScript frameworks of 2024: React, Angular, Vue.js, Svelte, and Next js. Discover why these frameworks are leading the industry by optimizing for speed, scalability, and user experience. Transform your development game with these powerful tools.