awesome.re (opens in a new tab))

I have compiled a list of NPM libraries that can be used to develop small and large-scale applications with Next.js. The list is based on my experience as a front-end developer, and I have used 80% of the packages mentioned.

As I discover more packages in the future, I will add them to the current list to help other front-end developers build applications with Next.js more efficiently.

To stay updated, Subscribe to my YouTube Channel (opens in a new tab).

Officially for Nextjs

Turborepo (opens in a new tab) - Turborepo is a high-performance build system for JavaScript and TypeScript codebases.
Turbopack (opens in a new tab) - Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust.
Swr (opens in a new tab) - React Hooks for Data Fetching.
Satori (opens in a new tab) - Enlightened library to convert HTML and CSS to SVG.
React tweet (opens in a new tab) - Embed tweets in your React application.

specifically for Nextjs

Next SEO (opens in a new tab) - Next SEO is a plugin that helps manage the SEO in Next.js.
Next sitemap (opens in a new tab) - The next sitemap library helps you create a sitemap file in your nextjs application.
Next auth (opens in a new tab) - Next auth library provides authorization functionality for your app.
Next PWA (opens in a new tab) - Next PWA library helps to enable your application's progressive Web Apps functionality.
Content layer (opens in a new tab) - The content layer works with nextjs and markdown and helps build the blog application.
Nextjs progress bar (opens in a new tab) - Nextjs progress bar shows the loading indicator in nextjs.
Nextjs Google Analytics (opens in a new tab) - Add Google Analytics to your nextjs app.
Next-themes (opens in a new tab) - You can enable the dark-to-light theme toggle with next-themes in your Next.js app.
Create t3-app (opens in a new tab) - Build the full-stack application with TypeScript, Prisma, tRPC, NextAuth, Tailwind CSS, and Next.js app.
Tina CMS (opens in a new tab) - Tina CMS is a new nextjs-based CMS, an open-source, Git-backed headless CMS you can use with Markdown, MDX, and JSON.

Documentation

Next MDX (opens in a new tab) - MDX library combines the JSX and markdown content.
Nextra (opens in a new tab) - Nextra is a simple, powerful, and flexible site generation framework to build blogs and documents with Next.js and MDX.
Markdoc (opens in a new tab) - Markdoc is a powerful, flexible, Markdown-based authoring framework.
Outstatic (opens in a new tab) - 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.

Blogging

Section blog theme (opens in a new tab) - The section blog theme is nextra-based MDX theme.

Nextjs boilerplate

Next.js Enterprise Boilerplate (opens in a new tab) - Next.js Enterprise Boilerplate, an open-source template, builds a high-performance, maintainable, and enjoyable application.
Refine (opens in a new tab) - Refine, an open-source Open-source Retool for Enterprise Build React-based internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
Create t3 App (opens in a new tab) - Interactive CLI to start a full-stack, type-safe new Next.js application.
Nextjs Boilerplate (opens in a new tab) - Start new projects with App Router and Page Router support, Tailwind CSS and TypeScript, and many more.
Superplate (opens in a new tab) - 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 (opens in a new tab) - Combination of Next.js, Tailwind CSS, and TypeScript.

Headless CMS

WordPress (opens in a new tab) - WordPress is an open-source CMS ready for production. Using the built-in REST API, WordPress can power any website.
Strapi (opens in a new tab) - Strapi is a powerful open-source node js-based Content Management System (CMS) perfect for small to large-scale websites.
Ghost (opens in a new tab) - 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 (opens in a new tab) - 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 (opens in a new tab) - Forestry is a headless CMS easy-to-customizable, configurable and integrated with all types of static site generators.
Craft CMS (opens in a new tab) - Craft CMS is a flexible, user-friendly CMS for creating the web.
Payload CMS (opens in a new tab) - 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.

Database

Supabase (opens in a new tab) - Supabase is an open source Firebase alternative.
PlanetScale (opens in a new tab) - PlanetScale is the worlds most advanced MySQL platform.
MongoDB (opens in a new tab) - MongoDB helps to built small and large platform.

