19 Open-source Next.js Extensions and Plugins To Enrich Your App

19 Open-source Next.js Extensions and Plugins To Enrich Your App
Photo by Lautaro Andreani / Unsplash

Next.js is a React-based web development framework that allows developers to build server-side rendered React applications. It is an open-source framework that is built on top of Node.js, React, and webpack. Next.js offers many features, including automatic code splitting, server-side rendering, automatic static optimization, route prefetching, and more.

Next.js plugins and extensions are packages that can be installed to extend the functionality of a Next.js application. These plugins and extensions can be used to add features such as CSS preprocessing, static asset optimization, and more. They are open-source and can be easily installed using npm.

Using open-source extensions in Next.js applications offers several benefits. Firstly, it can save developers time and effort by allowing them to use pre-existing solutions rather than building everything from scratch. Additionally, using open-source extensions can improve the quality of a project by providing access to code that has been reviewed and improved by the community.

Finally, open-source extensions can provide a way for developers to contribute to the community and give back to the wider development community.

Overall, Next.js plugins and extensions offer a powerful way to extend the functionality of Next.js applications and can provide many benefits for developers and projects.

1- Next.js SEO

Next SEO is a plugin that makes managing your SEO easier in Next.js projects. It is easy to install, and supports OpenGraph, JSON-LD, configure No-index pages, canonical URLs, Alternate URL, No-Follow and more.

NextSeo works by including it on pages where you would like SEO attributes to be added. Once included on the page you pass it a configuration object with the page's SEO properties. This can be dynamically generated at a page level or in some cases your API may return an SEO object.

GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
Next SEO is a plug in that makes managing your SEO easier in Next.js projects. - GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

2- Graphql

Next plugin for .graphql and .gql files using graphql-tag

GitHub - lfades/next-plugin-graphql: Next plugin for .graphql and .gql files using graphql-tag
Next plugin for .graphql and .gql files using graphql-tag - GitHub - lfades/next-plugin-graphql: Next plugin for .graphql and .gql files using graphql-tag

3- Universal Language Detector

Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js.

GitHub - UnlyEd/universal-language-detector: Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js
Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js - GitHub - UnlyEd/universal-language-detector: Language detector that work…

4- Sitemap generator

Photo by Myriam Jessier / Unsplash

Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

next-sitemap requires a basic config file (next-sitemap.config.js) under your project root:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}
GitHub - UnlyEd/universal-language-detector: Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js
Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js - GitHub - UnlyEd/universal-language-detector: Language detector that work…

5- next-useragent

next-useragent parses browser user-agent strings for next.js

GitHub - tokuda109/next-useragent: next-useragent parses browser user-agent strings for next.js
next-useragent parses browser user-agent strings for next.js - GitHub - tokuda109/next-useragent: next-useragent parses browser user-agent strings for next.js

6- next-mdx-blog

next-mdx-blog enables you to easily add a blog to any next.js based project.

Features:

  • MDX Blog
  • RSS Feed
  • Simple Setup
  • Customizable Rendering
GitHub - hipstersmoothie/next-mdx-blog: Easily add a blog to any next.js based project.
Easily add a blog to any next.js based project. Contribute to hipstersmoothie/next-mdx-blog development by creating an account on GitHub.

7- next-i18next

The easiest way to translate your Next.js apps (with pages setup). If you're using Next.js 13 with app directory, there is no need for next-i18next, you can directly use i18next and react-i18next, like described in this blog post.

GitHub - i18next/next-i18next: The easiest way to translate your NextJs apps.
The easiest way to translate your NextJs apps. Contribute to i18next/next-i18next development by creating an account on GitHub.

8- Next.img

  1. https://github.com/humaans/next-img/
GitHub - humaans/next-img: A Next.js plugin for embedding optimized images.
A Next.js plugin for embedding optimized images. Contribute to humaans/next-img development by creating an account on GitHub.

9- NextAuth.js

NextAuth.js is a complete open source authentication solution for Next.js applications.

