49 KiB
49 KiB
Awesome Next.js !Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/awesome) ! (https://img.shields.io/badge/unicodeveloper-approved-brightgreen.svg)
(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-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 and React Query (https://echobind.com/post/getting-started-with-nextjs-graphl-and-react-query)
- Using Next.js with FaunaDB: How to Query the 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 App with Next.js (https://auth0.com/blog/building-universal-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 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 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 with Next.js (https://malloc.fi/using-google-analytics-with-next-js)
- Build a Universal JavaScript App with Next.js and 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 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 with Postgres (https://blog.hasura.io/create-next-js-sites-using-graphql-on-postgres-199224ad1a39)
- Cooking a Deliveroo clone with Next.js (React), 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 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-syntax-highlighter (https://thetombomb.com/posts/adding-code-snippets-to-static-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
- Kaminari Template (https://kaminari.vercel.app/) - Power packed Next.js and Tailwind CSS template. Built with developer experience in mind. Contains Husky, CommitLint, Prettier, 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, featuring automated XML sitemap, 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, Typescript and Auth0 💗
- Next & Now 2.0 Typescript template (https://github.com/alepacheco/landing-template) - Serverless, Typescript, Jest, 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/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 (monorepo)
- Next Graphql Apollo Typescript_Boostrap - Pobocha (https://github.com/Sebastp/Next-react-graphql-apollo_Boostrap) - React + GraphQL + Next.js + Apollo + Scss + Typescript + Prettier & EsLint boilerplate
- Next & Vercel Typescript template (https://github.com/alepacheco/landing-template) - Serverless, Typescript, Jest, Github CI, SCSS, prettier boilerplate
- NextJS in Firebase with Bootstrap (https://github.com/ananddayalan/nextjs-in-firebase-with-bootstrap) - Hosting NextJS app with Bootstrap in Firebase with Cloud Functions.
- Next Simple Starter (https://github.com/ooade/NextSimpleStarter) - Simple PWA boilerplate with Next.js and 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 17 + Typescript + Tailwind CSS 2 + React Query 3 + (GitHub Auth + Passwordless Auth) using (NextAuth.js and Fauna DB),
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, SSR, Hot-reload, CSS-in-JS, caching, and more.
- Next Simple Blog (https://github.com/tscanlin/next-blog) - Simple 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-bootstrap, SCSS and SSR with eslint.
- Next Blog Firestore (https://github.com/suevalov/next-blog-firestore) - Blog with simple CMS built with Next.js, Firebase Firestore, styled-components and mobx-state-tree.
- Next Redux Starter (https://github.com/CodementorIO/nextjs-redux-starter) - Next.js starter with Express, Redux, and PostCSS.
- NextJS 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, PostCSS, configurable SEO
- Next Boilerplate (https://arefaslani.github.io/next-boilerplate) - External CSS and Sass + Importing images from anywhere + Prettier and Eslint + Environment variables and many more features.
- next-starter (https://github.com/YuriBrunetto/next-starter) - A full and simple boilerplate with sass (.scss) and postcssbuilt 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, static site export, live demo
- csprance/next-smrt (https://github.com/csprance/next-smrt) - A minimal boilerplate with redux, styled-components, material-ui and typescript with a custom express server.
- Nextron (https://github.com/saltyshiomix/nextron) - An Electron with Next.js apps generator ⚡
- next-boilerplate (https://github.com/pankod/next-boilerplate) - A well-structured production ready Next.js boilerplate with Typescript, Redux, Express.js, 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, 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 + 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 with Postgres (Next.js, Postgres, GraphQL)
- nextjs-mongodb-app (https://github.com/hoangvvo/nextjs-mongodb-app) - Full-fledged app made with Next.JS and 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 + styled-components + react-testing-library + eslint + fontawesome
- The Knests Stack (https://github.com/tudorconstantin/knests/) - Full stack boilerplate/hackathon starter with: PostgreSQL, Knex.js, NestJS, Next.js (obviously), GraphQL, React (with hooks and typescript), Material-UI, Docker multistage images
for, 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, and TypeScript, with 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, Prettier, PostCSS, 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 with standard features like tagging, CMS, and shortcodes.
- Nextjs Apollo Nexus (https://github.com/inblack67/GraphQL-Next-Setup) - GraphQL Apollo Client-Server 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, and 35+ plugin.
- Hydrogen (https://statichunt.com/themes/nextjs-hydrogen) - 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 boilerplate for startup application with authentication using Next.js + Typescript + Tailwind CSS + Firebase-auth + 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. Driven by Prisma ORM.
- Next.js Enterprise (https://github.com/Blazity/next-enterprise) - enterprise-grade boilerplate for high-performance, maintainable apps. Built with Tailwind CSS, RadixUI, TypeScript and more.
- Start UI web (https://github.com/BearStudio/start-ui-web) - 🚀 opinionated UI starter with TypeScript, React, NextJS, Chakra UI, tRPC, Prisma, TanStack Query, Storybook, Playwright, Formiz
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 and .gql files using graphql-tag
- Next With Apollo (https://github.com/lfades/next-with-apollo) - Apollo Graphql 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.
- 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
- 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 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 and Next.js API routes that make it super easy to add Sign-In with 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.
- next-api-decorators (https://github.com/storyofams/next-api-decorators) - Decorators to create typed Next.js API routes, with easy request validation and transformation.
Apps
- CourseLit (https://github.com/codelit/courselit) - An open source alternative to Thinkific, Teachable etc.
- 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, 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 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, Docker and Kubernetes. Uses apollo client, 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 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.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.
- 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 hosted on Vercel.
- Twitter Clone (https://github.com/AlandSleman/t3-twitter-clone) - Twitter clone built with Next.js + T3 Stack + NextAuth + Supabase + 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.
- StorageBox (https://github.com/AlandSleman/StorageBox) - A Simple File Storage Service Built with Go and Next.js.
Books
- Hands On Next.js (https://leanpub.com/hands-on-nextjs) - A practical fullstack book on universal (server) rendering for react applications.
- Next.js Quick Start Guide (https://www.packtpub.com/web-development/nextjs-quick-start-guide) - Create, build and deploy universal JavaScript applications using Next.js
- The Next.js Handbook (https://flaviocopes.com/page/nextjs-handbook/) - Build a frontend React application that transparently handles server-side rendering for you.
- Serverless Web Applications with 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: Build a SaaS with React and Next.js (https://www.cutintothejamstack.com/) - Build a full-stack software-as-a-service application using Next.js, 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 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 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.
- Next.js Tutorial (https://www.youtube.com/watch?v=7J4iL1HDshQ&list=PLYSZyzpwBEWSQsrukurP09ksi49H9Yj40) - In depth Next.js tutorials.
- Next.js Conf 2020 (https://www.youtube.com/playlist?list=PLBnKlKpPeagnT2Cmv4giCbosfrbKnuYTD) - All the videos from the 2020 Next.js conference
- Full-stack 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, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023) (https://youtu.be/mqUN4N2q4qY)
- Build and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS (https://youtu.be/ugCN_gynFYw)
- Next js 13 project - IMBb Clone - next js tailwind css project - nextjs project (https://youtu.be/OHEMPreO09Q)
- Next js 13 project - Google clone (next.js 13, 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, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023) (https://youtu.be/ytkG7RT6SvU)
- NextJS 13 Tutorial: Create a Static Blog from Markdown Files (https://youtu.be/Hiabp1GY8fA)
- Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023 (https://www.youtube.com/watch?v=c_-b_isI4vg&t=11529s)
- Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023) (https://www.youtube.com/watch?v=PGPGcKBpAk8&t=1922s)
- Full Stack Spotify Clone: Next 13.4, React, Stripe, Supabase, PostgreSQL, Tailwind (2023) (https://youtube.com/watch?v=2aeMRB8LL4o&t=4402s)
- Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, 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 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
!CC0 (http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg) (http://creativecommons.org/publicdomain/zero/1.0/)
nextjs Github: https://github.com/unicodeveloper/awesome-nextjs
(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-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 and React Query (https://echobind.com/post/getting-started-with-nextjs-graphl-and-react-query)
- Using Next.js with FaunaDB: How to Query the 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 App with Next.js (https://auth0.com/blog/building-universal-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 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 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 with Next.js (https://malloc.fi/using-google-analytics-with-next-js)
- Build a Universal JavaScript App with Next.js and 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 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 with Postgres (https://blog.hasura.io/create-next-js-sites-using-graphql-on-postgres-199224ad1a39)
- Cooking a Deliveroo clone with Next.js (React), 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 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-syntax-highlighter (https://thetombomb.com/posts/adding-code-snippets-to-static-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
- Kaminari Template (https://kaminari.vercel.app/) - Power packed Next.js and Tailwind CSS template. Built with developer experience in mind. Contains Husky, CommitLint, Prettier, 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, featuring automated XML sitemap, 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, Typescript and Auth0 💗
- Next & Now 2.0 Typescript template (https://github.com/alepacheco/landing-template) - Serverless, Typescript, Jest, 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/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 (monorepo)
- Next Graphql Apollo Typescript_Boostrap - Pobocha (https://github.com/Sebastp/Next-react-graphql-apollo_Boostrap) - React + GraphQL + Next.js + Apollo + Scss + Typescript + Prettier & EsLint boilerplate
- Next & Vercel Typescript template (https://github.com/alepacheco/landing-template) - Serverless, Typescript, Jest, Github CI, SCSS, prettier boilerplate
- NextJS in Firebase with Bootstrap (https://github.com/ananddayalan/nextjs-in-firebase-with-bootstrap) - Hosting NextJS app with Bootstrap in Firebase with Cloud Functions.
- Next Simple Starter (https://github.com/ooade/NextSimpleStarter) - Simple PWA boilerplate with Next.js and 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 17 + Typescript + Tailwind CSS 2 + React Query 3 + (GitHub Auth + Passwordless Auth) using (NextAuth.js and Fauna DB),
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, SSR, Hot-reload, CSS-in-JS, caching, and more.
- Next Simple Blog (https://github.com/tscanlin/next-blog) - Simple 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-bootstrap, SCSS and SSR with eslint.
- Next Blog Firestore (https://github.com/suevalov/next-blog-firestore) - Blog with simple CMS built with Next.js, Firebase Firestore, styled-components and mobx-state-tree.
- Next Redux Starter (https://github.com/CodementorIO/nextjs-redux-starter) - Next.js starter with Express, Redux, and PostCSS.
- NextJS 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, PostCSS, configurable SEO
- Next Boilerplate (https://arefaslani.github.io/next-boilerplate) - External CSS and Sass + Importing images from anywhere + Prettier and Eslint + Environment variables and many more features.
- next-starter (https://github.com/YuriBrunetto/next-starter) - A full and simple boilerplate with sass (.scss) and postcssbuilt 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, static site export, live demo
- csprance/next-smrt (https://github.com/csprance/next-smrt) - A minimal boilerplate with redux, styled-components, material-ui and typescript with a custom express server.
- Nextron (https://github.com/saltyshiomix/nextron) - An Electron with Next.js apps generator ⚡
- next-boilerplate (https://github.com/pankod/next-boilerplate) - A well-structured production ready Next.js boilerplate with Typescript, Redux, Express.js, 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, 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 + 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 with Postgres (Next.js, Postgres, GraphQL)
- nextjs-mongodb-app (https://github.com/hoangvvo/nextjs-mongodb-app) - Full-fledged app made with Next.JS and 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 + styled-components + react-testing-library + eslint + fontawesome
- The Knests Stack (https://github.com/tudorconstantin/knests/) - Full stack boilerplate/hackathon starter with: PostgreSQL, Knex.js, NestJS, Next.js (obviously), GraphQL, React (with hooks and typescript), Material-UI, Docker multistage images
for, 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, and TypeScript, with 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, Prettier, PostCSS, 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 with standard features like tagging, CMS, and shortcodes.
- Nextjs Apollo Nexus (https://github.com/inblack67/GraphQL-Next-Setup) - GraphQL Apollo Client-Server 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, and 35+ plugin.
- Hydrogen (https://statichunt.com/themes/nextjs-hydrogen) - 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 boilerplate for startup application with authentication using Next.js + Typescript + Tailwind CSS + Firebase-auth + 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. Driven by Prisma ORM.
- Next.js Enterprise (https://github.com/Blazity/next-enterprise) - enterprise-grade boilerplate for high-performance, maintainable apps. Built with Tailwind CSS, RadixUI, TypeScript and more.
- Start UI web (https://github.com/BearStudio/start-ui-web) - 🚀 opinionated UI starter with TypeScript, React, NextJS, Chakra UI, tRPC, Prisma, TanStack Query, Storybook, Playwright, Formiz
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 and .gql files using graphql-tag
- Next With Apollo (https://github.com/lfades/next-with-apollo) - Apollo Graphql 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.
- 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
- 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 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 and Next.js API routes that make it super easy to add Sign-In with 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.
- next-api-decorators (https://github.com/storyofams/next-api-decorators) - Decorators to create typed Next.js API routes, with easy request validation and transformation.
Apps
- CourseLit (https://github.com/codelit/courselit) - An open source alternative to Thinkific, Teachable etc.
- 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, 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 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, Docker and Kubernetes. Uses apollo client, 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 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.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.
- 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 hosted on Vercel.
- Twitter Clone (https://github.com/AlandSleman/t3-twitter-clone) - Twitter clone built with Next.js + T3 Stack + NextAuth + Supabase + 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.
- StorageBox (https://github.com/AlandSleman/StorageBox) - A Simple File Storage Service Built with Go and Next.js.
Books
- Hands On Next.js (https://leanpub.com/hands-on-nextjs) - A practical fullstack book on universal (server) rendering for react applications.
- Next.js Quick Start Guide (https://www.packtpub.com/web-development/nextjs-quick-start-guide) - Create, build and deploy universal JavaScript applications using Next.js
- The Next.js Handbook (https://flaviocopes.com/page/nextjs-handbook/) - Build a frontend React application that transparently handles server-side rendering for you.
- Serverless Web Applications with 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: Build a SaaS with React and Next.js (https://www.cutintothejamstack.com/) - Build a full-stack software-as-a-service application using Next.js, 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 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 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.
- Next.js Tutorial (https://www.youtube.com/watch?v=7J4iL1HDshQ&list=PLYSZyzpwBEWSQsrukurP09ksi49H9Yj40) - In depth Next.js tutorials.
- Next.js Conf 2020 (https://www.youtube.com/playlist?list=PLBnKlKpPeagnT2Cmv4giCbosfrbKnuYTD) - All the videos from the 2020 Next.js conference
- Full-stack 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, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023) (https://youtu.be/mqUN4N2q4qY)
- Build and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS (https://youtu.be/ugCN_gynFYw)
- Next js 13 project - IMBb Clone - next js tailwind css project - nextjs project (https://youtu.be/OHEMPreO09Q)
- Next js 13 project - Google clone (next.js 13, 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, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023) (https://youtu.be/ytkG7RT6SvU)
- NextJS 13 Tutorial: Create a Static Blog from Markdown Files (https://youtu.be/Hiabp1GY8fA)
- Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023 (https://www.youtube.com/watch?v=c_-b_isI4vg&t=11529s)
- Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023) (https://www.youtube.com/watch?v=PGPGcKBpAk8&t=1922s)
- Full Stack Spotify Clone: Next 13.4, React, Stripe, Supabase, PostgreSQL, Tailwind (2023) (https://youtube.com/watch?v=2aeMRB8LL4o&t=4402s)
- Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, 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 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
!CC0 (http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg) (http://creativecommons.org/publicdomain/zero/1.0/)
nextjs Github: https://github.com/unicodeveloper/awesome-nextjs