Authentication and User Management

Clerk (opens in a new tab) - 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.
Mojo Auth (opens in a new tab) - Mojo Auth is a secure and delightful passwordless login solution.
Auth kit (opens in a new tab) - MojoAuth offers a passwordless authentication solution for any web and mobile application.
Kinde (opens in a new tab) - Simple, robust authentication built for developers.
Stytch (opens in a new tab) - Stytch is enterprise-ready authentication and authorization.

State Management

Zustand (opens in a new tab) - Zustand is a fast and scalable state management tool built by developers for React.js.
Redux (opens in a new tab) - 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 (opens in a new tab) - Recoil is a state management library for React built by meta.
Jotai (opens in a new tab) - Jotai is a primitive and flexible state management library for Reactjs.
React context (opens in a new tab) - React.createContext() is a React API allowing you to pass or share between react components.

React UI Library

Tail Spark (opens in a new tab) - 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 (opens in a new tab) - An open-source component library optimized for fast development, easy maintenance, and accessibility.
Shadcn UI (opens in a new tab) - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
MUI (opens in a new tab) - Material UI provides a simple, customizable, accessible library of React components.
Primer React (opens in a new tab) - Primer React is built with Primer CSS and ReactJs by GitHub.
React bootstrap (opens in a new tab) - React bootstrap is made based on React and bootstrap.
Ant Design (opens in a new tab) - Ant Design UI is a high-quality React components library that helps designers/developers build beautiful products.
Chakra UI (opens in a new tab) - 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 (opens in a new tab) - Empower Your Web with Ultimate Performance and Flexibility.
Aceternity UI (opens in a new tab) - Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript.

Icons Library

React icons (opens in a new tab) - Use the popular SVG icons in your React projects easily with react-icons.
MUI Icons (opens in a new tab) - Material icons are ready to use with React, officially designed and maintained by the MUI team.
Icon Buddy (opens in a new tab) - Icon Buddy comes for downloads, customizations, edits, and personalized. Icon Buddy has over 180k open-source icons.
Flowbite Icon (opens in a new tab) - 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 (opens in a new tab) - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Lucide (opens in a new tab) - Beautiful & consistent icons Made by the community.
Eva Icons (opens in a new tab) - Eva Icons is a pack of over 480 beautifully crafted Open Source icons for common use.
Icon Monstr (opens in a new tab) - Icon Monstr is a free, monstrously big, and continuously growing icon library.
Icon SVG (opens in a new tab) - ICONSVG is a tool to simplify finding and generating common icons for your project.
Iconoir (opens in a new tab) - 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 (opens in a new tab) - Open-source free universal icons.

Static Search library

Fusejs (opens in a new tab) - Fusejs is a popular, powerful, lightweight search library for creating search functionality for sites.
Flex Search (opens in a new tab) - Next-Generation full-text search library for Browser and Node.js.
Orama (opens in a new tab) - Orama is a powerful full-text search engine that works both on client and server.

Nextjs based Template

Minimalist (opens in a new tab) - Minimalist blog template built with nextjs and tailwind CSS.
Open Blog (opens in a new tab) - Open blog is a blogging template built with nextjs, tailwind CSS and markdown.
Blogify (opens in a new tab) - Blogify is an open-source nextjs blog template design with tailwind CSS.

Ready-Made Reactjs Hooks

usehooks-ts (opens in a new tab) - React hook library, ready to use, written in Typescript.
Mantine Hooks (opens in a new tab) - Mantine Hooks provide Inbuilt readymade reactjs hooks for handling state and UI management.
usehooks (opens in a new tab) - A collection of built-in modern, server-side React hooks.
React Custom Hooks (opens in a new tab) - Supercharge Your Projects with ready-made custom hooks.

Tailwind CSS

