--- title: Best Next.js posts of 2023 | daily.dev description: The most upvoted Next.js posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/nextjs/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/nextjs/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best Next.js posts of 2023 | daily.dev og:description: The most upvoted Next.js posts of 2023, 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 — 2023 1. 1 [](/posts/use-notion-as-a-database-for-your-next-js-blog-0wpk1akhh "Use Notion as a database for your Next.JS Blog") Article DEV · 3y Use Notion as a database for your Next.JS Blog Learn how to use Notion as a database for your Next.JS Blog. Create a Notion Database, get a Notion Token, set up the project, and create the Post Page. Render the content of a Notion page in a Next.JS Blog. 378 25 2. 2 [](/posts/why-i-won-t-use-next-js-cv512fj5x "Why I Won't Use Next.js") Article Community Picks · 3y Why I Won't Use Next.js The author explains why they won't use Next.js and instead recommend and teach Remix as a better tool for creating excellent user experiences. They discuss the importance of focusing on standard web platform APIs, concerns about Next.js's deployment options, the perceived lack of collaboration between React and Next.js teams, and their preference for stability and simplicity in a framework. 343 32 3. 3 [](/posts/build-a-whatsapp-clone-realtime-chat-using-next-js-socket-io-tailwind-css-node-js-express-and--18ruqxvkn "Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma") Article DEV · 3y Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma This comprehensive WhatsApp clone comes packed with a range of awesome features to give you an authentic messaging experience. The Whatsapp Clone uses Next.js, Socket.io, Tailwind CSS, Node.js and Express and Prisma - DEV Community Features of the WhatsApp Clone. 297 18 4. 4 [](/posts/next-js-14-layouts-vs-templates-msqo4eh1r "Next.js 14: Layouts vs Templates") Article builder.io · 3y Next.js 14: Layouts vs Templates Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates remount with each page transition. Layouts ensure consistency, maintain state, and boost performance, while templates provide isolation, behavioral flexibility, and the ability to alter default behaviors. Choosing between layouts and templates depends on the specific needs of each page and the desired balance between user experience and performance. 248 5 5. 5 [](/posts/do-we-really-need-a-backend-now-can-we-build-applications-without-backend-with-next-js-14--krdsa6jes "Do we really need a backend now? Can we build applications without backend with Next.js 14?") Article Community Picks · 3y Do we really need a backend now? Can we build applications without backend with Next.js 14? The role of the backend in web development has been a critical component for many years. However, with the advent of frameworks like Next.js 14, the question arises whether a backend is still needed. The author presents their opinion that for many applications, a separate backend is not necessary. They discuss the use of third-party APIs, the challenges of syncing data with databases and external APIs, and the scalability issues of deploying a frontend-focused platform. They also highlight the benefits of building applications with a custom backend, such as full control and flexibility. The author recommends their blog for more information on backend technologies. 221 37 6. 6 [](/posts/building-a-full-stack-airbnb-clone-with-next-js-tailwind-css-amplication-and-more-zljgwxlf7 "Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More") Article Hacker Noon · 3y Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and more. The platform is centered around the concept of a low-code development environment. Amplication is an open-source development tool designed to simplify and expedite the process of building web applications. 221 8 7. 7 [](/posts/build-a-full-stack-reminderapp-with-react-nextjs-typescript-serveraction-zod-hook-form-prisma--rn8aly705 "Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind") Article ITNEXT · 3y Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind. Hi everyone, I published my last video: Build a full stack Reminder App. 211 11 8. 8 [](/posts/advanced-next-js-concepts-n9v7ru1ft "Advanced Next.js Concepts") Article Dev Genius · 4y Advanced Next.js Concepts Learn about advanced Next.js concepts including authentication, serverless functions, and using TypeScript. 206 15 9. 9 [](/posts/make-beautiful-logos-fast-and-free-tlip372bp "Make Beautiful Logos Fast and Free") Article Hacker News · 3y Make Beautiful Logos Fast and Free LogoFast offers presets, the #1 NextJS boilerplate, and is loved by over 1,000 makers. It helps users ship fast and save time on projects. 183 9 10. 10 [](/posts/best-practices-for-security-in-next-js-0packo5i3 "Best Practices for Security in Next.js") Article asayer · 3y Best Practices for Security in Next.js Explore common security vulnerabilities in web applications and learn best practices for securing Next.js applications, including keeping dependencies up-to-date, input validation, authentication and authorization, data encryption, implementing security headers, and using TypeScript for type safety. 175 2 11. 11 [](/posts/build-an-event-launch-page-next-js-13-react-typescript-tailwind-css-ycwnscurn "Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS") Article Community Picks · 3y Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS 175 3 12. 12 [](/posts/how-i-built-my-full-stack-portfolio-website-with-the-coolest-techs--b7udktsgg "How I Built My Full Stack Portfolio Website With the Coolest Techs🐬") Article DEV · 4y How I Built My Full Stack Portfolio Website With the Coolest Techs🐬 Learn how a full stack portfolio website was built using Next.js, Tailwind CSS, TypeScript, and other technologies. Explore the structure of the about page and the purpose of the guest book page. 141 12 13. 13 [](/posts/react-foundations-lfuspo9vb "React Foundations") Article Community Picks · 3y React Foundations The article introduces the Next.js Foundations course and provides information about the building blocks of a web application. It also explains what React is. 136 1 14. 14 [](/posts/javascript-fullstack-web-app-nextjs-docker-fryyyvct5 "JavaScript Fullstack WEB App: Nextjs & Docker") Article Community Picks · 3y JavaScript Fullstack WEB App: Nextjs & Docker Learn how to create a simple yet complete full stack app using Next.js, Tailwind CSS, Node.js, Express, Prisma, PostgreSQL, Docker, and Docker Compose. 135 4 15. 15 [](/posts/the-biggest-next-js-boilerplates-of-2023-gkkwirlri "The biggest Next.js boilerplates of 2023") Article LogRocket · 4y The biggest Next.js boilerplates of 2023 Discover the top Next.js boilerplates with useful features and development tools to save time and enhance your projects. 129 7 16. 16 [](/posts/full-stack-webpageform-builder-nextjs-typescript-react-dnd-kit-postgresql-prisma-ikdzvk5w7 "Full stack WebPageForm builder, NextJs, Typescript ( React ), Dnd-Kit, PostgreSQL, Prisma") Article ITNEXT · 3y Full stack WebPageForm builder, NextJs, Typescript ( React ), Dnd-Kit, PostgreSQL, Prisma A tutorial on building a full stack PageForm builder using NextJs, TypeScript, Dnd-Kit, PostgreSQL, and Prisma. The tutorial includes features such as a drag and drop designer, various form fields, form preview, form sharing, form stats, and more. 118 10 17. 17 [](/posts/how-to-build-a-portfolio-site-with-sanity-and-next-js-w5tklxd9c "How to Build a Portfolio Site with Sanity and Next.js") Article freeCodeCamp · 3y How to Build a Portfolio Site with Sanity and Next.js Sanity is a headless CMS framework for managing content. Sanity is Sanity's open source single-page app for managing your data and operations. You'll learn how to use Sanity as a data source to build a portfolio site with Next.js. In this tutorial you'll be mounting it together with your Next. 116 9 18. 18 [](/posts/next-js-enterprise-project-structure-emqsaqbyz "Next.js Enterprise Project Structure") Article Community Picks · 3y Next.js Enterprise Project Structure This post discusses an opinionated project structure for Next.js enterprise applications. It focuses on managing code volume, state management, and flow control to prevent programmer purgatory. The post suggests using a 'src' directory, breaking down the directory further into logical pieces, and using TypeScript configuration paths. 114 6 19. 19 [](/posts/build-and-deploy-an-ecommerce-site-with-next-js-tailwind-css-prisma-vercel-and-daisyui-oeo3echcu "Build and Deploy an Ecommerce Site with Next.js, Tailwind CSS, Prisma, Vercel, and daisyUI") Article freeCodeCamp · 3y Build and Deploy an Ecommerce Site with Next.js, Tailwind CSS, Prisma, Vercel, and daisyUI Learn how to build and deploy a full-stack e-commerce website using Next.js, Tailwind CSS, Prisma, Vercel, and DaisyUI. The course covers various topics, such as Next.js server actions, Prisma for database operations, authentication with Next-Auth and Google login, building an amazing UI with TailwindCSS and DaisyUI, and deploying the project to Vercel. 108 1 20. 20 [](/posts/moving-back-to-react-lbklqxtii "Moving back to React") Article daily.dev · 3y Moving back to React daily.dev migrated from Preact to React in order to resolve development issues and improve performance. The move allowed for better compatibility with Next.js, enhanced development experience, and prepared the platform for future technological advancements. The migration was successful and enabled a healthier future for all daily.dev apps. 108 7 21. 21 [](/posts/next-js-13-3-awtbkypvi "Next.js 13.3") Article Next.js · 4y Next.js 13.3 Next.js 13.3 adds popular community-requested features such as dynamic sitemap generation, OG image generation, static export support, and advanced routing features for the App Router. 106 1 22. 22 [](/posts/learning-web-development-together-with-a-real-project-unypljn35 "Learning Web Development Together with a Real Project") Article This is Learning · 3y Learning Web Development Together with a Real Project The app is currently based on Next.js with TypeScript and Tailwind CSS. We manage some data, specifically from the GitHub APIs using the GraphQL endpoint and React Query. There's a login feature with NextAuth using GitHub as a provider. The project is open to any kind of contribution, from fixing typos to adding new features. 104 23. 23 [](/posts/how-to-create-scroll-animations-with-react-tailwind-css-and-framer-motion-zfrieaqox "How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion") Article freeCodeCamp · 3y How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion Learn how to create scroll animations in React using Framer Motion and Tailwind CSS. The tutorial covers setting up the project, building the scroll component, adding animation functions, and animating the components on scroll. 102 4 24. 24 [](/posts/secure-next-js-applications-with-role-based-authentication-using-nextauth-z9u2azhk2 "Secure Next.js Applications with Role-Based Authentication Using NextAuth") Article freeCodeCamp · 3y Secure Next.js Applications with Role-Based Authentication Using NextAuth Learn how to secure Next.js applications with role-based authentication using NextAuth. This comprehensive tutorial covers the basics of NextAuth, integrating OAuth providers, custom authentication provider using MongoDB, and protecting pages on both the server and client side. 103 1 25. 25 [](/posts/how-to-create-a-meteor-effect-with-react-and-tailwindcss-71pj6sfpu "How to Create a Meteor Effect with React and TailwindCSS") Article freeCodeCamp · 3y How to Create a Meteor Effect with React and TailwindCSS A Meteor is basically a UI element with a head and a tail that has a gradient. In the image, the background lines are what I call meteors. We are going to animate these lines to go from the left side of the card container to the right side, giving an illusion of a meteor shower. 103 14 [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/2023#page","url":"https://daily.dev/tags/nextjs/best-of/2023","name":"Best Next.js Posts of 2023","description":"The most upvoted Next.js posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/nextjs/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/use-notion-as-a-database-for-your-next-js-blog-0wpk1akhh","name":"Use Notion as a database for your Next.JS Blog"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/why-i-won-t-use-next-js-cv512fj5x","name":"Why I Won't Use Next.js"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/build-a-whatsapp-clone-realtime-chat-using-next-js-socket-io-tailwind-css-node-js-express-and--18ruqxvkn","name":"Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r","name":"Next.js 14: Layouts vs Templates"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/do-we-really-need-a-backend-now-can-we-build-applications-without-backend-with-next-js-14--krdsa6jes","name":"Do we really need a backend now? Can we build applications without backend with Next.js 14?"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/building-a-full-stack-airbnb-clone-with-next-js-tailwind-css-amplication-and-more-zljgwxlf7","name":"Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/build-a-full-stack-reminderapp-with-react-nextjs-typescript-serveraction-zod-hook-form-prisma--rn8aly705","name":"Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/advanced-next-js-concepts-n9v7ru1ft","name":"Advanced Next.js Concepts"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/make-beautiful-logos-fast-and-free-tlip372bp","name":"Make Beautiful Logos Fast and Free"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/best-practices-for-security-in-next-js-0packo5i3","name":"Best Practices for Security in Next.js"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/build-an-event-launch-page-next-js-13-react-typescript-tailwind-css-ycwnscurn","name":"Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-i-built-my-full-stack-portfolio-website-with-the-coolest-techs--b7udktsgg","name":"How I Built My Full Stack Portfolio Website With the Coolest Techs🐬"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/react-foundations-lfuspo9vb","name":"React Foundations"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/javascript-fullstack-web-app-nextjs-docker-fryyyvct5","name":"JavaScript Fullstack WEB App: Nextjs & Docker"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/the-biggest-next-js-boilerplates-of-2023-gkkwirlri","name":"The biggest Next.js boilerplates of 2023"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/full-stack-webpageform-builder-nextjs-typescript-react-dnd-kit-postgresql-prisma-ikdzvk5w7","name":"Full stack WebPageForm builder, NextJs, Typescript ( React ), Dnd-Kit, PostgreSQL, Prisma"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/how-to-build-a-portfolio-site-with-sanity-and-next-js-w5tklxd9c","name":"How to Build a Portfolio Site with Sanity and Next.js"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/next-js-enterprise-project-structure-emqsaqbyz","name":"Next.js Enterprise Project Structure"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/build-and-deploy-an-ecommerce-site-with-next-js-tailwind-css-prisma-vercel-and-daisyui-oeo3echcu","name":"Build and Deploy an Ecommerce Site with Next.js, Tailwind CSS, Prisma, Vercel, and daisyUI"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/moving-back-to-react-lbklqxtii","name":"Moving back to React"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/next-js-13-3-awtbkypvi","name":"Next.js 13.3"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/learning-web-development-together-with-a-real-project-unypljn35","name":"Learning Web Development Together with a Real Project"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-create-scroll-animations-with-react-tailwind-css-and-framer-motion-zfrieaqox","name":"How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/secure-next-js-applications-with-role-based-authentication-using-nextauth-z9u2azhk2","name":"Secure Next.js Applications with Role-Based Authentication Using NextAuth"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/how-to-create-a-meteor-effect-with-react-and-tailwindcss-71pj6sfpu","name":"How to Create a Meteor Effect with React and TailwindCSS"}]},{"@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":"2023"}]}]} ```