--- title: Best Next.js posts of 2024 | daily.dev description: The most upvoted Next.js posts of 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/nextjs/best-of/2024 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/nextjs/best-of/2024 og:type: website og:site_name: daily.dev og:title: Best Next.js posts of 2024 | daily.dev og:description: The most upvoted Next.js posts of 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Next.js — 2024 1. 1 [](/posts/build-an-awesome-developer-portfolio-website--bog6gc0u9 "Build an awesome developer portfolio website.") Article DEV · 3y Build an awesome developer portfolio website. Learn how to build an awesome developer portfolio website using Next, Tailwind CSS, and EmailJS. Step-by-step guide on setup process and GitHub link. 2.2K 102 2. 2 [](/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa "How I Use ChatGPT as a Frontend Developer (5 Ways)") Article Community Picks · 2y How 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. 1.5K 56 3. 3 [](/posts/glass-an-ai-copilot-for-react-and-next-js-developers--nzatngh7o "Glass: an AI copilot for React and Next.js developers.") Article Community Picks · 2y Glass: 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. 1K 41 4. 4 [](/posts/react-tech-stack-2025--mzzec8qub "React Tech Stack [2025]") Article Robin Wieruch · 2y 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. 712 27 5. 5 [](/posts/i-built-a-free-open-source-project-manager-that-helps-teams-keep-costs-under-15-month--skveswwbd "I built a free, open-source project manager that helps teams keep costs under $15/month.") Article DEV · 2y I built a free, open-source project manager that helps teams keep costs under $15/month. A developer built an open-source project manager with low operational costs, leveraging free platforms and offering essential features for small teams. 649 27 6. 6 [](/posts/next-js-full-stack-web-app-2024--49kjp9zag "Next.js Full-Stack Web App (2024)") Article Community Picks · 2y Next.js Full-Stack Web App (2024) The post introduces a Next.js full-stack starter template tailored for Next.js 14, designed to streamline the setup process for creating modern web applications. It includes features like a scalable project structure, TypeScript support, pre-configured Ant Design components, SASS module styling, social authentication, route guarding, sample APIs with MongoDB integration, and custom alias imports. Detailed setup instructions are available in the GitHub repository linked in the post. 630 16 7. 7 [](/posts/get-the-best-performance-on-your-next-js-app-fx7t4hrba "Get the Best Performance on Your Next.js App") Article Community Picks · 2y Get the Best Performance on Your Next.js App Learn how to optimize performance on your Next.js app with tips like loading only the necessary JavaScript and CSS, lazy loading dependencies, using the Next.js Image component for image optimization, preferring CSS over JavaScript, avoiding loaders at the beginning, utilizing font optimization, optimizing scripts, removing unused packages, checking bundle size, and using server components for improved rendering and caching. 572 18 8. 8 [](/posts/ground-your-animation-kit-grvww9e2h "Ground. your animation kit") Article Dev Squad · 2y Ground. your animation kit Animations have become easier to create with modern tools. This post introduces a set of handcrafted animated components built using Next.js, React, TailwindCSS, and Framer Motion, including elements like carousels, cards, and inputs. Check out Framer Ground for more examples. 474 52 9. 9 [](/posts/top-next-js-tools-for-next-gen-developers-ktwwwh6tw "Top Next.js Tools for Next-Gen Developers") Article Community Picks · 2y Top 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. 459 15 10. 10 [](/posts/implement-clean-architecture-in-next-js-dztizssbk "Implement Clean Architecture in Next.js") Video Community Picks · 2y Implement 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. 398 6 11. 11 [](/posts/next-js-15-rc-jyvvk4yte "Next.js 15 RC") Article Next.js · 2y Next.js 15 RC Next.js 15 RC is now available, allowing you to test the latest features before the stable release. It includes support for React 19 RC, caching updates, incremental adoption of Partial Prerendering, executing code after a response, create-next-app updates, and optimizing bundling of external packages. 370 14 12. 12 [](/posts/react-is-a-full-stack-framework-1n1bbh3r2 "React is a Full-Stack Framework") Article Robin Wieruch · 2y React 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. 355 48 13. 13 [](/posts/build-an-invoice-app-with-next-js-15-ec9vlmrau "Build an Invoice App with Next.js 15") Video Community Picks · 2y Build 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. 338 9 14. 14 [](/posts/how-to-set-up-next-js-15-for-production-in-2024-gtohtox62 "How to Set Up Next.js 15 for Production in 2024") Article Community Picks · 2y How to Set Up Next.js 15 for Production in 2024 This tutorial guides you through setting up Next.js 15 for production in 2024, focusing on key steps and tools such as creating a new project with TypeScript and Tailwind CSS, configuring ESLint and Prettier for code quality, setting up TypeScript type checks, and integrating testing frameworks Vitest and Playwright. It also covers organizing project folders for scalability, adding i18n support, using Prisma with Postgres for database management, implementing facades for database interactions, deploying with Vercel Postgres, and setting up continuous integration and delivery using GitHub Actions. 313 14 15. 15 [](/posts/things-you-don-t-know-about-next-js-1oeqpqzuh "Things You Don’t Know About Next.js") Article Community Picks · 2y Things You Don’t Know About Next.js NextJS 14 promises a faster, more enjoyable development journey for React developers. Learn about NextJS concepts, using the Metadata API, and creating private routes. 310 17 16. 16 [](/posts/maybe-finance-maybe-personal-finance-and-wealth-management-app-ybl4xa9me "maybe-finance/maybe: Personal finance and wealth management app") Article Community Picks · 3y maybe-finance/maybe: Personal finance and wealth management app Maybe is an open-source personal finance app with features like net worth tracking, financial account syncing, investment benchmarking, and more. It is built using a tech stack including Next.js, Tailwind, Node.js, and Postgres. 307 12 17. 17 [](/posts/how-to-optimize-next-js-app-performance-with-lazy-loading-32ubh70sv "How to Optimize Next.js App Performance With Lazy Loading") Article freeCodeCamp · 2y How to Optimize Next.js App Performance With Lazy Loading Learn how to optimize Next.js app performance by implementing lazy loading techniques for client components. By deferring the load of client components and imported libraries until needed, initial load times can be significantly improved. The post covers techniques using \`next/dynamic\` and \`React.lazy()\` with \`Suspense\`, along with handling lazy loading for named exports and considerations for server components. 300 20 18. 18 [](/posts/mobile-app-development-course-with-react-native-supabase-next-js-y1eroosee "Mobile App Development Course with React Native, Supabase, Next.js") Article freeCodeCamp · 2y Mobile 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. 294 7 19. 19 [](/posts/build-a-full-stack-next-js-app-with-google-calendar---typescript-drizzle-shadcn-tailwind-cz0bfjfkp "Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind") Video Web Dev Simplified · 2y Build 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. 292 20. 20 [](/posts/zustand-in-next-js-14-with-ts--0neisn4k4 "Zustand in Next.js 14 (with ts)") Article Community Picks · 2y Zustand in Next.js 14 (with ts) Learn how to use Zustand, a simple and scalable state management solution, in a Next.js project with TypeScript. The post guides you through setting up a new project, integrating Zustand, and creating a state store. It also covers adding actions to manage the state and persisting state data using localStorage. 284 16 21. 21 [](/posts/next-js-view-transitions-api-eaba2t69t "Next.js View Transitions API") Article LogRocket · 2y Next.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. 282 5 22. 22 [](/posts/next-js-14-2-vpcaapkr2 "Next.js 14.2") Article Next.js · 3y Next.js 14.2 Next.js 14.2 includes development, production, and caching improvements. It introduces Turbopack for Development, which significantly improves local development performance. There are also enhancements in build memory usage, CSS optimization, caching, and error DX. The release prepares for the integration of React 19 and includes other improvements and documentation updates. 276 11 23. 23 [](/posts/build-deploy-a-full-stack-dating-app-wsejraavq "Build & Deploy a Full Stack Dating App") Article freeCodeCamp · 2y Build & Deploy a Full Stack Dating App Learn to build and deploy a modern, full-stack dating app using cutting-edge tools and frameworks such as Next.js, Prisma, NextAuth, Cloudinary, and Pusher. This comprehensive course, available on freeCodeCamp's YouTube channel, covers everything from setting up your project to implementing advanced features like real-time messaging, OAuth integration, and role-based access. Perfect for developers looking to showcase their portfolio or expand their expertise in modern web development. 269 6 24. 24 [](/posts/fixing-your-website-s-javascript-performance-wbfwmhg40 "Fixing your website's JavaScript performance") Article MDN Blog · 2y Fixing 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. 262 5 25. 25 [](/posts/quickly-find-resources-for-awesome-shadcn-ui-wqlpfteil "Quickly Find Resources for Awesome Shadcn UI") Article Dev Squad · 2y Quickly Find Resources for Awesome Shadcn UI Curated list offering resources for Shadcn UI, categorized into 13 sections including Shadcn UI components, tools, extensions, SASS templates, and Next.js landing page templates. 250 9 [See all Next.js archives](/tags/nextjs/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/nextjs/best-of/2024#page","url":"https://daily.dev/tags/nextjs/best-of/2024","name":"Best Next.js Posts of 2024","description":"The most upvoted Next.js posts of 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/nextjs/best-of/2024#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/build-an-awesome-developer-portfolio-website--bog6gc0u9","name":"Build an awesome developer portfolio website."},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa","name":"How I Use ChatGPT as a Frontend Developer (5 Ways)"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/glass-an-ai-copilot-for-react-and-next-js-developers--nzatngh7o","name":"Glass: an AI copilot for React and Next.js developers."},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/react-tech-stack-2025--mzzec8qub","name":"React Tech Stack [2025]"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/i-built-a-free-open-source-project-manager-that-helps-teams-keep-costs-under-15-month--skveswwbd","name":"I built a free, open-source project manager that helps teams keep costs under $15/month."},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/next-js-full-stack-web-app-2024--49kjp9zag","name":"Next.js Full-Stack Web App (2024)"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/get-the-best-performance-on-your-next-js-app-fx7t4hrba","name":"Get the Best Performance on Your Next.js App"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/ground-your-animation-kit-grvww9e2h","name":"Ground. your animation kit"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/top-next-js-tools-for-next-gen-developers-ktwwwh6tw","name":"Top Next.js Tools for Next-Gen Developers"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/implement-clean-architecture-in-next-js-dztizssbk","name":"Implement Clean Architecture in Next.js"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/next-js-15-rc-jyvvk4yte","name":"Next.js 15 RC"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/react-is-a-full-stack-framework-1n1bbh3r2","name":"React is a Full-Stack Framework"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/build-an-invoice-app-with-next-js-15-ec9vlmrau","name":"Build an Invoice App with Next.js 15"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-set-up-next-js-15-for-production-in-2024-gtohtox62","name":"How to Set Up Next.js 15 for Production in 2024"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/things-you-don-t-know-about-next-js-1oeqpqzuh","name":"Things You Don’t Know About Next.js"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/maybe-finance-maybe-personal-finance-and-wealth-management-app-ybl4xa9me","name":"maybe-finance/maybe: Personal finance and wealth management app"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/how-to-optimize-next-js-app-performance-with-lazy-loading-32ubh70sv","name":"How to Optimize Next.js App Performance With Lazy Loading"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/mobile-app-development-course-with-react-native-supabase-next-js-y1eroosee","name":"Mobile App Development Course with React Native, Supabase, Next.js"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/build-a-full-stack-next-js-app-with-google-calendar---typescript-drizzle-shadcn-tailwind-cz0bfjfkp","name":"Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/zustand-in-next-js-14-with-ts--0neisn4k4","name":"Zustand in Next.js 14 (with ts)"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/next-js-view-transitions-api-eaba2t69t","name":"Next.js View Transitions API"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/next-js-14-2-vpcaapkr2","name":"Next.js 14.2"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/build-deploy-a-full-stack-dating-app-wsejraavq","name":"Build & Deploy a Full Stack Dating App"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/fixing-your-website-s-javascript-performance-wbfwmhg40","name":"Fixing your website's JavaScript performance"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/quickly-find-resources-for-awesome-shadcn-ui-wqlpfteil","name":"Quickly Find Resources for Awesome Shadcn UI"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Next.js","item":"https://daily.dev/tags/nextjs"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/nextjs/best-of"},{"@type":"ListItem","position":5,"name":"2024"}]}]} ```