Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/officialrajdeepsingh/awesome-nextjs

A curated list of awesome Nextjs-based libraries that help build small and large-scale applications with next.js.
https://github.com/officialrajdeepsingh/awesome-nextjs

List: awesome-nextjs

awesome awesome-list awesome-lists awesome-nextjs awesome-nextjs-list cms list list-of-nextjs-package nextjs nextjs-awesome nextjs-library nextjs-library-for-npm nextjs-package-list nextjs-tool npm-library-for-nextjs react reactjs tailwindcss tailwindcss-template tool-for-nextjs

Last synced: 3 months ago
JSON representation

A curated list of awesome Nextjs-based libraries that help build small and large-scale applications with next.js.

Awesome Lists containing this project

README 

        



# Awesome Nextjs[![Awesome](https://awesome.re/badge.svg)](https://awesome.re) 






[Nextjs](https://nextjs.org/) is an open-source framework for building high-quality small and large-scale web applications using Reactjs with modern tools and technology.



To stay updated, follow the GitHub Repository and give our repository a star. This will help others discover it, encourage more developers to contribute, and build a solid list. Additionally, we encourage you to share our repository on your social media platforms, like X (previously known as Twitter).



> You can also check out [awesome documentation](https://github.com/officialrajdeepsingh/awesome-documentation) if you are looking for a list of documentation tools.






## Contents 



- [Officially for Nextjs](#officially-for-nextjs)

- [Tools](#tools)

- [AI](#ai)

- [Newsletters](#newsletters)

- [Deploy](#deploy)

- [Documentation](#documentation)

- [Blogging](#blogging)

- [Nextjs boilerplate](#nextjs-boilerplate)

- [Headless CMS](#headless-cms)

- [Database](#database)

- [Authentication and User Management](#authentication-and-user-management)

- [React Form](#react-form)

- [Bundler](#bundler)

- [State Management](#state-management)

- [Analytics](#analytics)

- [React UI Library](#react-ui-library)

- [Icons Library](#icons-library)

- [Static Search library](#static-search-library)

- [Nextjs based Template](#nextjs-based-template)

- [Ready-Made Reactjs Hooks](#ready-made-reactjs-hooks)

- [Tailwind CSS](#tailwind-css)

- [Development Tool](#development-tool)

- [Error Handling](#error-handling)

- [VS Code Extensions](#vs-code-extensions)

- [Chrome Extension](#chrome-extension)

- [Utility (Others)](#utility-others)



## Officially for Nextjs



- [Turborepo](https://turbo.build/repo) - Turborepo is a high-performance build system for JavaScript and TypeScript codebases.

- [Turbopack](https://turbo.build/pack) - Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust.

- [Swr](https://github.com/vercel/swr) - React Hooks for Data Fetching.

- [Satori](https://github.com/vercel/satori) - Enlightened library to convert HTML and CSS to SVG.

- [React tweet](https://github.com/vercel/react-tweet) - Embed tweets in your React application.



## Tools



- [Next SEO](https://www.npmjs.com/package/next-seo) - Next SEO is a plugin that helps manage the SEO in Next.js.

- [Next sitemap](https://www.npmjs.com/package/next-sitemap) - The next sitemap library helps you create a sitemap file in your nextjs application.

- [Next auth](https://www.npmjs.com/package/next-auth) - Next auth library provides authorization functionality for your app.

- [Next PWA](https://www.npmjs.com/package/next-pwa) - Next PWA library helps to enable your application's progressive Web Apps functionality.

- [Nextjs progress bar](https://www.npmjs.com/package/nextjs-progressbar) - Nextjs progress bar shows the loading indicator in nextjs.

- [Next themes](https://www.npmjs.com/package/next-themes) - You can enable the dark-to-light theme toggle with next-themes in your Next.js app.

- [Next video](https://github.com/muxinc/next-video) - The next video is a react component for adding video to your next.js application.

- [Next MDX](https://www.npmjs.com/package/@next/mdx) - To use MDX with Next.js.

- [Tempeh](https://tempeh-docs.vercel.app) - Declarative routing library for Next.js with typesafe url params. Provides plugin replacement for existing Link tag in Next.js app dir.

- [Color core](https://npmjs.com/package/color-core) - The color core package is a powerful, type-safe color manipulation library for TypeScript and JavaScript applications.

- [Geist Font](https://vercel.com/font) - Geist font is a typeface font created specifically for developers and designers.



## AI



- [V0](https://v0.dev) - V0 generates copy-and-paste friendly React code based on shadcn UI and Tailwind CSS that people can use in their projects.



## Newsletters



- [Next.js Weekly](https://nextjsweekly.com) - The next.js weekly is the best newsletter, sharing articles, tools, and projects related to nextjs.

- [This Week In React](https://thisweekinreact.com/) - This Week In React newsletter, share the latest news related to the reactjs ecosystem.

- [React Digest](https://newsletter.reactdigest.net/) - A carefully curated weekly newsletter for React developers.



## Deploy



- [Vercel](https://vercel.com) - Vercel is an official cloud platform for nextjs.

- [Netlify](https://netlify.com) - Netlify builds, deploys and hosts your front-end platform.

- [Kinsta](https://kinsta.com) - Create and deploy web applications and databases in minutes.



## Documentation



- [Nextra](https://nextra.site/) - Nextra is a simple, powerful, and flexible site generation framework to build blogs and documents with Next.js and MDX.

- [Markdoc](https://markdoc.dev/) - Markdoc is a powerful, flexible, Markdown-based authoring framework.

- [Outstatic](https://outstatic.com) - Outstatic is a new static site content management system(CMS) built with Next.js. Special built for Next.js. It works with a page and app router.

- [Content layer](https://www.npmjs.com/package/contentlayer) - The content layer works with nextjs and markdown and helps build the blog application.

- [Fumadocs](https://fumadocs.vercel.app/) - The Fumadocs is a powerful framework for building documentation sites in Next.js using the power of Next.js App Router and React Component.

- [MDXTS](https://www.mdxts.dev) - The MDXTS is a content & documentation SDK for React and Nextjs. It helps to build a documentation website quickly and efficiently.



## Blogging



- [Section blog theme](https://github.com/frontendweb3/section-theme-blog) - The section blog theme is nextra-based MDX theme.

- [Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit) - A statically generated blog example using Next.js and Markdown.

- [Portfolio Starter Kit](https://vercel.com/templates/next.js/portfolio-starter-kit) - Easily create a portfolio blog with Next.js and Markdown.



## Nextjs boilerplate



- [Next.js Enterprise Boilerplate](https://github.com/Blazity/next-enterprise) - Next.js Enterprise Boilerplate, an open-source template, builds a high-performance, maintainable, and enjoyable application.

- [Create t3-app](https://create.t3.gg/) - Build the full-stack application with TypeScript, Prisma, tRPC, NextAuth, Tailwind CSS, and Next.js app.

- [Nextjs Boilerplate](https://github.com/ixartz/Next-js-Boilerplate) - Start new projects with support for App Router and Page Router, Tailwind CSS and TypeScript, and more.

- [Superplate](https://github.com/pankod/superplate) - Superplate is well-structured and production-ready and comes with Typescript, Popular UI Kits and +30 plugins.

- [Next.js + Tailwind CSS + TypeScript Starter and Boilerplate](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter) - Combination of Next.js, Tailwind CSS, and TypeScript.

- [Kirimase](https://kirimase.dev) - Kirimase is a command-line tool (CLI) for building full-stack Next.js.

- [Blitzjs](https://blitzjs.com) - Fullstack Toolkit for Next.js.



## Headless CMS



- [Tina CMS](https://tina.io/) - Tina CMS is a new nextjs-based CMS, an open-source, Git-backed headless CMS you can use with Markdown, MDX, and JSON.

- [WordPress](https://wordpress.org/) - WordPress is an open-source CMS ready for production. Using the built-in REST API, WordPress can power any website.

- [Strapi](https://strapi.io/) - Strapi is a powerful open-source node js-based Content Management System (CMS) perfect for small to large-scale websites.

- [Ghost](https://ghost.org/) - Ghost is a popular open-source CMS perfect for creating blogs. It offers a simple, user-friendly API interface that makes creating and publishing articles easy.

- [Netlify CMS](https://github.com/decaporg/decap-cms) - Decap CMS(Netlify CMS) work with all type of static site generators. It permits users to edit, update, and delete content on any site built with a static generator. You can use Decap CMS without any technical knowledge.

- [Forestry](https://forestry.io/) - Forestry is a headless CMS easy-to-customizable, configurable and integrated with all types of static site generators.

- [Craft CMS](https://craftcms.com/) - Craft CMS is a flexible, user-friendly CMS for creating the web.

- [Payload CMS](https://payloadcms.com) - Build a modern backend admin UI with payload CMS. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.

- [Pages CMS](https://pagescms.org) - A user-friendly and no-hassle CMS for static site generators.



## Database



- [Supabase](https://supabase.com) - Supabase is an open-source Firebase alternative.

- [PlanetScale](https://planetscale.com/) - PlanetScale is the world's most advanced MySQL platform.

- [MongoDB](https://www.mongodb.com/) - MongoDB helps to build small and large platforms.

- [Nhost](https://nhost.io/) - Nhost is an open-source backend and development platform that enables developers to build and scale their web and mobile apps.



## Authentication and User Management



- [Clerk](https://clerk.com/) - Clerk is more than a "sign-in box" and integrates complete user management UIs and APIs, purpose-built for React, Next.js, and the Modern Web.

- [Corbado](https://www.corbado.com) - Corbado helps you add passkeys to your Next.js website or app in a few lines of code.

- [Mojo Auth](https://mojoauth.com/) - Mojo Auth is a secure and delightful passwordless login solution.

- [Auth kit](https://www.authkit.com/) - MojoAuth offers a passwordless authentication solution for any web and mobile applications.

- [Kinde](https://kinde.com) - Simple, robust authentication built for developers.

- [Stytch](https://stytch.com) - Stytch is enterprise-ready authentication and authorization.

- [Auth0](https://auth0.com/) - Built the secure access for everyone with Auth0.



## React Form



- [React Hook Form](https://react-hook-form.com) - The React Hook Form is a performant, flexible, and extensible library used for building forms.

- [Conform](https://github.com/edmundhung/conform) - Conform is a type-safe form validation library to build forms with full support for server frameworks like Remix and Next.js.

- [Formiz](https://formiz-react.com) - Build react multi step and complex validation form very easily with formiz.

- [TanStack Form](https://tanstack.com/form/latest) - Tan Stack Form is the ultimate solution for handling forms in web applications.

- [Minform](https://minform.io) - Collect form data effortlessly without writing code, and it's free.



## Bundler



- [EsBuild](https://github.com/evanw/esbuild) - EsBuild is an open-source JavaScript bundler and minified that is extremely fast and lightweight.

- [Rollupjs](https://rollupjs.org) - The rollup.js is an open-source JavaScript bundler.

- [Tsup](https://github.com/egoist/tsup) - The tsup is the simplest and fastest way to bundle your TypeScript project with no configuration need.



## State Management



- [Zustand](https://github.com/pmndrs/zustand) - Zustand is a fast and scalable state management tool built by developers for React.js.

- [Redux](https://redux.js.org/) - Redux is an open-source JavaScript library for state managing tools. It is most commonly used with libraries such as React or Angular and helps build application user interfaces.

- [Recoil](https://recoiljs.org/) - Recoil is a state management library for React built by meta.

- [Jotai](https://jotai.org/) - Jotai is a primitive and flexible state management library for Reactjs.

- [React context](https://react.dev/learn/passing-data-deeply-with-context) - React.createContext() is a React API allowing you to pass or share between react components.

- [NUQS](https://nuqs.47ng.com) - Type-safe search params state manager for Next.js.

- [State-in-url](https://github.com/asmyshlyaev177/state-in-url) - Share any complex state between unrelated components, sync it to the URL, TS friendly.



## Analytics



- [Nextjs Google Analytics](https://www.npmjs.com/package/nextjs-google-analytics) - Add Google Analytics to your nextjs app.



## React UI Library



- [Tail Spark](https://tailspark.co) - Tail Spark is lightning, fast, beautifully designed and ready for production. Tail Spark comes with 300+ Tailwind CSS Components, All the components come with copy and paste code.

- [Radix UI](https://www.radix-ui.com/) - An open-source component library optimized for fast development, easy maintenance, and accessibility.

- [Shadcn UI](https://ui.shadcn.com/) - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

- [MUI](https://mui.com/) - Material UI provides a simple, customizable, accessible library of React components.

- [Primer React](https://primer.style/react/) - Primer React is built with Primer CSS and ReactJs by GitHub.

- [React bootstrap](https://react-bootstrap.github.io/) - React bootstrap is made based on React and Bootstrap.

- [Ant Design](https://ant.design/) - Ant Design UI is a high-quality React components library that helps designers/developers build beautiful products.

- [Chakra UI](https://chakra-ui.com/) - With the help of Chakra UI, you can quickly design a simple to complex site. It gives you the building blocks to build your React applications.

- [Kuma UI](https://www.kuma-ui.com/) - Empower Your Web with Ultimate Performance and Flexibility.

- [Aceternity UI](https://ui.aceternity.com/) - Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript.

- [Preline](https://preline.co) - Preline UI is an open-source prebuilt UI component library based on the tailwind CSS.

- [Franken UI](https://github.com/sveltecult/franken-ui) - Franken UI library, an HTML collection of copy-pastable components based on Tailwind CSS. its alternative of shadcn ui.

- [Tailus UI](https://ui.tailus.io/) - Tailus UI is a highly customizable components library for crafting modern, personalized websites and applications using reactjs.

- [Tamagui](https://tamagui.dev) - Build cross-platform applications with React and React Native: write less code and run faster.

- [Gluestack UI](https://github.com/gluestack/gluestack-ui) - Gluestack UI includes copy-paste React and React Native components and patterns designed with Tailwind CSS.

- [Tailkits](https://tailkits.com) - The Best Premium & Free Tailwind CSS Templates, UI Kits, and Components to Build Modern Websites.

- [DotUI](https://dotui.org/) - Get everything you need to build your React app with accessible, mobile-friendly, and modern UI components.

- [Magic UI](https://magicui.design) - Magic UI library for Engineers: 50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.

- [Eldora UI](https://eldoraui.site/) - Eldora UI Library Design for Engineers is an open-source collection of animated components made with React, Typescript, Tailwind CSS, and Framer Motion. It's fully open-source and customizable.



## Icons Library



- [React icons](https://react-icons.github.io/react-icons/) - Use the popular SVG icons in your React projects easily with react-icons.

- [MUI Icons](https://mui.com/material-ui/material-icons/) - Material icons are ready to use with React, officially designed and maintained by the MUI team.

- [Icon Buddy](https://iconbuddy.app/) - Icon Buddy comes for downloads, customizations, edits, and personalized. Icon Buddy has over 180k open-source icons.

- [Flowbite Icon](https://flowbite.com/icons/) - Flowbite Icons is a 487+ free and open-source SVG icon library. it is compatible with Flowbite and Tailwind CSS based on solid and outline styles with React (JSX) and Figma support.

- [Hero Icons](https://heroicons.com/) - Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.

- [Lucide](https://lucide.dev/) - Beautiful & consistent icons Made by the community.

- [Eva Icons](https://akveo.github.io/eva-icons) - Eva Icons is a pack of over 480 beautifully crafted Open Source icons for common use.

- [Icon Monstr](https://iconmonstr.com/) - Icon Monstr is a free, monstrously big, and continuously growing icon library.

- [Icon SVG](https://iconsvg.xyz/) - ICONSVG is a tool to simplify finding and generating common icons for your project.

- [Iconoir](https://iconoir.com/) - Iconoir is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.

- [Icons download](https://icons.download/) - The icons download library is free universal open-source icons with 16 styles.

- [Simple Icons](https://simpleicons.org/) - Simple Icons is an open-source SVG icons library that provides popular brand icons.



## Static Search library



- [Fusejs](https://fusejs.io/) - Fusejs is a popular, powerful, lightweight search library for creating search functionality for sites.

- [Flex Search](https://github.com/nextapps-de/flexsearch) - Next-Generation full-text search library for Browser and Node.js.

- [Orama](https://docs.oramasearch.com/) - Orama is a powerful full-text search engine that works both on client and server.

- [Algolia](https://www.algolia.com) - Enable search infrastructure with real-time results for websites and mobile applications.

- [Meilisearch](https://www.meilisearch.com) - The Meilisearch is a lightning-fast search API that seamlessly integrates with any framework, website, and workflow.



## Nextjs based Template



- [Minimalist](https://github.com/frontendweb3/minimalist) - Minimalist blog template built with nextjs and tailwind CSS.

- [Open Blog](https://github.com/frontendweb3/open-blog) - Open blog is a blogging template built with nextjs, tailwind CSS and markdown.

- [Blogify](https://github.com/frontendweb3/blogify) - Blogify is an open-source nextjs blog template design with tailwind CSS.



## Ready-Made Reactjs Hooks



- [usehooks ts](https://usehooks-ts.com) - React hook library, ready to use, written in Typescript.

- [Mantine Hooks](https://mantine.dev/getting-started) - Mantine Hooks provide Inbuilt readymade reactjs hooks for handling state and UI management.

- [usehooks](https://usehooks.com) - A collection of built-in modern, server-side React hooks.

- [React Custom Hooks](https://github.com/sergeyleschev/react-custom-hooks) - Supercharge Your Projects with ready-made custom hooks.

- [React use](https://github.com/streamich/react-use) - Collection of essential reactjs hooks used for any project.



## Tailwind CSS



- [Flowbite](https://flowbite.com/) - Flowbite is a popular library built with tailwind CSS and provides inbuilt tailwind CSS components for developers.

- [Material Tailwind](https://www.material-tailwind.com/) - Material Tailwind comes with ready-made components. You can design pure HTML and react website layouts using material tailwind components.

- [Meraki UI](https://merakiui.com/) - Meraki UI provides 144+ custom UI components built with tailwind CSS and Alpine JS.

- [Sailboat UI](https://sailboatui.com/) - Sailboat UI provides 150+ tailwind CSS components with tailwind CSS and alpine.js.

- [Kometa](https://kitwind.io/products/kometa/) - Kometa provides 130 inbuilt tailwinds CSS-based components, and Kometa is free.

- [Headless UI](https://headlessui.com) - Headless UI is a slight tailwind CSS-based component library only for React developers.

- [Daisy UI](https://daisyui.com/) - Daisy UI is an open-source UI based on tailwind CSS. The Big motivation is to use daisy UI in our project.

- [Hyper UI](https://www.hyperui.dev/) - Hyper UI is a free open-source tailwind CSS-based component for modern design. Hyper UI is a complete bundle of CSS and JavaScript.

- [Flowrift](https://flowrift.com/c/banner) - Flowrift is a free open-source tailwind CSS-based component library. It provides different category components for the website.

- [Tailwind UI kit](https://tailwinduikit.com/) - The tailwind UI kit offers an extensive list of inbuilt components. In the free plan tailwind, the UI kit provides only 250 components; in the paid plan, you access all components and templates for a lifetime.

- [Tailwind kit](https://www.tailwind-kit.com/) - The tailwind kit provides access to over 250 free tailwinds CSS-based components.

- [Wickedblocks](https://wickedblocks.dev/) - Wickedblocks provides a free 120 fully responsive tailwind CSS-based component, and all components come ready to copy and paste into your Tailwind projects.

- [Tailus](https://tailus.io/) - Tailus provides a list of UI components and templates built on tailwind CSS. Tailus components offer a rich and modern UI experience.

- [Tailgrids](https://tailgrids.com/) - Tailgrids provides a variety of 500+ components, blocks, sections, and templates built on tailwind CSS.

- [Kutty](https://kutty.netlify.app/) - Kutty is based on reusable tailwind CSS components and adds component interaction with alpine.js.

- [Windmill UI](https://windmillui.com/) - Windmill UI is a free react base UI component library design with tailwind CSS.

- [Myna UI](https://mynaui.com/) - Myna UI is an open-source tailwind CSS-based component library. It provides few components as compared to other libraries.

- [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation) - Tailwind Starter Kit is a Free and Open Source library. The Tailwind Starter Kit is based on Tailwind CSS.

- [Tailblocks](https://tailblocks.cc/) - Tailblocks is a small library based on tailwind CSS. Tailblocks provide 60+ inbuilt components.

- [Tailsc](https://tailsc.com/) - Tailsc is Free Tailwind CSS Components for website block, focuses on stylish, accessible and free UI components that you can just copy & paste on any tailwind css project.

- [Tailwind toolbox](https://www.tailwindtoolbox.com/) - A tailwind toolbox site is where you find other people's projects on tailwind CSS. All the project is free, and you copy and paste code into your project.

- [Next UI](https://nextui.org) - Beautiful, fast, and modern React UI library.

- [Lang UI](https://www.langui.dev/) - Beautifully crafted Tailwind components for your GPT projects.



## Development Tool



- [Typescript](https://www.typescriptlang.org/) - Typescript helps to write type-safe JavaScript for production.

- [@next/eslint-plugin-next](https://www.npmjs.com/package/@next/eslint-plugin-next) - Next/eslint-plugin help to resolve the error.

- [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) - Analyzer your nextjs bundle size using a webpack bundle analyzer.



## Error Handling



- [React Error Boundary](https://www.npmjs.com/package/react-error-boundary?activeTab=readme) - The react error boundary package is a reusable React error boundary component. You can wrap your application with an Error Boundary component around other React components to catch errors and render a fallback UI.

- [Use error boundary](https://www.npmjs.com/package/use-error-boundary) - The use-error-boundary is a react hook, it is built to handle error boundaries in your react functional components.



## VS Code Extensions



- [Next.Nav](https://marketplace.visualstudio.com/items?itemName=NextNav.NextNav) - Using the VS Code extension, navigate and create routes easily in your Next.js application.

- [Nextjs snippets](https://marketplace.visualstudio.com/items?itemName=PulkitGangwar.nextjs-snippets) - Ready-made snippets for Next.js.

- [Front Matter CMS](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter) - Front Matter CMS gives you the power, flexibility, and control to work with Markdown.

- [React and Next.js Snippets](https://marketplace.visualstudio.com/items?itemName=AvneeshAgarwal.react-nextjs-snippets) - A VSCode extension packed with the latest React and Next.js snippets.



## Chrome Extension



- [Gimli](https://gimli.app/) - Gimli Chrome extension is an innovative visual tool for front-end developers to build with tailwind CSS.

- [NextJS Utilities Extension](https://chrome.google.com/webstore/detail/nextjs-utilities-extensio/ffcogmoganomoabikgmcmckdgojnpldo) - Next.js Utilities Extension shows you the size of Next.js static data without installing of any additional stuff.

- [GitHub Web IDE](https://chromewebstore.google.com/detail/github-web-ide/adjiklnjodbiaioggfpbpkhbfcnhgkfe) - Open Any GitHub repositories in online web (cloud) IDE like VS Code, GitHub Dev, Code Sandbox, Repl.it, Gitpod, etc.



## Utility (Others)



- [Demo posts for markdown](https://github.com/frontendweb3/Demo-markdown-posts) - Demo markdown posts are used to design your new blog base template. You do not write markdown demo posts. You can use demo markdown posts with any static site generator which supports markdown. for example, next.js, gatsby, lume, fresh, etc. Demo markdown posts are written with Lorem Ipsum. I can use bold, italic, code block, inline code, links, images, and quotes in markdown posts.

- [Jam Stack](https://jamstack.org) - A list of resources related to CMS and site generators across the programming world.