← Go back to all lists
🤖Codi's Next JS Resource List
Coding moves really quickly, and it can be hard to keep up. We're using this list to save the interesting resources we find for each language.
If you find something great that I missed, please tweet us:@assistivai
Documentation
Next.js Official Documentation The official documentation for Next.js, covering all aspects of the framework. | documentation official nextjs |
MDN Web Docs Comprehensive resource for web technologies, useful for Next.js developers. | web-development documentation nextjs |
Development
Next.js GitHub Repository The official GitHub repository for Next.js, containing source code and issues. | github source-code nextjs |
Next.js with TypeScript Guide on using Next.js with TypeScript for type-safe development. | typescript nextjs type-safety |
Next.js RFC (Request for Comments) Proposals for significant changes to Next.js, offering insights into future developments. | rfc proposals nextjs |
Learning
Next.js Examples A collection of example projects showcasing various Next.js features and integrations. | examples projects nextjs |
Learn Next.js by Vercel An interactive course for learning Next.js, created by the framework's maintainers. | tutorial course nextjs |
Frontend Masters Platform offering in-depth courses on frontend technologies, including Next.js. | courses frontend nextjs |
Egghead IO Platform with concise video tutorials on web development topics, including Next.js. | tutorials video-courses nextjs |
Resources
Next.js Blog The official Next.js blog, featuring updates, tutorials, and best practices. | blog updates nextjs |
Awesome Next.js A curated list of awesome resources, libraries, and tools for Next.js. | awesome-list resources nextjs |
Smashing Magazine Online magazine for web designers and developers, with articles relevant to Next.js development. | web-development articles nextjs |
Deployment
Deploying Next.js Applications Documentation on deploying Next.js applications, focusing on Vercel's platform. | deployment vercel nextjs |
Next.js Deployment on Vercel Official guide on deploying Next.js applications on the Vercel platform. | deployment vercel nextjs |
Vercel Platform Documentation Documentation for the Vercel platform, which is tightly integrated with Next.js. | vercel deployment nextjs |
E-commerce
Next.js Commerce A Next.js-based e-commerce solution provided by Vercel. | e-commerce solution nextjs |
 Building E-commerce Sites with Next.js and Shopify Tutorial on creating a headless e-commerce store using Next.js and Shopify. | shopify headless nextjs |