Flowbite (opens in a new tab) - Flowbite is a popular library built with tailwind CSS and provides inbuilt tailwind CSS components for developers.
Preline (opens in a new tab) - Preline is a popular library built with tailwind CSS and provides inbuilt tailwind CSS components for developers.
Material Tailwind (opens in a new tab) - Material Tailwind comes with ready-made components. You can design pure HTML and react website layouts using material tailwind components.
Meraki UI (opens in a new tab) - Meraki UI provides 144+ custom UI components built with tailwind CSS and Alpine JS.
Sailboat UI (opens in a new tab) - Sailboat UI provides 150+ tailwind CSS components with tailwind CSS and alpine.js.
Kometa (opens in a new tab) - Kometa provides 130 inbuilt tailwinds CSS-based components, and Kometa is free.
Headless UI (opens in a new tab) - Headless UI is a slight tailwind CSS-based component library only for React developers.
Daisy UI (opens in a new tab) - Daisy UI is an open-source UI based on tailwind CSS. The Big motivation is to use daisy UI in our project.
Hyper UI (opens in a new tab) - 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 (opens in a new tab) - Flowrift is a free open-source tailwind CSS-based component library. It provides different category components for the website.
Tailwind UI kit (opens in a new tab) - 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 (opens in a new tab) - The tailwind kit provides access to over 250 free tailwinds CSS-based components.
Wickedblocks (opens in a new tab) - 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 (opens in a new tab) - Tailus provides a list of UI components and templates built on tailwind CSS. Tailus components offer a rich and modern UI experience.
Tailgrids (opens in a new tab) - Tailgrids provides a variety of 500+ components, blocks, sections, and templates built on tailwind CSS.
Kutty (opens in a new tab) - Kutty is based on reusable tailwind CSS components and adds component interaction with alpine.js.
Windmill UI (opens in a new tab) - Windmill UI is a free react base UI component library design with tailwind CSS.
Myna UI (opens in a new tab) - Myna UI is open source tailwind CSS-based component library. It provides few components as compared to other libraries.
Tailwind Starter Kit (opens in a new tab) - Tailwind Starter Kit is a Free and Open Source library. The Tailwind Starter Kit is based on Tailwind CSS.
Tailblocks (opens in a new tab) - Tailblocks is a small library based on tailwind CSS. Tailblocks provide 60+ inbuilt components.
Tailwind toolbox (opens in a new tab) - 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 (opens in a new tab) - Beautiful, fast, and modern React UI library.
Lang UI (opens in a new tab) - Beautifully crafted Tailwind components for your GPT projects.

Development Tool

Typescript (opens in a new tab) - Typescript helps to write type-safe JavaScript for production.
@next/eslint-plugin-next (opens in a new tab) - Next/eslint-plugin help to resolve the error.
@next/bundle-analyzer (opens in a new tab) - Analyzer your nextjs bundle size using a webpack bundle analyzer.

Error Handling

React Error Boundary (opens in a new tab) - 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 (opens in a new tab) - 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 (opens in a new tab) - Using the VS Code extension, navigate and create routes easily in your Next.js application.
Nextjs snippets (opens in a new tab) - Ready-made snippets for Next.js.
Front Matter CMS (opens in a new tab) - Front Matter CMS gives you the power, flexibility, and control to work with Markdown.
React and Next.js Snippets (opens in a new tab) - A VSCode extension packed with the latest React and Next.js snippets.

Chrome Extension

Gimli (opens in a new tab) - Gimli Chrome extension is an innovative visual tool for front-end developers to build with tailwind CSS.
NextJS Utilities Extension (opens in a new tab) - Next.js Utilities Extension shows you the size of Next.js static data without installing of any additional stuff.
GitHub Web IDE (opens in a new tab) - Open Any GitHub repositories in online web (cloud) IDE like VS Code, GitHub Dev, Code Sandbox, Repl.it, Gitpod, etc.

Blogs

Demo posts for markdown (opens in a new tab) - 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.
18 GREAT EXAMPLES OF NEXT.JS WEBSITES (opens in a new tab) - Demo markdown posts are used to design your new blog base template.

Authentication and Authorization Next JS Assignments