Skip to content

hamedjix/awesome-nextjs

 
 

Repository files navigation

Awesome Nextjs

Next.js Awesome

List of NPM libraries that helps to build small and large-scale applications with next.js. I created a list based on my working experience.

I used 80% of the package as a front-end developer in this list. In the future, I will discover and mention more packages in the current list that helps build nextjs or front-end developers more efficiently for everyone.

Table of Contents

Contributing

You can share your favourite library, tool, or template related to nextjs. It helps full for other developers. Before the share your favourite library, tool, or template, please read our Contribution guidelines.


Specify for Nextjs

  • Next SEO: Next SEO is a plugin that helps manage the SEO in Next.js.
  • Next sitemap: Next sitemap library help to create a sitemap file in your nextjs application.
  • Next auth: Next auth library provides authorization functionality for your app.
  • Next PWA: Next PWA library help to enable your application's progressive Web Apps functionality.
  • Content layer: The content layer works with nextjs and markdown and helps to build the blog application.
  • Nextjs progress bar: Nextjs progress bar shows the loading indicator in nextjs.
  • Nextjs Google Analytics: Adding Google Analytics in your nextjs app.
  • Next MDX: MDX library combines the JSX and markdown content.
  • Next-themes: You can enable the dark-to-light theme toggle with next-themes in your Next.js app.
  • Nextra: Nextra is a simple, powerful, and flexible site generation framework to build blogs and documents with Next.js and MDX.
  • Create t3-app: Build the full-stack application with TypeScript, Prisma, tRPC, NextAuth, Tailwind CSS, and Next.js app.
  • Tina CMS: Tina CMS is a new nextjs-based CMS; it is an open-source, Git-backed headless CMS you can use with Markdown, MDX, and JSON.
  • Out static: Outstatic is a new static site content management system(CMS) built with Next.js. Special built for Next.js. It works with a pages and app router.

Nextjs boilerplate

Headless CMS

  • Strapi: Strapi is a powerful open-source node js-based Content Management System (CMS) perfect for small to large-scale websites.
  • Ghost: 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: Decap CMS(Netlify CMS) work with all type of static site generators. It permits users to edit, update and delete content to any site built with a static generator. You can use Decap CMS without any technical knowledge.
  • Forestry: Forestry is a headless CMS easy-to-customizable, configurable and integrated with all types of static site generators.

State Management

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

React UI Library

  • MUI: Material UI provides a simple, customizable, accessible library of React components.
  • Primer React: Primer React is built with Primer CSS and ReactJs by GitHub
  • React bootstrap: React bootstrap is made based on react and bootstrap.
  • Ant Design: Ant Design UI is a high-quality React components library that helps designers/developers build beautiful products.
  • Chakra UI: 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.

Icons Library

  • react icons: Use the popular svg icons in your React projects easily with react-icons.
  • MUI Icons: Material icons are ready-to-use with React, which is officially designed and maintained by the MUI team.

Static Search library

  • fusejs: Fusejs is a popular, powerful, lightweight search library for creating search functionality for sites.
  • flex Search: Next-Generation full text search library for Browser and Node.js
  • orama: Orama is a powerful full-text search engine that works both on client and server.

Nextjs based template

  • Minimalist: Minimalist blog template built with nextjs and tailwind css.
  • Open Blog: Open blog is a bloging template built with nextjs, tailwind CSS and markdown.
  • Blogify: Blogify is an open-source nextjs blog template design with tailwind CSS.

Tailwind CSS

  • Flowbite: Flowbite is a popular library builtin with tailwind CSS and provides inbuilt tailwindcss components for developers.
  • Radix UI: Radix-ui is a popular library builtin on the tailwind css framework. Radix UI feels like material UI.
  • Material Tailwind: Material Tailwind comes with ready-made components. You can design pure HTML and react website layouts using material tailwind components.
  • Meraki UI: Meraki UI provides 144+ custom UI components built with tailwind CSS and Alpine JS.
  • Sailboat UI: Sailboat UI provides 150+ tailwind CSS components with tailwind CSS and alpine.js.
  • Kometa : Kometa is UI kit based on tailwind CSS. Kometa provides 130 inbuilt tailwinds CSS-based components, and Kometa is free.
  • Headless UI: Headless UI is a slight tailwind CSS-based component library only for react developers.
  • Daisy UI: Daisy UI is an open-source UI based on tailwind CSS. The Big motivation is to use daisy UI in our project.
  • Hyper UI: 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: Flowrift is a free open-source tailwind CSS-based component library. It provides different category components for the website.
  • Tailwind UI kit: 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: The tailwind kit provides access to over 250 free tailwinds CSS-based components.
  • Wickedblocks: Wickedblocks provide a free 120 fully responsive tailwind CSS-based component, and All component comes ready to copy and paste into your Tailwind projects.
  • Tailus: Tailus provides a list of UI components and templates built on tailwind CSS. Tailus components offer a rich and modern UI experience.
  • Tailgrids: Tailgrids provides a variety of 500+ components, blocks, sections, and templates built on tailwind CSS.
  • Kutty: Kutty is based on reusable tailwind CSS components and adds component interaction with alpine.js.
  • Windmill UI: Windmill UI is a free react base UI component library design with tailwind CSS.
  • Myna UI: Myna UI is open source tailwind CSS-based component library. It provides few components as compared to other libraries.
  • Tailwind Starter Kit: Tailwind Starter Kit is a Free and Open Source library. The Tailwind Starter Kit is based on Tailwind CSS.
  • Tailblocks: Tailblocks is a small library based on tailwind CSS. Tailblocks provide 60+ inbuilt components.
  • Tailwind toolbox: 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.
  • Headless UI: Built-in the react UI components designed with Tailwind CSS.

Development Tool

Error Handling

  • React Error Boundary: 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: 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: Using the VS Code extension, navigate and create routes easily in your Next.js application.
  • Nextjs snippets: Ready-made snippets for Next.js.
  • Front Matter CMS: Front Matter CMS gives you the power, flexibility, and control to work with Markdown.

Chrome Extension

  • Gimli: Gimli chrome extension is an innovative visual tool for front-end developers to build with tailwind CSS.
  • NextJS Utilities Extension: Next.js Utilities Extension shows you the size of Next.js static data without installing of any additional stuff.
  • GitHub Web IDE: 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: 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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 54.0%
  • JavaScript 46.0%