Authentication
NextAuth.js for Authentication A complete authentication solution for Next.js applications. | authentication nextjs security |
NextAuth for Authentication Documentation for NextAuth.js, a complete authentication solution for Next.js applications. | authentication nextauth nextjs |
Performance
Next.js Performance Optimization Guide on measuring and optimizing performance in Next.js applications. | performance optimization nextjs |
Next.js Image Optimization Documentation on using the Next.js Image component for optimized image loading. | image-optimization performance nextjs |
Web Workers API Reference MDN documentation on Web Workers, which can be used in Next.js for running scripts in background threads. | web-workers multithreading nextjs |
Rendering
Static Site Generation (SSG) in Next.js Documentation on implementing Static Site Generation in Next.js. | ssg static-site nextjs |
Server-Side Rendering (SSR) with Next.js Guide on implementing Server-Side Rendering in Next.js applications. | ssr server-side-rendering nextjs |
Routing
Dynamic Routing in Next.js Documentation on implementing dynamic routing in Next.js applications. | routing dynamic-routes nextjs |
React Router for Routing Popular routing library for React, which can be used with Next.js for client-side routing. | routing react-router nextjs |
API
API Routes in Next.js Guide on creating and using API routes in Next.js applications. | api-routes serverless nextjs |
GraphQL API Reference Official GraphQL specification, useful when implementing GraphQL in Next.js applications. | graphql api nextjs |
REST API Design Guidelines Guidelines for designing REST APIs, applicable when creating API routes in Next.js. | rest-api api-design nextjs |
OpenAPI Specification OpenAPI (formerly Swagger) specification for designing, building, and documenting RESTful APIs in Next.js. | openapi api-documentation nextjs |
JSON:API Specification Specification for building APIs in JSON, useful when designing API routes in Next.js. | jsonapi api-design nextjs |
Internationalization
Internationalization in Next.js Guide on implementing internationalization (i18n) in Next.js applications. | i18n localization nextjs |
Creating a Multi-Language Site with Next.js and i18n Tutorial on implementing multi-language support in Next.js using i18n. | i18n multi-language nextjs |
Styling
Using CSS Modules with Next.js Documentation on using CSS Modules for component-scoped styling in Next.js. | css-modules styling nextjs |
Styled Components with Next.js Guide on using Styled Components for CSS-in-JS styling in Next.js applications. | styled-components css-in-js nextjs |
Using Tailwind CSS with Next.js Official guide on integrating Tailwind CSS with Next.js applications. | tailwindcss utility-css nextjs |
PostCSS for CSS Processing Tool for transforming CSS with JavaScript, commonly used in Next.js projects. | css postcss nextjs |
Sass for CSS Preprocessing CSS preprocessor that can be easily integrated with Next.js applications. | css sass nextjs |
Less for CSS Preprocessing Another CSS preprocessor option for styling Next.js applications. | css less nextjs |
Styled Components Documentation CSS-in-JS library for styling React and Next.js components. | css-in-js styled-components nextjs |
Emotion Documentation Another popular CSS-in-JS library for Next.js applications. | css-in-js emotion nextjs |
CSS Tricks Website with many CSS tips and tricks, applicable to styling in Next.js applications. | css styling nextjs |
Data Fetching
React Query with Next.js Guide on using React Query for data fetching in Next.js applications with SSR support. | react-query data-fetching nextjs |
Using GraphQL with Next.js Guide on integrating GraphQL with Next.js using Apollo Client and code generation. | graphql apollo nextjs |
Using SWR for Data Fetching in Next.js Apps Guide on using SWR (Stale-While-Revalidate) for efficient data fetching in Next.js. | swr data-fetching nextjs |
React Query for Data Fetching Powerful data fetching and caching library for React and Next.js applications. | data-fetching react-query nextjs |
State Management
Using Redux with Next.js Documentation on integrating Redux for state management in Next.js applications. | redux state-management nextjs |
Testing
Testing Next.js Applications Introduction to testing Next.js applications using React Testing Library. | testing react-testing-library nextjs |
React Testing Library Testing utilities for React and Next.js applications focusing on user behavior. | testing react-testing-library nextjs |
Cypress for End-to-End Testing End-to-end testing framework suitable for Next.js applications. | e2e-testing cypress nextjs |
Jest for Unit Testing JavaScript testing framework commonly used for unit testing in Next.js applications. | unit-testing jest nextjs |
Integration
Next.js and Firebase Integration Guide on integrating Firebase services with Next.js applications. | firebase backend nextjs |
Integrating Google Maps in a Next.js App Tutorial on integrating Google Maps into a Next.js application. | google-maps maps nextjs |
CMS
Using Contentful with Next.js Tutorial on using Contentful as a headless CMS with Next.js applications. | contentful headless-cms nextjs |
Next.js and Sanity.io Integration Tutorial on building a blog with Next.js and Sanity.io as the CMS. | sanity-io blog nextjs |
Using Strapi with Next.js Guide on integrating Strapi headless CMS with Next.js applications. | strapi headless-cms nextjs |
Tutorial
Building a Blog with Next.js and Markdown Tutorial on creating a blog using Next.js with Markdown for content. | blog markdown nextjs |
Creating a Portfolio with Next.js Guide on building a personal portfolio website using Next.js. | portfolio personal-site nextjs |
Creating a Custom 404 Page in Next.js Tutorial on implementing a custom 404 error page in Next.js applications. | 404-page error-handling nextjs |
Comparison
Next.js vs Gatsby Comparison A comprehensive comparison between Next.js and Gatsby frameworks. | gatsby comparison nextjs |
Search
Integrating Algolia Search with Next.js Guide on implementing Algolia search in Next.js applications. | algolia search nextjs |
Real-time
Building a Chat Application with Next.js and Socket.io Tutorial on creating a real-time chat application using Next.js and Socket.io. | chat socket-io nextjs |
Building a Real-Time App with Next.js and Firebase Firestore Course on building real-time applications with Next.js and Firebase Firestore. | firebase firestore nextjs |
Using WebSockets in Next.js Applications Tutorial on implementing WebSocket connections in Next.js applications. | websockets real-time nextjs |
WebSockets API Reference MDN documentation on WebSockets, which can be used in Next.js for real-time communication. | websockets real-time nextjs |
WebRTC API Reference MDN documentation on WebRTC, which can be used in Next.js for peer-to-peer communication. | webrtc peer-to-peer nextjs |
SEO
SEO Best Practices for Next.js Applications Guide on implementing SEO best practices in Next.js applications. | seo optimization nextjs |
React Helmet for SEO Management Library for managing document head tags for better SEO in Next.js applications. | seo react-helmet nextjs |
Payment
Integrating Payment Processing in Next.js Apps (Stripe) Guide on integrating Stripe payment processing in Next.js applications. | stripe payment-processing nextjs |
Serverless
Serverless Functions in Next.js Applications Guide on implementing and using serverless functions in Next.js applications. | serverless functions nextjs |
Middleware
Next.js Middleware Guide Documentation on using middleware in Next.js for request and response manipulation. | middleware request-handling nextjs |
Data Visualization
Building a Dashboard with Next.js and ChartJS Tutorial on creating a dashboard using Next.js and ChartJS for data visualization. | dashboard chartjs nextjs |
Recharts Documentation Composable charting library built on React components, suitable for Next.js applications. | charts recharts nextjs |
Victory Charts Documentation React.js components for modular charting and data visualization in Next.js projects. | charts victory nextjs |
D3 Documentation Powerful data visualization library that can be used with React and Next.js. | data-visualization d3 nextjs |
Chartist Documentation Simple responsive charts library that can be integrated with Next.js applications. | charts chartist nextjs |
Visx Documentation Collection of reusable low-level visualization components for React and Next.js. | data-visualization visx nextjs |
Analytics
Integrating Google Analytics into a Next.js App Guide on implementing Google Analytics tracking in Next.js applications. | google-analytics tracking nextjs |
Next.js Performance Analytics Vercel's analytics tool for monitoring Next.js application performance. | performance analytics nextjs |
Configuration
Using Environment Variables in Next.js Applications Documentation on working with environment variables in Next.js applications. | environment-variables configuration nextjs |
PWA
Building Progressive Web Apps (PWAs) with Next.js Guide on creating Progressive Web Apps using Next.js and service workers. | pwa service-workers nextjs |
Service Workers API Reference MDN documentation on Service Workers, essential for creating Progressive Web Apps with Next.js. | service-workers pwa nextjs |
Database
Building a Notes App with Next.js and MongoDB Atlas Guide on creating a notes application using Next.js with MongoDB Atlas as the database. | mongodb atlas nextjs |
Forms
React Hook Form for Forms Library for efficient form handling in React and Next.js applications. | forms react-hook-form nextjs |
Formik for Forms Popular form library for React and Next.js applications with built-in validation. | forms formik nextjs |
Development Tools
Storybook for UI Components Tool for developing and showcasing UI components in isolation for Next.js projects. | ui-components storybook nextjs |
Animation
React Spring for Animations Spring-physics based animation library for React and Next.js applications. | animation react-spring nextjs |
Framer Motion for Animations Production-ready motion library for React and Next.js applications. | animation framer-motion nextjs |
Lottie for Animations Library for adding high-quality animations to Next.js applications. | animation lottie nextjs |
UI
React Icons for Icons Icon library providing popular icon packs as React components for Next.js projects. | icons react-icons nextjs |
Chakra UI Documentation A simple, modular, and accessible component library for React and Next.js applications. | ui-library chakra-ui nextjs |
Material UI Documentation Popular React UI framework implementing Google's Material Design, usable with Next.js. | ui-library material-ui nextjs |
Ant Design Documentation A design system with a set of high-quality React components, suitable for Next.js projects. | ui-library ant-design nextjs |
Bootstrap Documentation Popular CSS framework that can be integrated with Next.js applications. | css-framework bootstrap nextjs |
Tailwind UI Documentation Collection of prebuilt components and templates using Tailwind CSS, compatible with Next.js. | ui-components tailwind-ui nextjs |
Headless UI Documentation Completely unstyled, fully accessible UI components for React and Next.js applications. | ui-components headless-ui nextjs |
Radix UI Documentation Low-level UI component library for building high-quality, accessible design systems in Next.js. | ui-components radix-ui nextjs |
Networking
Axios for HTTP Requests Promise-based HTTP client for making API requests in Next.js applications. | http-requests axios nextjs |
Fetch API Reference MDN documentation on the Fetch API, commonly used in Next.js for making HTTP requests. | fetch-api http-requests nextjs |
Design
Figma to Code Plugins Tools for converting Figma designs to Next.js code. | figma design-to-code nextjs |
Graphics
Three JS Documentation 3D library that can be used to create 3D graphics in Next.js applications. | 3d-graphics threejs nextjs |
PixiJS Documentation 2D WebGL renderer that can be integrated with Next.js for creating interactive graphics. | 2d-graphics pixijs nextjs |
Accessibility
Web Accessibility Guidelines W3C Web Content Accessibility Guidelines, essential for creating accessible Next.js applications. | accessibility wcag nextjs |
Community
Next.js GitHub Discussions Official GitHub Discussions for Next.js, great for community support and discussions. | community discussions nextjs |
Next.js Discord Community Official Next.js Discord server for real-time discussions and help. | community discord nextjs |
Next.js on Stack Overflow Questions and answers related to Next.js on Stack Overflow. | stack-overflow questions nextjs |
Newsletter
Next.js Weekly Weekly newsletter featuring Next.js news, articles, and resources. | newsletter updates nextjs |
Conference
Next.js Conf Videos Recordings of talks from Next.js conferences, offering insights and best practices. | conference talks nextjs |
Examples
Next.js Examples Repository Official repository containing various Next.js example projects. | examples projects nextjs |
Plugins
Next.js Plugins Official and community-created plugins to extend Next.js functionality. | plugins extensions nextjs |
Enhance Your Coding Journey with AskCodi
Explore how AI can complement these resources and accelerate your learning in Next JS and beyond.
🚀Accelerate your coding with AI assistance
🌐Support for 65+ programming languages
🧠Learn from AI-powered code explanations