Starter Docs
Research

🎯 Next.js & React

🎨 UI & Styling

Destack for Next.js

Next.js extension to visually build landing pages locally with drag-and-drop interface.

next-img

Plugin for embedding optimized images with ease, handling responsive images and lazy loading.

shadcn/ui

Beautifully designed components that you can copy and paste into your apps - perfect for Next.js.

UI Frameworks for Next.js

Material Design

  • 🚀 Material UI - Full suite of components. Build your own design system, or start with Material Design.
    • Autocomplete - Accessible autocomplete, combobox, multiselect
    • Material Icons - 1,000+ SVG material icons
    • Modal - Accessible modal dialog component
    • Slider - Accessible slider component
    • Table - table with sorting, selecting, pagination, virtualized
    • Tree View - Accessible tree view component for React
  • Ant Design - A UI Design Language from China with excellent Next.js integration
  • Chakra UI - Simple, Modular & Accessible UI Components for your Next.js Applications
  • Mantine - A fully featured library with 100+ hooks and components with native dark theme support
  • React Bootstrap - Bootstrap components built with React
  • Tailwind CSS - Utility-first CSS framework that works perfectly with Next.js

Component Collections for Next.js

  • Blueprint - UI toolkit for building complex, data-dense web interfaces
  • Evergreen - Evergreen React UI Framework by Segment
  • Gestalt - A set of components that supports Pinterest's design language
  • Carbon - A design system built by IBM

🔧 Essential Extensions

Next SEO

SEO made easy for Next.js - comprehensive solution for managing meta tags, structured data, and social media optimization.

Next-Sitemap

Sitemap generator for Next.js with support for multiple sitemaps, internationalization, and automatic generation.

next-i18next

The easiest way to translate your NextJs apps with full TypeScript support and server-side rendering.

Next PWA

Zero config PWA plugin for Next.js with workbox - turns your Next.js app into a Progressive Web App.

next-auth

Complete authentication solution for Next.js and Serverless with support for multiple providers, JWT, and database sessions.

next-connect

Express/Connect-compatible router and middleware layer for Next.js API routes.

react-helmet-async

Thread-safe Helmet for React 16+ and friends - perfect for Next.js head management.

react-helmet

A document head manager for React - alternative for Next.js head management.

📊 Data & API Tools

next-iron-session

Next.js stateless session utility using signed and encrypted cookies to store data securely.

next-api-decorators

Decorators to create typed Next.js API routes with easy request validation and transformation.

Next With Apollo

Apollo GraphQL integration for Next.js with server-side rendering support.

apollo-client

A simple caching client for any GraphQL server and UI framework - works great with Next.js.

react-relay

Relay is a JavaScript framework for building data-driven React applications.

TanStack Query

Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

SWR

Data fetching for React - works perfectly with Next.js.

🛠️ Development Tools

next-transpile-modules

Next.js plugin to transpile code from node_modules - essential for monorepos and external packages.

Next PurgeCSS

Easily integrate PurgeCSS to remove unused CSS from your bundle and optimize performance.

flow-middleware

Run any Express middleware on Next.js without polluting native objects.

Development & Testing Tools

  • Jest - Painless JavaScript Testing - works great with Next.js
  • Enzyme - JavaScript Testing utilities for React
  • Playwright - Enables reliable end-to-end testing for modern web apps
  • Storybook - Build component libraries in isolation
  • React Testing Library - Simple and complete testing utilities

📱 UI Components for Next.js Apps

Data Display

Navigation & Layout

Forms & Input

  • react-hook-form - React hooks for form validation without the hassle
  • formik - Build forms without tears and supports Validation in ease
  • react-datepicker - A simple and reusable datepicker component
  • react-select - A Select control built with and for React JS

Media & Graphics

  • react-player - A react component for playing a variety of URLs, including YouTube
  • react-image-gallery - Responsive image gallery, carousel, image slider react component
  • react-pdf - Display PDFs in your React app as easily as if they were images

Notifications & Feedback

  • 🚀 react-toastify - Best toast notifications library - hooks support, no refs
  • react-hot-toast - Smoking hot Notifications for React
  • notistack - Highly customizable notification snackbars (toasts)

Animation & Effects

🌐 Internationalization & Localization

react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem - works seamlessly with next-i18next.

react-intl

Internationalize React apps - alternative to next-i18next.

@tolgee/react

Web-based localization tool enabling users to translate directly in the React app they develop.

js-lingui

A readable, automated, and optimized (5 kb) internationalization for JavaScript.

🔄 State Management for Next.js

Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development.

react-redux

Official React bindings for Redux - works great with Next.js.

Zustand

A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.

Jotai

Primitive and flexible state management for React - perfect for Next.js apps.

Recoil

A state management library for React by Facebook.

📚 Learning Resources

Mastering Next.js

50+ lesson video course for building applications with Next.js and React.

Real World Next.js

Build scalable, high-performance, and modern web applications using Next.js.

The Next.js Handbook

Build a frontend React application that transparently handles server-side rendering.

React Learning Resources

🌟 Notable Apps Built with Next.js

shadcn/ui

Beautifully designed components that you can copy and paste into your apps.

Taxonomy

An example app built using Next.js 13 server components showcasing modern patterns.

CourseLit

Open source alternative to Thinkific and Teachable for creating online courses.

React-based Showcase Apps

  • Gatsby - Transform plain text into dynamic blogs and websites using React.js
  • Plasmic - Powerful design tool for building your React components visually

🚀 Performance & Optimization

Server-Side Rendering

  • iSSR - The easiest way to move your React application to Server-Side Rendering
  • react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

Lazy Loading & Virtualization

  • react-window - React components for efficiently rendering large lists and tabular data
  • react-lazyload - Lazyload your Component, Image or anything else where the performance matters
  • virtua - A zero-config, fast and small (~3kB) virtual list component

Bundle Optimization

🔧 Development Tools & DevOps

Testing

  • React Testing Library - Simple and complete testing utilities that encourage good testing practices
  • Jest - Delightful JavaScript Testing Framework
  • Cypress - Fast, easy and reliable testing for anything that runs in a browser

Code Quality

  • ESLint - Find and fix problems in your JavaScript code
  • Prettier - Opinionated code formatter
  • Husky - Git hooks made easy

Monitoring & Analytics

📰 Stay Updated

Next.js News

Monthly Next.js newsletter showcasing new and upcoming features, best articles, tools, and plugins.

Next.js Notes

Monthly Next.js and JavaScript platform news.

React Community Resources

  • React Newsletter - The free, weekly newsletter of the best React.js news and articles
  • This Week in React - Weekly newsletter about React & React Native
  • React Status - A weekly roundup of the latest React and React Native links and tutorials

🔗 Integration Libraries

Third-Party Services

Framework Integrations

🏗️ Advanced Architecture

Micro-frontends

Full-Stack Solutions

  • T3 Stack - The best way to start a full-stack, typesafe Next.js app
  • Blitz.js - The Fullstack React Framework
  • RedwoodJS - The App Framework for Startups

This extended list combines the power of Next.js with the rich ecosystem of React libraries, providing a comprehensive toolkit for building modern web applications. Whether you're building a simple website or a complex enterprise application, these tools will help you create performant, accessible, and maintainable applications.

💼 Job Platforms

Previous Page

💳 Payment Processors

Next Page