It is designed from the ground up to support Next.js and Serverless.

GitHub - nextauthjs/next-auth: Authentication for the Web.
Authentication for the Web. Contribute to nextauthjs/next-auth development by creating an account on GitHub.

10- Next Routes Middleware

Universal Lambda Routing for Next.js application.

Features highlight:

  • Replicate next.js for Now V2 config to develop locally.
  • Support named regular expressions used in routes.
  • Allow custom routes handling with all Express.js http methods.
  • Client-side routing
  • Compiling to Now V2 compatible JSON config
GitHub - revskill10/next-routes-middleware: Universal Lambda Routing
Universal Lambda Routing. Contribute to revskill10/next-routes-middleware development by creating an account on GitHub.

11- Serverless Next.js Component

This extension allows you to deploy your Next.js apps on AWS Lambda@Edge via Serverless Components.

Included features:

  • Server side rendered pages at the Edge. Pages that need server side compute to render are hosted on Lambda@Edge. The component takes care of all the routing for you, so there is no configuration needed. Because rendering happens at the CloudFront edge locations' latency is very low!
  • API Routes. Similarly to the server side rendered pages, API requests are also served from the CloudFront edge locations using Lambda@Edge.
  • Dynamic pages / route segments.
  • Catch all routes.
  • Automatic prerendering. Statically optimized pages compiled by next are served from CloudFront edge locations with low latency and cost.
  • Client assets. Next.js build assets /_next/* served from CloudFront.
  • User static / public folders. Any of your assets in the static or public folders are uploaded to S3 and served from CloudFront automatically.
  • Opt-in to static generation (SSG) via getStaticProps.
  • Opt-in to server-side rendering (SSR) via getServerSideProps.
  • Statically generate a set of routes from dynamic sources via getStaticPaths.
  • Base path
  • Preview mode
  • Optional catch all routes
  • Redirects.
  • Rewrites.
  • Custom Headers.
  • Image Optimization
  • Next.js 10 Localization.
  • Incremental Static Regeneration.
  • Next.js 12 features
GitHub - serverless-nextjs/serverless-next.js: ⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components - GitHub - serverless-nextjs/serverless-next.js: ⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components

12- next-session

Lightweight promise-based session middleware for Next.js. Also works in micro or Node.js HTTP Server, Express, and more.

Also check out alternatives like next-iron-session. Take a look at nextjs-mongodb-app to see this module in use.
GitHub - hoangvvo/next-session: Simple promise-based session middleware for Next.js, micro, Express, and more
Simple promise-based session middleware for Next.js, micro, Express, and more - GitHub - hoangvvo/next-session: Simple promise-based session middleware for Next.js, micro, Express, and more

13- iron-session

🛠 Node.js stateless session utility using signed and encrypted cookies to store data. Works with Next.js, Express, and Node.js HTTP servers.

The session data is stored in encrypted cookies ("seals"). And only your server can decode the session data. There are no session ids, making iron sessions "stateless" from the server point of view.

GitHub - vvo/iron-session: 🛠 Next.js stateless session utility using signed and encrypted cookies to store data. Also works with Express, and Node.js HTTP servers
🛠 Next.js stateless session utility using signed and encrypted cookies to store data. Also works with Express, and Node.js HTTP servers - GitHub - vvo/iron-session: 🛠 Next.js stateless session util…

14- Zero Config PWA Extension

This plugin is powered by workbox and other similar package to generate a highly usable app in PWA mode.

Its features include:

  • 0️⃣ Zero config for registering and generating service worker
  • ✨ Optimized precache and runtime cache
  • 💯 Maximize lighthouse score
  • 🎈 Easy to understand examples
  • 📴 Completely offline support with fallbacks example 🆕
  • 📦 Use workbox and workbox-window v6
  • 🍪 Work with cookies out of the box
  • 🔉 Default range requests for audios and videos
  • ☕ No custom server needed for Next.js 9+
  • 🔧 Handle PWA lifecycle events opt-in.
  • 📐 Custom worker to run extra code with code splitting and typescript support.
  • 📜 Public environment variables available in custom worker as usual
  • 🐞 Debug service worker with confidence in development mode without caching
  • 🌏 Internationalization (a.k.a I18N) with next-i18next
  • 🛠 Configurable by the same workbox configuration options for GenerateSW and InjectManifest
  • 🚀 Spin up a GitPod and try out examples in rocket speed
  • ⚡ Support blitz.js (simply add to blitz.config.js)
  • 🔩 (Experimental) precaching .module.js when next.config.js has experimental.modern set to true.
GitHub - shadowwalker/next-pwa: Zero config PWA plugin for Next.js, with workbox 🧰
Zero config PWA plugin for Next.js, with workbox 🧰 - GitHub - shadowwalker/next-pwa: Zero config PWA plugin for Next.js, with workbox 🧰

15- Next Deploy

Effortless deployment to AWS and GitHub Pages for Next.js apps 🚀.

Features highlight:

  • ✔ effortless deployment to AWS and GitHub pages
  • ✔ deployments to a custom domain
  • ✔ static generation (SSG), server side rendering (SSR)
  • ✔ serverless AWS architecture serving your Next.js content globally via CloudFront and Lambda@Edge
  • ✔ multienvironment support
GitHub - lone-cloud/next-deploy: Effortless deployment to AWS and GitHub Pages for Next.js apps 🚀
Effortless deployment to AWS and GitHub Pages for Next.js apps 🚀 - GitHub - lone-cloud/next-deploy: Effortless deployment to AWS and GitHub Pages for Next.js apps 🚀

16- next-offline

Use Workbox with Next.js and easily enable offline functionality in your application!

GitHub - hanford/next-offline: make your Next.js application work offline using service workers via Google’s workbox
make your Next.js application work offline using service workers via Google's workbox - GitHub - hanford/next-offline: make your Next.js application work offline using service workers via Googl…

17- next-themes

With this package you can add themes support to your Next.js apps that include many features:

  • ✅ Perfect dark mode in 2 lines of code
  • ✅ System setting with prefers-color-scheme
  • ✅ Themed browser UI with color-scheme
  • ✅ Support for Next.js 13 appDir
  • ✅ No flash on load (both SSR and SSG)
  • ✅ Sync theme across tabs and windows
  • ✅ Disable flashing when changing themes
  • ✅ Force pages to specific themes
  • ✅ Class or data attribute selector
  • useTheme hook
GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Suppor…

18- next-unused

This package enable you to find unused files in your Next.js project.

GitHub - pacocoursey/next-unused: Find unused files in your Next.js projects
Find unused files in your Next.js projects. Contribute to pacocoursey/next-unused development by creating an account on GitHub.

19- MDNEXT

mdnext is an ecosystem of tools to empower working with NextJS + MDX.

The mdnext CLI surfaces a collection officially maintained and community submitted templates to choose from. Once chosen, the project is cloned locally with a clean commit history and you're ready to build your next project.

@mdnext/components delivers accessible (thanks ChakraUI) and extendable components for working with MDX. These include things you've seen like Code components for styling code blocks or Iframes for embedding rich content to MDX

The mdnext template collection are NextJS based projects with opinions around how to style, handle MDX (and other data sources), deliver media, and handle your most usual workflows (ecomm / blogs / product pages).

While there is an officially maintained collection of templates, I was excited to see and share what the community has created. I know there's many different opinions and comfortabilities as a web developer and want our ecosystem to be accessible.

It offers several official and community starters to build your MDNEXT apps.

GitHub - domitriusclark/mdnext: The opinionated ecosystem for MDX powered NextJS apps for blogs, documentation, and more.
The opinionated ecosystem for MDX powered NextJS apps for blogs, documentation, and more. - GitHub - domitriusclark/mdnext: The opinionated ecosystem for MDX powered NextJS apps for blogs, documen…