--- title: Best Next.js posts of 2022 | daily.dev description: The most upvoted Next.js posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/nextjs/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/nextjs/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best Next.js posts of 2022 | daily.dev og:description: The most upvoted Next.js posts of 2022, 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 — 2022 1. 1 [](/posts/build-5-web-apps-in-10-hours-using-next-js-react-js-tailwind-css--qpthdhwra "Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.") Article Hashnode · 4y Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS. This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build. 201 14 2. 2 [](/posts/blog---next-js-12-2-vnuscth7e "Blog - Next.js 12.2") Article Next.js · 4y Blog - Next.js 12.2 Middleware is now stable in 12.2 and has an improved API based on feedback from users. On-Demand Incremental Static Regeneration (ISR) allows you to update the content on your site without needing to redeploy. Edge API Routes support streaming responses from the server. SWC Plugins (Experimental) extend compilation with your own plugins. 109 3 3. 3 [](/posts/from-figma-to-next-js-app-in-minutes-xe4dqtt6c "From Figma to Next.js App in Minutes") Article DEV · 5y From Figma to Next.js App in Minutes AWS Amplify is a set of tools and features that lets front-end web and mobile developers quickly and easily build full-stack applications on AWS. In this post, we'll convert Figma components to React components with Amplify studio and use it in our application. 106 2 4. 4 [](/posts/building-a-video-chat-app-with-next-js-100ms-and-tailwindcss-ny3qe5w-x "Building a Video Chat App with Next.js, 100ms, and TailwindCSS") Article asayer · 4y Building a Video Chat App with Next.js, 100ms, and TailwindCSS Video chat applications have a lot of popularity and usage in the tech world today. 100ms is an infrastructure provider that allows users to effortlessly set up optimized audio and video chat interfaces. In this tutorial, readers will learn how to integrate the 100ms features to create a chat application using Next.js and TailwindCSS. 98 4 5. 5 [](/posts/build-a-full-stack-app-with-next-js-tailwind-trpc-and-prisma-orm-xkwhr8j7y "Build a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM") Article DEV · 4y Build a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM When we create a TypeScript project that has both a Rest Api and a web app, it becomes challenging to keep type definitions concise in the long run. This is where tRPC comes in, with this toolkit it is possible to create a totally type safe application by only using inference. 88 1 6. 6 [](/posts/from-php-to-next-js-what-trivago-learned-rewriting-its-web-app-9hx5uvq52 "From PHP to Next.js: What Trivago Learned Rewriting Its Web App") Article The New Stack · 4y From PHP to Next.js: What Trivago Learned Rewriting Its Web App Hotel search service Trivago rewrote its frontend in Typescript on the Next.js framework, replacing a PHP codebase on a homegrown JavaScript framework, Melody. From April 2020 until late 2021 the platform team created, tested and deployed the new application which reduced page size by up to 37%. 73 7 7. 7 [](/posts/locofy-ai---turn-figma-designs-into-code-react-react-native-html-css--gaoe2cbjx "Locofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+") Article Product Hunt · 4y Locofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+ Locofy.ai helps builders launch 3-4x faster by converting designs to production ready code. Try Figma to React, React Native, HTML-CSS, Next.js, Gatsby in FREE BETA! Tag responsive designs, make components, get a live-prototype & export code or direct deploy. 70 1 8. 8 [](/posts/let-s-build-micro-frontends-with-nextjs-and-module-federation--w3ooedwkp "Let’s Build Micro Frontends with NextJS and Module Federation!") Article Community Picks · 4y Let’s Build Micro Frontends with NextJS and Module Federation! Module Federation is a Webpack v5 feature that allows separate (Webpack) builds from a single application. It is similar to Apollo GraphQL federation but applied to JavaScript modules — browser and Node.js. The team behind NextJS has made incredible strides in a short period of time. 62 1 9. 9 [](/posts/steps-to-build-a-professional-next-js-portfolio-rcju8laug "Steps To Build A Professional Next.js Portfolio") Article Hashnode · 4y Steps To Build A Professional Next.js Portfolio In this blog I am going to explain all necessary steps to create a multiple pages portfolio/website using React, Next.js and Tailwind with JavaScript. We will use React because its preferable when dealing with or building multiple pages, server-rendered websites. Tailwind works by scanning all of your HTML files, JavaScript components, and any other templates for class names. 58 3 10. 10 [](/posts/build-an-ecommerce-app-with-next-js-and-shopify-i60c6sejr "Build an eCommerce app with Next.js and Shopify") Article LogRocket · 4y Build an eCommerce app with Next.js and Shopify With Shopify, users can set up an online store, and thanks to their Storefront API, developers can create a custom client application to connect to it. In this article, you will learn how to set up a Shopify store and get your Store Front API token. You will then create a Next.js application to list and display your products with dummy data. Finally, you can connect your Next.JS application to your Shopify application to fetch your real products. 53 2 11. 11 [](/posts/the-best-styling-options-for-next-js-qmnszuzpn "The best styling options for Next.js") Article LogRocket · 5y The best styling options for Next.js Next.js is a JavaScript framework based on React. With its ability to offer static and server rendering, its popularity quickly shot up amongst developers. Next.js offers many ways to support CSS in your application. In this tutorial, you will discover a few ways to implement styling in your next.js application. 50 1 12. 12 [](/posts/web-3-0-frontend-stack-of-2022-building-authentication-with-metamask-react-next-js-and-chakra--sqo2ysesy "🔥 Web 3.0 Frontend Stack of 2022: Building Authentication with MetaMask, React, Next.js, and Chakra UI") Article JavaScript in Plain English · 5y 🔥 Web 3.0 Frontend Stack of 2022: Building Authentication with MetaMask, React, Next.js, and Chakra UI Web 3.0 Frontend Stack of 2022: Building Authentication with MetaMask, React, Next.js, and Chakra UI. Vitalii Shevchuk: After a few minutes of this tutorial, you will get connected with the blockchain world. In this project we will use the following tech stack, I would say it’s the best web3.0 stack of 2022 so far. 49 1 13. 13 [](/posts/how-to-build-a-fullstack-app-with-next-js-prisma-and-postgresql-tlrot3bch "How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL") Article Community Picks · 4y How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL Next.js is a next-generation ORM that can be used to access a database in Node.js and TypeScript applications. In this guide, you'll learn how to implement a fullstack sample blogging application using the following technologies. You'll use a single PrismaClient instance that you can import into any file where it's needed. You can create a new User record by calling prisma.create() or retrieve all the Post records from the database. 48 14. 14 [](/posts/a-guide-to-the-nextjs-framework-hyej5sqej "A Guide to the NextJS Framework") Article Codemotion · 5y A Guide to the NextJS Framework Next.js is a front-end framework that aims to marry the world of UX and backend functionality. It provides a ready-to-go solution for the server-side rendering (SSR) of React components. Next.js allows for the rendering of these React components on the server before the page is sent to the client. 44 1 15. 15 [](/posts/blog---next-js-12-1-yd3djlobb "Blog - Next.js 12.1") Article Next.js · 5y Blog - Next.js 12.1 Revalidate pages using getStaticProps instantly. Expanded Support for SWC: styled-components , Relay, and more. Zero-configuration Jest support using SWC. Faster Minification with SWC (RC): 7x faster minification than Terser. Self-Hosting Improvements: 80% smaller Docker images. 44 4 16. 16 [](/posts/tailwind-ui-templates---beautiful-next-js-templates-built-by-the-tailwind-css-team-hmahyxhi7 "Tailwind UI Templates - Beautiful Next.js templates built by the Tailwind CSS team") Article Product Hunt · 4y Tailwind UI Templates - Beautiful Next.js templates built by the Tailwind CSS team 41 17. 17 [](/posts/generate-10x-seo-traffic-from-google-using-next-js-b6icolwa4 "Generate 10x SEO traffic from Google using Next.js") Article SaaSBase · 5y Generate 10x SEO traffic from Google using Next.js Next.js is a React-based tool that can dynamically generate content pages at scale. It can be used to create landing pages that speak directly to users' search intent. Next.js can statically generate your dynamic React components into HTML with a single command. These HTML pages are indexable, crawlable, and Search Engine optimized. 41 2 18. 18 [](/posts/how-to-build-a-cli-using-nodejs--p5mwxh6g "How to build a CLI using NodeJS 💻") Article Hashnode · 5y How to build a CLI using NodeJS 💻 The command line interface (CLI) is one of the most basic and powerful applications ever created by mankind. We are going to be building a CLI which would generate starter templates with TailwindCSS, and Prettier pre-installed. We will be using a NodeJS framework called Tailwind CSS. 41 10 19. 19 [](/posts/building-crud-apps-with-nextjs-gy7kcgoow "Building CRUD Apps with NextJs") Article asayer · 5y Building CRUD Apps with NextJs A CRUD application refers to an app that can perform four simple functions: Creating, Reading, Updating, and Deleting data. For example, blog sites need dynamic content management for productivity. With CRUD functionality, we can carry out these functions in our application. Next.js as our case study to look at how CRUD implementation works. 40 2 20. 20 [](/posts/building-an-image-gallery-with-next-js-supabase-and-tailwind-css-lee-robinson-dcnoliomk "Building an Image Gallery with Next.js, Supabase, and Tailwind CSS – Lee Robinson") Article Lee Robinson · 5y Building an Image Gallery with Next.js, Supabase, and Tailwind CSS – Lee Robinson This tutorial shows you how to create a Next.js application that fetches content from a Postgres database. It also serves optimized, blur-up images with next/image and styles components with Tailwind CSS. I used this to create swag.vercel.app, which is a collection of tweets. 38 1 21. 21 [](/posts/react-and-next-js-snippets---react-and-nextjs-snippets-with-typescript-cfelxety1 "React and Next.js Snippets - React and Nextjs snippets with TypeScript") Article Product Hunt · 5y React and Next.js Snippets - React and Nextjs snippets with TypeScript 38 3 22. 22 [](/posts/makeswift-2-0---make-your-next-js-site-visually-editable-in-minutes-l7aytvahe "Makeswift 2.0 - Make your Next.js site visually editable in minutes") Article Product Hunt · 4y Makeswift 2.0 - Make your Next.js site visually editable in minutes Makewift 2.0 lets developers integrate React components from their Next.js app into our visual builder. Unlock your next.js site and give marketers and designers control over content and layout starting with just one page. Makewift is a free, open source, cross-platform programming tool for iOS and Android. 37 1 23. 23 [](/posts/implementing-feature-flags-in-a-next-js-application-rr4ahsud7 "Implementing Feature Flags in a Next.js Application") Article Hashnode · 4y Implementing Feature Flags in a Next.js Application Developers often struggle to roll out new features and functionalities in an incremental way. Feature flagging is a mechanism used to control access to certain features with simple switches. We will examine how we can accomplish this by creating a Next.js application that incorporates the aforementioned feature with a feature flag. 36 4 24. 24 [](/posts/introducing-nexus-a-component-tree-visualizer-for-next-js-ikkangixp "Introducing Nexus — a Component Tree Visualizer for Next.js") Article gitconnected · 5y Introducing Nexus — a Component Tree Visualizer for Next.js Nexus is a VSCode extension designed for Next.js development. It shows a tree-like structure with relevant data fetching information for all nested components. It can also identify server-side rendering opportunities or bottlenecks right in the sidebar of the IDE. 35 2 25. 25 [](/posts/next-js-blog-using-typescript-and-notion-api-nfh19ppjd "Next.js Blog using Typescript and Notion API") Article Section · 5y Next.js Blog using Typescript and Notion API Next.js is used to create Server-side Rendering (SSR) and Static Site Generation (SSG) using JavaScript. The app fetches extra data from the server after the browser loads the website’s HTML page. SSG makes the site load even faster, creating a better user experience. This guide will help you learn how to use Next.js with Notion API to create a blog app. 32 1 [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/2022#page","url":"https://daily.dev/tags/nextjs/best-of/2022","name":"Best Next.js Posts of 2022","description":"The most upvoted Next.js posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/nextjs/best-of/2022#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/build-5-web-apps-in-10-hours-using-next-js-react-js-tailwind-css--qpthdhwra","name":"Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS."},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/blog---next-js-12-2-vnuscth7e","name":"Blog - Next.js 12.2"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/from-figma-to-next-js-app-in-minutes-xe4dqtt6c","name":"From Figma to Next.js App in Minutes"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/building-a-video-chat-app-with-next-js-100ms-and-tailwindcss-ny3qe5w-x","name":"Building a Video Chat App with Next.js, 100ms, and TailwindCSS"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/build-a-full-stack-app-with-next-js-tailwind-trpc-and-prisma-orm-xkwhr8j7y","name":"Build a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/from-php-to-next-js-what-trivago-learned-rewriting-its-web-app-9hx5uvq52","name":"From PHP to Next.js: What Trivago Learned Rewriting Its Web App"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/locofy-ai---turn-figma-designs-into-code-react-react-native-html-css--gaoe2cbjx","name":"Locofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/let-s-build-micro-frontends-with-nextjs-and-module-federation--w3ooedwkp","name":"Let’s Build Micro Frontends with NextJS and Module Federation!"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/steps-to-build-a-professional-next-js-portfolio-rcju8laug","name":"Steps To Build A Professional Next.js Portfolio"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/build-an-ecommerce-app-with-next-js-and-shopify-i60c6sejr","name":"Build an eCommerce app with Next.js and Shopify"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/the-best-styling-options-for-next-js-qmnszuzpn","name":"The best styling options for Next.js"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/web-3-0-frontend-stack-of-2022-building-authentication-with-metamask-react-next-js-and-chakra--sqo2ysesy","name":"🔥 Web 3.0 Frontend Stack of 2022: Building Authentication with MetaMask, React, Next.js, and Chakra UI"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-build-a-fullstack-app-with-next-js-prisma-and-postgresql-tlrot3bch","name":"How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/a-guide-to-the-nextjs-framework-hyej5sqej","name":"A Guide to the NextJS Framework"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/blog---next-js-12-1-yd3djlobb","name":"Blog - Next.js 12.1"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/tailwind-ui-templates---beautiful-next-js-templates-built-by-the-tailwind-css-team-hmahyxhi7","name":"Tailwind UI Templates - Beautiful Next.js templates built by the Tailwind CSS team"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/generate-10x-seo-traffic-from-google-using-next-js-b6icolwa4","name":"Generate 10x SEO traffic from Google using Next.js"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-build-a-cli-using-nodejs--p5mwxh6g","name":"How to build a CLI using NodeJS 💻"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/building-crud-apps-with-nextjs-gy7kcgoow","name":"Building CRUD Apps with NextJs"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/building-an-image-gallery-with-next-js-supabase-and-tailwind-css-lee-robinson-dcnoliomk","name":"Building an Image Gallery with Next.js, Supabase, and Tailwind CSS – Lee Robinson"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/react-and-next-js-snippets---react-and-nextjs-snippets-with-typescript-cfelxety1","name":"React and Next.js Snippets - React and Nextjs snippets with TypeScript"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/makeswift-2-0---make-your-next-js-site-visually-editable-in-minutes-l7aytvahe","name":"Makeswift 2.0 - Make your Next.js site visually editable in minutes"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/implementing-feature-flags-in-a-next-js-application-rr4ahsud7","name":"Implementing Feature Flags in a Next.js Application"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/introducing-nexus-a-component-tree-visualizer-for-next-js-ikkangixp","name":"Introducing Nexus — a Component Tree Visualizer for Next.js"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/next-js-blog-using-typescript-and-notion-api-nfh19ppjd","name":"Next.js Blog using Typescript and Notion API"}]},{"@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":"2022"}]}]} ```