[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/next-js.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Next.js **repo:** [unicodeveloper/awesome-nextjs](https://github.com/unicodeveloper/awesome-nextjs) **category:** [[front-end-development|Front-End Development]] **related:** [[react|React]] · [[node-js|Node.js]] · [[redux|Redux]] · [[relay|Relay]] --- # Awesome Next.js [ [<img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1524776764/next-jslogo.svg" align="right" width="250">](https://github.com/vercel/next.js) > Curated list of resources: books, videos, articles about using Next.js. [Next.js](https://github.com/vercel/next.js): The React Framework. _List inspired by the [awesome](https://github.com/sindresorhus/awesome) list thing. You might also like [awesome-tdd](https://github.com/unicodeveloper/awesome-tdd)._ ## Contents - [Awesome Next.js ](#[awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome)-nextjs--) - [Contents](#contents) - [Community](#community) - [Essentials](#essentials) - [Articles](#articles) - [Boilerplates](#boilerplates) - [Extensions](#extensions) - [Apps](#apps) - [Books](#books) - [Videos](#videos) - [Projects(Beginner level)](#projectsbeginner-level) - [Newsletters](#newsletters) - [Contributing](#contributing) - [License](#license) ## Community - [GitHub](https://github.com/vercel/next.js) - [GitHub discussions for Next.js](https://github.com/vercel/next.js/discussions) - [Vercel Community](https://vercel.community/) ## Essentials - [Blog](https://nextjs.org/blog) - [Learn](https://nextjs.org/learn) - [Vercel TV](https://vercel.com/tv) - [Bulletproof Next](https://getstarted.sh/bulletproof-next) ## Articles - [Instant Site Updates with On-Demand Revalidation and Directus](https://echobind.com/post/instant-site-updates-with-on-demand-revalidation-and-directus) - [Dynamic CMS-driven Redirects with Next.js](https://echobind.com/post/dynamic-cms-driven-redirects) - [Implementing RBAC Authorization in Next.js - Step-by-Step Guide](https://www.permit.io/blog/how-to-add-rbac-in-nextjs) - [Getting Started with Next.js, [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) and [React](/@harrisonqian/awesome/wiki/front-end-development/react) Query](https://echobind.com/post/getting-started-with-nextjs-graphl-and-react-query) - [Using Next.js with FaunaDB: How to Query the [Database](/@harrisonqian/awesome/wiki/databases/database) from Your App](https://snipcart.com/blog/nextjs-faunadb) - [How to Build a Serverless Next.js Blog with ButterCMS](https://buttercms.com/blog/next-js-cms-tutorial) - [Build a Universal [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) App with Next.js](https://auth0.com/blog/building-universal-[apps](/@harrisonqian/awesome/wiki/platforms/apps)-with-nextjs) - [Getting Started with Next.js — Setting Up Your App](https://labs.redantler.com/getting-started-with-next-js-article-one-a1d9780ea9e0#.863nl4wnq) - [Getting Started with Next.js — Bringing Data In](https://labs.redantler.com/getting-started-with-next-js-bringing-data-in-bf40558698e2#.twjv5xk5w) - [How to build a Next.js [React](/@harrisonqian/awesome/wiki/front-end-development/react) Universal App](https://medium.com/cosmicjs/how-to-build-a-next-js-react-universal-app-e610a0bc2124#.b8ayt9f39) - [Next on Next.js](https://web.archive.org/web/20170202170122if_/https://jsmantra.com/next-on-next-js-1a134505f346#.bhihzecyc) - [Accept payments on your site with nextjs, stripe, and micro](https://hackernoon.com/accept-payments-on-your-site-with-nextjs-stripe-and-micro-371de95b22d5?source=activity---post_recommended) - [Next.js on Cloud Functions for [Firebase](/@harrisonqian/awesome/wiki/platforms/firebase) with Firebase Hosting](https://medium.com/@jthegedus/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2) - [Building a Blog With Next.js](https://timber.io/blog/building-a-blog-with-next-js) - [Using Google [Analytics](/@harrisonqian/awesome/wiki/miscellaneous/analytics) with Next.js](https://malloc.fi/using-google-analytics-with-next-js) - [Build a Universal [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) App with Next.js and [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux) _[Russian]_](https://habrahabr.ru/post/323588/) - [5 (of the Many Reasons) to love Vercel's Next.js](https://www.codementor.io/tgreco/5-of-the-many-things-to-love-about-zeit-s-next-js-bpszu99g1) - [Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones](https://nextjs.org/blog/next-5) - [Realtime [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) using Next.js and Chart.js](https://pusher.com/tutorials/realtime-data-visualization-nextjs) - [Build a chat app with sentiment analysis using Next.js](https://pusher.com/tutorials/chat-sentiment-analysis-nextjs) - [Build a realtime table with Next.js](https://pusher.com/tutorials/realtime-tables-nextjs) - [SSR blog with Next.js and Prismic.io](https://www.garymeehan.ie/blog/server-side-rendered-blog-with-nextjs-and-prismic) - [SEO in Next.js and Prismic](https://www.garymeehan.ie/blog/handling-seo-with-nextjs-and-prismic) - [SEO in Next.js with next-seo](https://www.garymeehan.ie/blog/seo-in-nextjs-with-next-seo) - [Next.js 7](https://nextjs.org/blog/next-7) - [Create SSR Next.js websites using [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) with Postgres](https://blog.hasura.io/create-next-js-sites-using-graphql-on-postgres-199224ad1a39) - [Cooking a Deliveroo clone with Next.js (React), [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), Strapi and Stripe - Setup (part 1/7)](https://blog.strapi.io/strapi-next-setup) - [Next.js E-commerce Tutorial: Quick Shopping Cart Integration](https://snipcart.com/blog/next-js-ecommerce-tutorial) - [Working with Ghost and Next.js](https://ghost.org/docs/api/nextjs/) - [Using [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) with Next.js](https://statickit.com/guides/next-js-tailwind) - [Using Feature Flags in Next.js](https://medium.com/frontend-digest/using-feature-flags-in-next-js-c5c8d0795a2?source=friends_link&sk=d846a29f376acf9cfa41e926883923ab) - [Adding code snippets to Next.js using [react](/@harrisonqian/awesome/wiki/front-end-development/react)-syntax-highlighter](https://thetombomb.com/posts/adding-code-snippets-to-static-[markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown)-in-Next%20js) - [Build company's Website/App with our astonishing Next.js template](https://www.wrappixel.com/templates/category/nextjs-templates/?ref=232) - [Guaranteeing webhook delivery in NextJS Application](https://www.bharathvaj.me/blog/implement-webhook-nextjs) - [Building a Guestbook Using Next.js On-Demand ISR](https://www.svix.com/blog/vercel-on-demand-isr-and-svix/) - [Useful Admin Templates to build your Website/App](https://adminmart.com/templates/nextjs/?ref=6) - [Integrate Next app with Tailwind](https://tailwind-elements.com/docs/standard/integrations/next-integration/) - [Top Next.js Admin & Dashboard Templates](https://blog.codedthemes.com/nextjs-admin-dashboard-templates/) - [Next.js Cheatsheet](https://blog.codedthemes.com/nextjs-cheatsheet/) - [A Guide to Performance Optimization with Next.js](https://www.debugbear.com/blog/nextjs-performance) ## Boilerplates - [Kaiforge Lite](https://github.com/DevxiaLabs/kaiforge-lite) - Free admin dashboard template with Next.js 14, [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css), TypeScript, dark/light mode, and 5 ready-to-use pages. MIT licensed. [Demo](https://lite.kaiforge.dev) - [Kaminari Template](https://kaminari.vercel.app/) - Power packed Next.js and [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) template. Built with developer experience in mind. Contains Husky, CommitLint, Prettier, [Eslint](/@harrisonqian/awesome/wiki/programming-languages/eslint) etc. configs. ✨ - [Next.js, Strapi Portfolio Starter](https://github.com/PictureElement/nextjs-strapi-portfolio-starter) – ⚡️ A modern portfolio starter with Next.js, Strapi, and [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css), featuring automated XML sitemap, [JSON](/@harrisonqian/awesome/wiki/miscellaneous/json)-LD schemas, OpenGraph metadata, and a contact form with spam protection. - [Next.js Static Blog](https://www.cosmicjs.com/apps/nextjs-static-blog) - Next.js static blog powered by the Cosmic Headless CMS - [NextJS Headless CMS Powered Blog Starter](https://github.com/ButterCMS/react-cms-blog-with-next-js) - [Next.js App with AWS Lambda](https://github.com/mattdamon108/nextjs-with-lambda) - Deploy a Next.js App to AWS Lambda using Apex Up. - [Nitro 🚀](https://github.com/williamluke4/nitro) - An Example of a PWA using Nextjs, [Material-UI](/@harrisonqian/awesome/wiki/front-end-development/material-ui), Typescript and Auth0 💗 - [Next & Now 2.0 Typescript template](https://github.com/alepacheco/landing-template) - Serverless, Typescript, Jest, [Github](/@harrisonqian/awesome/wiki/development-environment/github) CI, SCSS, prettier boilerplate - [Next Right Now](https://github.com/UnlyEd/next-right-now) - Flexible **production-grade boilerplate** with Next.js 9 and Vercel, with pre-configured Sentry, cookies, Amplitude, Emotion, FontAwesome, [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql)/GraphCMS (Apollo), Bootstrap (Reactstrap), i18next (Locize), Jest, Cypress (E2E tests) and CI/CD (GH Actions), with full TypeScript support and **support for B2B multi-tenants web [apps](/@harrisonqian/awesome/wiki/platforms/apps) (monorepo)** - [Next [Graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql) Apollo Typescript_Boostrap - Pobocha](https://github.com/Sebastp/Next-[react](/@harrisonqian/awesome/wiki/front-end-development/react)-graphql-apollo_Boostrap) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) + GraphQL + Next.js + Apollo + Scss + Typescript + Prettier & [EsLint](/@harrisonqian/awesome/wiki/programming-languages/eslint) boilerplate - [Next & Vercel Typescript template](https://github.com/alepacheco/landing-template) - Serverless, Typescript, Jest, [Github](/@harrisonqian/awesome/wiki/development-environment/github) CI, SCSS, prettier boilerplate - [NextJS in [Firebase](/@harrisonqian/awesome/wiki/platforms/firebase) with Bootstrap](https://github.com/ananddayalan/nextjs-in-firebase-with-bootstrap) - Hosting NextJS app with Bootstrap in [Firebase](/@harrisonqian/awesome/wiki/platforms/firebase) with Cloud Functions. - [Next Simple Starter](https://github.com/ooade/NextSimpleStarter) - Simple PWA boilerplate with Next.js and [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux). - [NextJS Starter](https://github.com/iaincollins/nextjs-starter) - Starter project for Next.js with and email and oAuth authentication. - [nextjs-starter](https://github.com/pbteja1998/nextjs-starter) - An SEO Optimized Next.js 10 starter kit template with [React](/@harrisonqian/awesome/wiki/front-end-development/react) 17 + Typescript + [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) 2 + React Query 3 + (GitHub Auth + Passwordless Auth) using (NextAuth.js and Fauna DB), [ESLint](/@harrisonqian/awesome/wiki/programming-languages/eslint), Prettier, Pre-commit hook with Husky. Can have different layouts for different pages. - [RAN!](https://github.com/sly777/ran) - Production-ready boilerplate with support for [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), SSR, Hot-reload, CSS-in-JS, caching, and more. - [Next Simple Blog](https://github.com/tscanlin/next-blog) - Simple [Markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) based blog built with Next.js with static exports. - [phox](https://github.com/herschel666/phox) - Create a static photo blog. - [Next Express Bootstrap Boilerplate](https://github.com/MustansirZia/next-express-bootstrap-boilerplate) - Boilerplate for a full stack app built using Next, Express, [react](/@harrisonqian/awesome/wiki/front-end-development/react)-bootstrap, SCSS and SSR with [eslint](/@harrisonqian/awesome/wiki/programming-languages/eslint). - [Next Blog Firestore](https://github.com/suevalov/next-blog-firestore) - Blog with simple CMS built with Next.js, [Firebase](/@harrisonqian/awesome/wiki/platforms/firebase) Firestore, styled-components and mobx-state-tree. - [Next [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux) Starter](https://github.com/CodementorIO/nextjs-redux-starter) - Next.js starter with Express, [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux), and [PostCSS](/@harrisonqian/awesome/wiki/front-end-development/postcss). - [NextJS [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux)-Wrapper Material-UI](https://github.com/joaopaulomoraes/nextjs-with-redux-and-material-ui) - 🤓 A boilerplate NextJS with Redux and Material UI. - [Staart](https://github.com/nmaro/staart) - 😎 Actively maintained Next.js components library _and_ minimal boilerplate to rapidly get staarted with app with working user accounts based on Ooth. - [NextJS TypeScript Starter Kit](https://github.com/deptno/next.js-typescript-starter-kit) - :tada: TypeScript + NextJS, Styled-jsx, [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux), [PostCSS](/@harrisonqian/awesome/wiki/front-end-development/postcss), configurable SEO - [Next Boilerplate](https://arefaslani.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/next-boilerplate) - External CSS and [Sass](/@harrisonqian/awesome/wiki/front-end-development/sass) + Importing images from anywhere + Prettier and [Eslint](/@harrisonqian/awesome/wiki/programming-languages/eslint) + Environment variables and many more features. - [next-starter](https://github.com/YuriBrunetto/next-starter) - A full and simple boilerplate with `[sass](/@harrisonqian/awesome/wiki/front-end-development/sass) (.scss)` and `[postcss](/@harrisonqian/awesome/wiki/front-end-development/postcss)`built in. - [Typescript Monorepo Next Example](https://github.com/deptno/typescript-monorepo-next-example) - A minimalistic next.js + typescript monorepo. - [tomimick/tm-nextjs-starter](https://github.com/tomimick/tm-nextjs-starter) - A minimal starter/demo with basic CRUD, axios/localstorage, MobX, [SASS](/@harrisonqian/awesome/wiki/front-end-development/sass), static site export, live demo - [csprance/next-smrt](https://github.com/csprance/next-smrt) - A minimal boilerplate with [redux](/@harrisonqian/awesome/wiki/front-end-development/redux), styled-components, [material-ui](/@harrisonqian/awesome/wiki/front-end-development/material-ui) and typescript with a custom express server. - [Nextron](https://github.com/saltyshiomix/nextron) - An [Electron](/@harrisonqian/awesome/wiki/platforms/electron) with Next.js [apps](/@harrisonqian/awesome/wiki/platforms/apps) generator ⚡ - [next-boilerplate](https://github.com/pankod/next-boilerplate) - A well-structured production ready Next.js boilerplate with Typescript, [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux), Express.js, [Sass](/@harrisonqian/awesome/wiki/front-end-development/sass), Css, EnvConfig, Reverse Proxy, Bundle - [Oh My Fullstack](https://github.com/oh-my-c0de/oh-my-fullstack) - Full stack web application skeleton (Next.js, [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux), RxJS, Immutable, Express) - [Next-Postgres-With-Typescript](https://github.com/brandontle/next-postgres-with-typescript) - Forum-like fullstack web app with Next 7.0.2 + Sequelize 4/Postgres + Typescript + [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux) + Passport Local Auth + Emotion - [Next.js with Express and Babel](https://github.com/pd-smith/next-express-babel) - An application skeleton for those who want to transpile their Express as well as their Next.js code using Babel. - [next-postgres-graphql](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-postgres-graphql) - Create SSR Next.js websites using [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) with Postgres (Next.js, Postgres, GraphQL) - [nextjs-[mongodb](/@harrisonqian/awesome/wiki/databases/mongodb)-app](https://github.com/hoangvvo/nextjs-mongodb-app) - Full-fledged app made with Next.JS and [MongoDB](/@harrisonqian/awesome/wiki/databases/mongodb), with authentication and much more (Next.js 9, MongoDB) - [react-next-boilerplate](https://github.com/react-next-boilerplate/react-next-boilerplate) - :rocket: A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community. - [The-Nextjs-starter](https://github.com/novellito/the-nextjs-starter) - typescript + [redux](/@harrisonqian/awesome/wiki/front-end-development/redux) + styled-components + [react](/@harrisonqian/awesome/wiki/front-end-development/react)-[testing](/@harrisonqian/awesome/wiki/testing/testing)-library + [eslint](/@harrisonqian/awesome/wiki/programming-languages/eslint) + fontawesome - [The Knests Stack](https://github.com/tudorconstantin/knests/) - Full stack boilerplate/[hackathon](/@harrisonqian/awesome/wiki/learn/hackathon) starter with: [PostgreSQL](/@harrisonqian/awesome/wiki/databases/postgresql), Knex.js, NestJS, Next.js (obviously), [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), [React](/@harrisonqian/awesome/wiki/front-end-development/react) (with hooks and typescript), [Material-UI](/@harrisonqian/awesome/wiki/front-end-development/material-ui), [Docker](/@harrisonqian/awesome/wiki/back-end-development/docker) multistage images for, [Docker](/@harrisonqian/awesome/wiki/back-end-development/docker) compose and a Gitlab CI/CD pipeline fully configured. - [Devii](https://github.com/vriad/devii) - A Medium-inspired dev blog starter built with Next.js, [React](/@harrisonqian/awesome/wiki/front-end-development/react), and TypeScript, with [Markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) rendering, syntax highlighting, SEO/meta tags, and RSS feed generation out of the box. - [Nextjs Blog Starter](https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/) - 🚀 The perfect starter code for your blog based on Next.js framework. ⚡️ Made with Next.js, TypeScript, [ESLint](/@harrisonqian/awesome/wiki/programming-languages/eslint), Prettier, [PostCSS](/@harrisonqian/awesome/wiki/front-end-development/postcss), [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css). - [Next.js and Netlify Blogging Template](https://github.com/wutali/nextjs-netlify-blog-template) - A perfect boilerplate for building a blog website on Netlify [stacks](/@harrisonqian/awesome/wiki/miscellaneous/stacks) with standard features like tagging, CMS, and shortcodes. - [Nextjs Apollo Nexus](https://github.com/inblack67/GraphQL-Next-Setup) - [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) Apollo Client-Server [integration](/@harrisonqian/awesome/wiki/platforms/integration) in Next.js with Nexus Schema (Code first approach). - [Nextjs Starter Peacock](https://github.com/vickOnRails/next-starter-peacock) - 🦚 Beautiful Nextjs portfolio starter for software engineers and designers to show work they're so proud of. - [Nextatic](https://github.com/tancredi/nextatic) - 🌍 Static website multi-language boilerplate with user-editable pages and navigation using Netlify CMS + Next.js + SCSS + Typescript. - [Sitemap generator for NextJS & StrAPI](https://github.com/stovv/next-strapi-sitemap) - 🦾 An additional server on express that runs alongside nextjs and regenerates sitemap ( with index sitemap ) and robots.txt files on request from STR API. - [superplate](https://github.com/pankod/superplate) - superplate creates Next.js app in seconds with TypeScript, styled-components, SWR, [Storybook](/@harrisonqian/awesome/wiki/front-end-development/storybook), and 35+ plugin. - [Hydrogen](https://statichunt.com/themes/nextjs-hydrogen) - [Hydrogen](/@harrisonqian/awesome/wiki/front-end-development/hydrogen) is a Nextjs blog starter template build with tailwindCss and MDX supports. It has all necessary MDX shortcodes out of the box. - [Next-Fire-Auth](https://github.com/hrushikedar33/next-fire-auth) - A [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) boilerplate for startup application with authentication using Next.js + Typescript + [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) + [Firebase](/@harrisonqian/awesome/wiki/platforms/firebase)-auth + [React](/@harrisonqian/awesome/wiki/front-end-development/react)-Firebase-Hooks - [NextJS Chargebee Subscription](https://github.com/bharathvaj-ganesan/chargebee-saas-stack) - A Chargebee focused T3 Stack that integrates User Subscriptions, Authentication and [Testing](/@harrisonqian/awesome/wiki/testing/testing). Driven by [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma) ORM. - [Next.js Enterprise](https://github.com/Blazity/next-enterprise) - enterprise-grade boilerplate for high-performance, maintainable [apps](/@harrisonqian/awesome/wiki/platforms/apps). Built with [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css), RadixUI, TypeScript and more. - [Start UI [web]](https://github.com/BearStudio/start-ui-web) - 🚀 opinionated UI starter with TypeScript, [React](/@harrisonqian/awesome/wiki/front-end-development/react), NextJS, Chakra UI, tRPC, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma), TanStack Query, [Storybook](/@harrisonqian/awesome/wiki/front-end-development/storybook), [Playwright](/@harrisonqian/awesome/wiki/testing/playwright), Formiz - [Kaiforge Lite](https://github.com/DevxiaLabs/kaiforge-lite) - Free and open-source Next.js admin dashboard template with [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css), dark mode, and multiple color themes. - [A11y Starter Kit](https://github.com/thefrontkit/a11y-starter-kit-code) - Accessibility-first Next.js starter kit with best practices for building inclusive web [apps](/@harrisonqian/awesome/wiki/platforms/apps). Demo: https://a11y-starter-kit.vercel.app/ ## Extensions - [Next universal language detector](https://github.com/UnlyEd/universal-language-detector) - Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js [DEMO](https://universal-language-detector.now.sh/) - [Next Routes](https://github.com/fridays/next-routes) - Universal named routes for Next.js. - [Next-Pkg](https://github.com/onready/next-pkg) - Extended Next.js server with [pkg](https://github.com/vercel/pkg) support. - [Next Plugin Graphql](https://github.com/lfades/next-plugin-graphql) - Next.js plugin for .[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql) and .gql files using graphql-tag - [Next With Apollo](https://github.com/lfades/next-with-apollo) - Apollo [Graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql) [integration](/@harrisonqian/awesome/wiki/platforms/integration) for Next.js - [Next SEO](https://github.com/garmeeh/next-seo) - SEO made easy for Next.js - [Next-Sitemap](https://github.com/iamvishnusankar/next-sitemap) - Sitemap generator for Next.js - [Next UserAgent](https://github.com/tokuda109/next-useragent) - UserAgent parser for Next.js - [Next Cookie](https://github.com/tokuda109/next-cookie) - Cookie serializer and deserializer library for Next.js. - [Nextein](https://github.com/elmasse/nextein) - A static site generator based in Next.js. - [next-mdx-blog](https://github.com/hipstersmoothie/next-mdx-blog) - Easily add a blog to any next.js based project - [next-i18next](https://github.com/isaachinman/next-i18next) - The easiest way to translate your NextJs [apps](/@harrisonqian/awesome/wiki/platforms/apps). - [next-routes-middleware](https://github.com/revskill10/next-routes-middleware) - A NextJS routing middleware - [Serverless Framework plugin for Next.js](https://github.com/danielcondemarin/serverless-nextjs-plugin) - Deploy serverless applications with ease. - [Terraform For Next.js](https://github.com/ematipico/terraform-nextjs-plugin) - Deploy your application using [Terraform](/@harrisonqian/awesome/wiki/back-end-development/terraform) - [next-session](https://github.com/hoangvvo/next-session) - Session middleware for Next.js - [next-iron-session](https://github.com/vvo/next-iron-session) - Next.js stateless session utility using signed and encrypted cookies to store data - [Next PurgeCSS](https://github.com/lucleray/next-purgecss) - Easily integrate [Purgecss](https://www.purgecss.com/), which helps you remove unused CSS from your bundle. - [Next PWA](https://github.com/shadowwalker/next-pwa) - Zero config PWA plugin for Next.js with workbox - [flow-middleware](https://github.com/piglovesyou/flow-middleware) - Run any of Express middlewares on Next.js without polluting native objects. - [next-connect](https://github.com/hoangvvo/next-connect) - The Express/Connect-compatible router and middleware layer for Next.js. - [next-img](https://github.com/humaans/next-img/) - a plugin for embedding optimized images with ease. - [next-auth](https://github.com/iaincollins/next-auth) - Easy authentication for Next.js and Serverless - [next-deploy](https://github.com/lone-cloud/next-deploy) - 🚀 Effortless deployment to AWS and [GitHub](/@harrisonqian/awesome/wiki/development-environment/github) Pages. - [next-joi](https://github.com/codecoolture/next-joi) - Validate Next.js API Routes, with _joi_. - [next-transpile-modules](https://github.com/martpie/next-transpile-modules) - Next.js plugin to transpile code from node_modules. Useful for monorepos. - [Destack for Next.js](https://github.com/liveduo/destack) - Next.js extension to visually build landing pages locally. - [UseSIWE](https://github.com/random-bits-studio/use-siwe) - [React hooks](/@harrisonqian/awesome/wiki/front-end-development/react-hooks) and Next.js API routes that make it super easy to add Sign-In with [Ethereum](/@harrisonqian/awesome/wiki/decentralized-systems/ethereum) to your app. - [Runtime Environment Variables for Next.js](https://www.npmjs.com/package/@cuww/runtime-env) – Stop configuring ENV variables in CI/CD, use a cloud-native approach. - [next-google-tag-manager](https://github.com/XD2Sketch/next-google-tag-manager) – Easily add Google Tag Manager to Next 13 and up. - [modal-layout-component](https://github.com/ArtemZhyto/Modal-layout-component) - Lightweight and accessible headless modal layout for Next.js with focus trapping. - [next-api-decorators](https://github.com/storyofams/next-api-decorators) - Decorators to create typed Next.js API routes, with easy request validation and transformation. - [Vercel AI SDK](https://github.com/vercel/ai) - The AI Toolkit for TypeScript. Build AI-powered applications with [React](/@harrisonqian/awesome/wiki/front-end-development/react), Next.js, Vue, [Svelte](/@harrisonqian/awesome/wiki/front-end-development/svelte), and [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js). - [CopilotKit](https://github.com/CopilotKit/CopilotKit) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) UI + elegant infrastructure for AI Copilots, AI chatbots, and in-app AI agents in your Next.js [apps](/@harrisonqian/awesome/wiki/platforms/apps). - [ogimg.xyz](https://ogimg.xyz) - OG image generation API with 10 templates, background patterns, and URL auto-fetch. Built with Next.js + Satori on Vercel Edge. - [ShotOG](https://github.com/nicepkg/shotog) - Dynamic OG image generation API for Next.js [apps](/@harrisonqian/awesome/wiki/platforms/apps), powered by [Cloudflare](/@harrisonqian/awesome/wiki/platforms/cloudflare) Workers. - [Frontman](https://github.com/frontman-ai/frontman) - An open-source AI coding agent that lives in your browser, enabling visual element selection and plain-English code edits with hot reload. - [@farming-labs/docs](https://github.com/farming-labs/docs) - A modern documentation framework that works. One config file, zero boilerplate. ## Apps - [API Status Check](https://apistatuscheck.com) - Real-time status monitoring dashboard tracking 2,500+ APIs and cloud services. Built with Next.js and deployed on Vercel. - [DevToolKit](https://github.com/a827681306/devtoolkit) - Free online developer tools built with Next.js — [JSON](/@harrisonqian/awesome/wiki/miscellaneous/json) Formatter, JWT Decoder, [Regex](/@harrisonqian/awesome/wiki/miscellaneous/regex) Tester, Base64/URL Encoder, Hash Generator. - [CourseLit](https://github.com/codelit/courselit) - An open source alternative to Thinkific, Teachable etc. - [FIM Agent](https://github.com/fim-ai/fim-agent) - AI-powered Connector Hub with a Next.js + shadcn/ui portal frontend. Features agent management, connector configuration, knowledge base, and real-time chat with SSE [streaming](/@harrisonqian/awesome/wiki/big-data/streaming). - [FastUtil](https://fastutil.app) - 71+ free browser-based developer utilities with client-side processing, 20 language [translations](/@harrisonqian/awesome/wiki/miscellaneous/translations), and no sign-up required. Built with Next.js App Router and shadcn/ui. - [Feednext](https://github.com/feednext/feednext) - An open source social media application. - [NextJS GOT](https://github.com/auth0-blog/nextjs-got) - Simple Next.js application that showcases Game of Thrones Characters. - [Relate](https://github.com/RelateNow/relate) - Mindfulness community - [React](/@harrisonqian/awesome/wiki/front-end-development/react), [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), Next.js. - [Password](https://github.com/dotcypress/password) - One password, right way. - [Next Todos](https://github.com/lipp/next-todos) - Todo list written in Next.js. - [Hacker News](https://github.com/lipp/hackernews) - Another Hacker News written in Next.js. - [Jet Chat](https://github.com/lipp/jet-chat) - Jet and Next.js powered Chat demo. - [Nextgram](https://github.com/arunoda/nextgram) - Sample Next.js v2 app for showing off its capabilities. - [Rauchg Blog](https://github.com/rauchg/blog) - Blog built by a Next.js [core](/@harrisonqian/awesome/wiki/platforms/core) maintainer. - [Next JPH](https://github.com/renatorib/next-jph) - JsonPlaceholder sample app made with Next.js. - [Mailto](https://github.com/dawsbot/mailto) - HTML mailto's made easy. - [Plate](https://github.com/knipferrc/plate) - The task management app to rule them all. - [Dashboard](https://github.com/danielbayerlein/dashboard) - Create your own team dashboard with custom widgets. - [Snape](https://github.com/ritz078/snape) - A torrent client to search, stream and download torrents. - [Trello Resume](https://github.com/juliandavidmr/TrelloResume) - Converts trello data into fast read information. - [Server Authentication with JWT](https://github.com/estrada9166/server-authentication-next.js) - Server authentication, prevent render before validation. - [Alexander Kachkaev’s website](https://gitlab.com/kachkaev/website-frontend/) – personal homepage built with Next.js, [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), [Docker](/@harrisonqian/awesome/wiki/back-end-development/docker) and [Kubernetes](/@harrisonqian/awesome/wiki/back-end-development/kubernetes). Uses apollo client, [react](/@harrisonqian/awesome/wiki/front-end-development/react)-intl, styled-components and recompose. Docker images are automatically built by GitLab CI. - [Cookie handler with server render](https://github.com/estrada9166/cookie-handler-next.js) - Cookie handler with server render, access the cookie before render. - [Gank](https://github.com/OrangeXC/gank) - A Next.js App use gank-api, mobx and antd - [Decoupled CMS example with [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) and Next.js](https://github.com/janit/decoupled-cms-nextjs-graphql) - [Mozilla VR Home](https://vr.mozilla.org/) - Mozilla VR Home - [Elton John's website](https://www.eltonjohn.com) - Elton John's Website - [IOTA's Data Market Place](https://data.iota.org/) - IOTA Market Place - [magicleap.com](https://www.magicleap.com/) - Magic Leap - [NPM.js Search Page](https://www.npmjs.com/search) - NPM's Search Page - [Docker Success Center](https://success.[docker](/@harrisonqian/awesome/wiki/back-end-development/docker).com) - Docker Success Center - [Urteile & Gesetze](https://github.com/neo-search/urteile-gesetze-web) - German Legal Information System licensed under GPLv3. - [TikTok's HomePage](https://www.tiktok.com/) - TikTok's Home Page - [njt.now.sh](https://njt.now.sh) - npm jump to 🐸 (package navigation shortcuts you dreamed about). Partially statically-rendered, partially deployed as lambda. Automatically updated on each commit to the [github repo](https://github.com/kachkaev/njt), thanks to Now [integration](/@harrisonqian/awesome/wiki/platforms/integration). - [caseconverter.pro](https://caseconverter.pro) - A text case converter. - [Tottem](https://github.com/poulainv/tottem) - Bookmark manager on steroid built with NextJs / Auth0 / Apollo Tools / Prisma2 - [Slow TV Map](https://slowtvmap.com) - A fun way to discover relaxing virtual experiences. Next.js + Chakra UI + [MySQL](/@harrisonqian/awesome/wiki/databases/mysql) hosted on Vercel. - [Twitter Clone](https://github.com/AlandSleman/t3-twitter-clone) - Twitter clone built with Next.js + T3 Stack + NextAuth + [Supabase](/@harrisonqian/awesome/wiki/databases/supabase) + [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma). - [Taxonomy](https://github.com/shadcn/taxonomy) - An example app built using Next.js 13 server components. - [shadcn/ui](https://github.com/shadcn/ui) - Beautifully designed components that you can copy and paste into your [apps](/@harrisonqian/awesome/wiki/platforms/apps). - [StorageBox](https://github.com/AlandSleman/StorageBox) - A Simple File Storage Service Built with Go and Next.js. - [Taskade](https://taskade.com/) - AI-powered workspace for teams with real-time collaboration, AI agents, project management, and workflow automation. ## Books - [Hands On Next.js](https://leanpub.com/hands-on-nextjs) - A practical fullstack book on universal (server) rendering for [react](/@harrisonqian/awesome/wiki/front-end-development/react) applications. - [Next.js Quick Start Guide](https://www.packtpub.com/web-development/nextjs-quick-start-guide) - Create, build and deploy universal [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) applications using Next.js - [The Next.js Handbook](https://flaviocopes.com/page/nextjs-handbook/) - Build a frontend [React](/@harrisonqian/awesome/wiki/front-end-development/react) application that transparently handles server-side rendering for you. - [Serverless Web Applications with [React](/@harrisonqian/awesome/wiki/front-end-development/react) and Next.js](https://www.amazon.com/dp/B0BHRPMF74) - Use Next.js serverless features to access databases and authenticate users in your React applications - [Cut Into The [Jamstack](/@harrisonqian/awesome/wiki/front-end-development/jamstack): Build a SaaS with [React](/@harrisonqian/awesome/wiki/front-end-development/react) and Next.js](https://www.cutintothejamstack.com/) - Build a full-stack software-as-a-service application using Next.js, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma) ORM, Cloudinary API, Chakra-UI and React Hook Form. - [Real World Next.js](https://www.amazon.com/Real-World-Next-js-high-performance-applications-production-ebook/dp/B08XY1MCV1?Adv-Srch-Books-Submit.x=0&Adv-Srch-Books-Submit.y=0&qid=1652828645&refinements=p_66:9781801079877&s=books&sr=1-1&unfiltered=1&linkCode=sl1&tag=misko0a-20&linkId=1039970a67ec37bfcaa25cf6c77a5591&language=en_US&ref_=as_li_ss_tl) - Build scalable, high-performance, and modern web applications using Next.js, the [React](/@harrisonqian/awesome/wiki/front-end-development/react) framework for production ## Videos - [Create your first ReactJS application with NextJS _[Spanish]_](https://www.youtube.com/watch?v=-7Ft5LxPeWs) - [React Server Side Rendering with NextJS](https://www.youtube.com/watch?v=JEBkh_vleTs&t) - [Guillermo Rauch - Next.js by Example](https://www.youtube.com/watch?v=DLGJfa3Xv-0) - [Guillermo Rauch - Next.js: Universal [React](/@harrisonqian/awesome/wiki/front-end-development/react) Made Easy and Simple](https://www.youtube.com/watch?v=evaMpdSiZKk) - [Introduction to Next.js](https://www.youtube.com/watch?v=Fnw3lNeH-XI) - [Next.js in production](https://www.youtube.com/watch?v=h6rETZH6Ym0) - [Parameterized Routing with Next.js](https://www.youtube.com/watch?v=2cJya4h5ync) - [JSHeroes 2017 | Guillermo Rauch - Static and Dynamic Next.js](https://www.youtube.com/watch?v=lLNJsuXB4CI) - [Programming the Universal Future with Next.js - Guillermo Rauch · JSConf China 2017](https://www.youtube.com/watch?v=w9Or7B4kTRY) - [BPJS: Special - Introduction to Next.js](https://www.youtube.com/watch?v=4cfozXTyjWQ) - [Next for Next.js](https://www.youtube.com/watch?v=ms2aOV06_qk) - [Data Management With Next.js and GraphQL](https://www.youtube.com/watch?v=g_LA1quUIi8) - [Next.js Register User](https://www.youtube.com/watch?v=oQ60Grn4RYQ) - [Next.js Crash Course - Server Side React](https://www.youtube.com/watch?v=IkOVe40Sy0U) - [Mastering Next.js](https://masteringnextjs.com/) - 50+ lesson video course for building applications with Next.js and [React](/@harrisonqian/awesome/wiki/front-end-development/react). - [Next.js Tutorial](https://www.youtube.com/watch?v=7J4iL1HDshQ&list=PLYSZyzpwBEWSQsrukurP09ksi49H9Yj40) - In depth Next.js [tutorials](/@harrisonqian/awesome/wiki/computer-science/tutorials). - [Next.js Conf 2020](https://www.youtube.com/playlist?list=PLBnKlKpPeagnT2Cmv4giCbosfrbKnuYTD) - All the videos from the 2020 Next.js conference - [Full-stack [food](/@harrisonqian/awesome/wiki/miscellaneous/food) ordering app with Hasura, Next.js, and Vercel](https://www.youtube.com/playlist?list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG) - [How to use Credentials Authentication in Next.js with NextAuth?](https://youtu.be/fqXC2V-MSV4) ## Projects(Beginner level) - [Full Stack Netflix Clone in [React](/@harrisonqian/awesome/wiki/front-end-development/react), [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css), Next.JS, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma), [MongoDB](/@harrisonqian/awesome/wiki/databases/mongodb), NextAuth & Vercel (2023)](https://youtu.be/mqUN4N2q4qY) - [Build and Deploy a Modern Next 13 Website With [Framer](/@harrisonqian/awesome/wiki/miscellaneous/framer) Motion & Tailwind CSS](https://youtu.be/ugCN_gynFYw) - [Next js 13 project - IMBb Clone - next js [tailwind css](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) project - nextjs project](https://youtu.be/OHEMPreO09Q) - [Next js 13 project - Google clone (next.js 13, [tailwind css](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) 3, google search api, app router](https://youtu.be/h9zlVmoUV5I) - [next js project - Twitter clone](https://youtu.be/PnvDPSg5bQM) - [Build and Deploy: TWITTER clone with [React](/@harrisonqian/awesome/wiki/front-end-development/react), Tailwind, Next, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma), Mongo, NextAuth & Vercel (2023)](https://youtu.be/ytkG7RT6SvU) - [NextJS 13 Tutorial: Create a Static Blog from [Markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) Files](https://youtu.be/Hiabp1GY8fA) - [Full Stack Airbnb Clone with Next.js 13 App Router: [React](/@harrisonqian/awesome/wiki/front-end-development/react), Tailwind, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma), [MongoDB](/@harrisonqian/awesome/wiki/databases/mongodb), NextAuth 2023](https://www.youtube.com/watch?v=c_-b_isI4vg&t=11529s) - [Real-Time Messenger Clone: Next.js 13, [React](/@harrisonqian/awesome/wiki/front-end-development/react), Tailwind, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma), [MongoDB](/@harrisonqian/awesome/wiki/databases/mongodb), NextAuth, Pusher (2023)](https://www.youtube.com/watch?v=PGPGcKBpAk8&t=1922s) - [Full Stack Spotify Clone: Next 13.4, [React](/@harrisonqian/awesome/wiki/front-end-development/react), Stripe, [Supabase](/@harrisonqian/awesome/wiki/databases/supabase), [PostgreSQL](/@harrisonqian/awesome/wiki/databases/postgresql), Tailwind (2023)](https://youtube.com/watch?v=2aeMRB8LL4o&t=4402s) - [Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, [React](/@harrisonqian/awesome/wiki/front-end-development/react), Tailwind, [Prisma](/@harrisonqian/awesome/wiki/miscellaneous/prisma), [MySQL](/@harrisonqian/awesome/wiki/databases/mysql), 2023](https://www.youtube.com/watch?v=5miHyP6lExg&t=1908s) ## Newsletters - [Next.js News](https://nextjsnews.com) - Monthly Next.js newsletter showcasing new and upcoming features, best articles, tools, and plugins. - [Next.js Notes](https://nextjsnotes.com) - Monthly Next.js and [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) platform news. ## Contributing Found an awesome package, article, blog, video etc.? Send me a pull request! Just follow the [guidelines](/CONTRIBUTING.md). Thank you! --- **Check out my [blog](https://goodheads.io) or say _hi_ on [Twitter](https://twitter.com/unicodeveloper).** ## License [](http://creativecommons.org/publicdomain/zero/1.0/)