Next.js

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

Hazem Abbas

Jul 22, 2023 — 11 min read

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.

2- 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.

4- Sitemap generator

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
}

5- 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

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.

8- Next.img

https://github.com/humaans/next-img/

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.

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

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

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.

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.

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.

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

16- next-offline

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

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

18- next-unused

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

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.

Next.js Open-source Development Library Frameworks JavaScript TypeScript List Web-based Apps web development

1- Next.js SEO

2- Graphql

3- Universal Language Detector

4- Sitemap generator

5- next-useragent

6- next-mdx-blog

7- next-i18next

8- Next.img

9- NextAuth.js

10- Next Routes Middleware

11- Serverless Next.js Component

12- next-session

13- iron-session

14- Zero Config PWA Extension

15- Next Deploy

16- next-offline

17- next-themes

18- next-unused

19- MDNEXT

Read More Articles in Next.js

ARK UI: Open-source UI Framework with customizable and accessible UI components for React, Solid and Vue

Top 11 Free Open-Source AI Search Engines Powered by LLMs You Can Self-Host

Top 11 Open-Source UI Frameworks for Next.js and React

Farfalle - Open-source AI-powered search engine. And Perplexity Clone

Next.js Vllm UI - Self-hosted Web Interface for vLLM and Ollama

Fumadocs: Create Stunning Documentation Websites in Minutes with This Free Self-hosted Tool

Articles

Systems

Development

Apps

Science - Healthcare

Open-source Apps

Medical Apps

Lists

Dev. Resources