WordPress-like Plugins, but for Next.js

Hello React, dear Berlin, how's it going on? I'm Sanket Sahu, and I run a company called GeekyAnds, and I co-created a UI component library for React Native and React called Nativebase. These days I'm working on the Glue Stack ecosystem, which is on the lines of Nativebase version 3, universal UI component library, and tools around design system.

But today I'm going to talk about something else. It's about how we can build a Wordpress-like plugin system, but for Next.js. We got multiple things from PHP to React, and what explains better than this meme? So why not plugins? If you don't know yet, WordPress plugins are like a bunch of plugins which are segregated into folders, and as soon as you drop them into your project, we get like functional behavior, functionality changes, as soon as we add these plugins. Much like a Chrome extension, but a bit different when you compare it with like npm packages. In packages you have to install and then integrate yourself, while plugins, they add end user functionality.

So this is the dashboard of WordPress where we have multiple plugins. And this is an example from the old days how you can upload a plugin. This is an example of contact form, and as soon as you upload it, you have that feature available on your website. So why not for next? So using this plugin system, we can go from this folder structure where we have say, for example, the auth behavior or authentication distributed across your app, right? From say, pages slash login.js components, login form.js, and then API for the same thing, login and log out. Then middleware, and store, and a bunch of different things. So with the plugin system, we can co-locate all these things inside its own module system or namespace wherein as soon as you add or remove this plugin, then that auth behavior is removed from your app, right? So in this experiment, I have tried to do a file based plugin system inspired by WordPress, and these plugins enable visual and non-visual features per plugin. I've got the checklist from WordPress, which is a file based system, persistent store per plugin, register components, routes, functions, event system, and dependency management. Although this is just an experiment, I've tried to imitate these three behaviors, file system based, register components, and register routes. And this is how the architecture looks like. So we have this plugin system, and all the plugins talk to that. This plugin system adds as an intermediate step at different places in Next.js. We have a root provider for plugin system and we have some implementation in middleware.ts and somewhere in the all.tsx file. It maintains its own store for routes and components. So, yeah, this is how the architecture looks like. Yeah, so some time for some demo. Great. So let me just try this. Okay, so how does the code look like? So we have a plugins folder and as soon as we install or add these folders, we get those functionality. So a quick demo would be this one. So this is a Next.js app, which has the plugin system installed. So what I've done is let's remove all these plugins into the download folder. And if I go and refresh this, so this is now a website which does not have any plugins installed. Say, if I want to do say, a Hello World plugin, which essentially adds an alert message, as soon as we drop it, we see this Hello World being activated.

What does this do? So this plugin is all here, I mean, all located inside this, and it adds a simple Hello World behavior into this. Let's see the code for this one. So we have plugins and then Hello World. So this implements iplugin, and we have a boot method. If type of window is not undefined, that means if it's a browser show the alert Hello World. So we've just added this folder and it automatically added the Hello World alert message on all the pages.

This is just a simple example, but we can go beyond this, for example, say, coming soon page, I want to create a coming soon page with a plugin. So we can just remove Hello World for a while, and then we can get entire coming soon route here as soon as we do it. So this is all inside this, the coming soon folder all together. So if you see this, we have a register route function, which we are calling in our coming soon page plugin. And yeah, we have a route and a component against that. And this component is over here. And I've used glue stack UI for the styling. And it has some assets and all those things.

So this page, this plugin is independent. You can add or remove this without having any dependency on separate things. So we have a chatbot for example. As soon as we add it, we get this chatbot over here, which is completely decoupled from your actual page logic and then it appears everywhere, for example. Then we have say authentication system. So we don't have anything like login over here, for example. But as we add this entire Auth plugin over here, this enables and makes the entire website to have a login system here and it has a fully working login system. It has an API, it has the routes, middleware and everything. Let's quickly see that too. In the Auth plugin we are registering a few of the routes like login and home, we are registering API login, API logout and we are also registering a middleware that checks for login. Yeah, so all these things now work. Let me see what's the username and password so I can go ahead and try logging in. Okay, so yeah, so let's see and let's see. Okay, so this works and now slash home is restricted. If you are logged in, then only it shows up. If not, so all the logic is added into this.

So if I log out and try to access slash home, it would redirect me back to this. All those things is in this one. So as soon as I remove this and refresh my page, this entire thing is gone from my website. So if I go back and try to sign in again, this does not exist.

So yeah, that's about the plugin system. One last plugin is the Confetti plugin, which I really like. So I just drag and drop, and we have Confetti on our website. So yeah, that's a little bit overview of the experiment that I recently tried, and then it works like a separate co-located file system-based plugin system. You can try the project over here.

And the takeaways are plugins enable co-location by feature, and code abstraction shouldn't stop at packages. And the third takeaway is copy-pasted is the future. That's me. I'm Sanket. And if you want to talk more about it, connect with me. Super happy to speak about it.