--- title: Best Next.js posts — July 2021 | daily.dev description: The most upvoted Next.js posts from July 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/nextjs/best-of/2021/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/nextjs/best-of/2021/07 og:type: website og:site_name: daily.dev og:title: Best Next.js posts — July 2021 | daily.dev og:description: The most upvoted Next.js posts from July 2021, 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 — July 2021 1. 1 [](/posts/i-created-8-free-dashboard-templates-built-with-tailwind-for-react-next-vue-and-nuxt--yam3sj1mq "I created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt.") Article DEV · 5y I created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt. Salvia-kit is an open source dashboard tool for React, Next.js, Vue.js and Nuxt. It is fully customizable and without external dependencies. You can export it and integrate it in your project. There are 33 repositories and each dashboard has 4 templates. 37 3 2. 2 [](/posts/building-a-next-js-shopping-cart-app-dgulhqwmy "Building a Next.js shopping cart app") Article LogRocket · 5y Building a Next.js shopping cart app Next.js is the React framework by Vercel. This tutorial details how to build a shopping cart web app for a fictional game store. We’ll cover the following features:Setting up a Next.js project with create-next-app. Styling with CSS modules. Image optimization with the component. Integrating Redux Toolkit for state management. 17 3. 3 [](/posts/how-i-built-chatcube-with-next-js-tailwindcss-clerk-and-firebase-and-a-walkthrough-of-the-app-br4aur3ba "How I built ChatCube with Next.js, TailwindCSS, Clerk and Firebase and a walkthrough of the app") Article Hashnode · 5y How I built ChatCube with Next.js, TailwindCSS, Clerk and Firebase and a walkthrough of the app ChatCube is an open-source 1:1 chat app that I built for the Clerk x Hashnode hackathon. You can sign up using your email, Google, GitHub, or Facebook. To send a message just click on the name of the person you want to send the message. Emoji mart is being used for all the emojis. 13 4. 4 [](/posts/create-page-transitions-in-next-js-with-framer-motion-czvivebw7 "Create Page Transitions in Next.js with Framer Motion") Article JavaScript in Plain English · 5y Create Page Transitions in Next.js with Framer Motion How to Create Page Transitions in Next.js with Framer motion. Avneesh Agarwal explains how to use tailwind CSS for basic styling. We will use framer motion to create a fade-in animation while changing routes. If you face any issues feel free to dm me on any of my socials listed below. 13 2 5. 5 [](/posts/how-to-make-a-next-js-app-a-pwa--i0wy6uv9 "How to make a Next.js app a PWA") Article Geek Culture · 5y How to make a Next.js app a PWA How to make a Next.js app a PWA. How to convert the default template into a Progressive Web App (PWA) How to get the icons for the app and how to install the app. The app will be installed and popup when you click on install button. 11 1 6. 6 [](/posts/creating-contact-forms-with-the-notion-api-and-next-js-1d9lpjrw5 "Creating contact forms with the Notion API and Next.js") Article LogRocket · 5y Creating contact forms with the Notion API and Next.js With Next.js and the Notion API, you can use the database feature to save all submissions directly to your Notion workspace. This is especially useful if you already use Notion as a project management tool and can bring everything together in one place. We’ll use two packages: react-toastify to display toast notifications on form submissions and @hq/client to interact with the Notions API. 10 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/2021/07#page","url":"https://daily.dev/tags/nextjs/best-of/2021/07","name":"Best Next.js Posts — July 2021","description":"The most upvoted Next.js posts from July 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/nextjs/best-of/2021/07#items","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/i-created-8-free-dashboard-templates-built-with-tailwind-for-react-next-vue-and-nuxt--yam3sj1mq","name":"I created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt."},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/building-a-next-js-shopping-cart-app-dgulhqwmy","name":"Building a Next.js shopping cart app"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-i-built-chatcube-with-next-js-tailwindcss-clerk-and-firebase-and-a-walkthrough-of-the-app-br4aur3ba","name":"How I built ChatCube with Next.js, TailwindCSS, Clerk and Firebase and a walkthrough of the app"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/create-page-transitions-in-next-js-with-framer-motion-czvivebw7","name":"Create Page Transitions in Next.js with Framer Motion"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-make-a-next-js-app-a-pwa--i0wy6uv9","name":"How to make a Next.js app a PWA"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/creating-contact-forms-with-the-notion-api-and-next-js-1d9lpjrw5","name":"Creating contact forms with the Notion API and Next.js"}]},{"@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":"July 2021"}]}]} ```