Modular architecture
for Next.js

Build scalable Next.js applications with plug-and-play modules. Each one owns its routes, API, and middleware. Build once, reuse anywhere.

Get StartedBrowse Modules
Inspired byNuxtNestJS

// Import published module

import { authModule } from '@next-modular/auth'

// Import local module

import { myModule } from './modules/my-module'

export const modules = [

authModule({

providers: ['google'],

features: {

routes: true,

apiRoutes: true,

middleware: false

}

}),

myModule,

]

// Routes, APIs & middleware registered automatically.

# Initialize

npx next-modular init

# Add a module

npx next-modular add @next-modular/auth-module

How it works

Every module is a self-contained feature. Pages, APIs, middleware, components, all in one box. Drop it into a project, it wires itself up. Move it to another project, same thing.

ModulePagesAPIMiddlewareComponentsApp AApp B

Plug & Play

Modules auto-register routes, API endpoints, and middleware. No wiring needed.

Feature-First Organisation

Everything for a feature lives in one folder. No more hunting across scattered directories.

CLI Powered

Add, create, and manage modules from the command line. Fast and simple.

Community Modules

Browse the registry or publish your own modules for others to use.

Stop over-engineering

You don't need 6 repos and a platform team to ship features independently.

The hard way

Micro-frontends/Multi-zones

1Split your app into separate repos and deployments
2Set up separate CI/CD pipelines for each
3Solve shared state, auth, routing, and versioning
4Debug runtime integration issues in production
5Hire a platform team to maintain it all
6Pay for hosting, infra, and monitoring per service

High complexity · High cost · Slow to ship

or

The simple way

next-modular

1One repo, one build, one deployment
2Features isolated into modules with clean boundaries
3Share state, types, and utilities freely across modules
4Build a module once, plug it into every project
5No extra infra, no platform team needed
6Zero runtime stitching, zero network hops

Low complexity · No extra cost · Ship quickly

Organize by feature, not by type

Stop hunting for related code across your entire project.

typical-nextjs-app
app/
login/
page.tsx
register/
page.tsx
dashboard/
page.tsx
checkout/
page.tsx
api/
auth/
login/
route.ts
session/
route.ts
payments/
route.ts
lib/
auth.ts
session.ts
payments.ts
middleware.ts

Debugging means grepping across the whole project.

A single feature scattered across the entire codebase.

Hard to maintain what you can't see in one place.

next-modular-app
app/
dashboard/
modules/
auth-module/
index.ts
routes/
login.tsx
register.tsx
server/api/
login.ts
session.ts
lib/
middleware.ts
payments-module/
index.ts
routes/
checkout.tsx
server/api/
webhook.ts
lib/
modules.config.ts

Readable at a glance. Debuggable in minutes.

Delete the folder, delete the feature. That simple.

One folder, full picture. No mental mapping needed.

Everything you need

A complete toolkit for building modular Next.js applications at any scale.

Plug & Play Modules

Add a module and it auto-registers its routes, APIs, and middleware. No manual wiring.

CLI Scaffolding

Init projects, add registry modules, or create new ones from templates in seconds.

Reusable Across Projects

Publish a module to npm and use it in every Next.js app. Build once, use everywhere.

Per-Module Configuration

Enable/disable features, pass custom options, and toggle routes, APIs, or middleware independently.

Dynamic Route Matching

Supports static, dynamic, and catch-all routes. Params are extracted and passed automatically.

Flexible Middleware

Middleware runs scoped to a module's routes by default, or globally when you opt in.

Module Registry

Browse community and official modules. Install pre-built features with a single command.

Zero Build Overhead

No code generation or build plugins. Modules resolve at runtime through standard Next.js catch-all routes.

TypeScript Native

Full type safety for module definitions, configs, and handlers. Autocomplete everywhere.

Inspired by

Nuxt

Nuxt's module system lets you drop features into a Vue app with a single line of config. Self-contained, composable, and reusable across projects.

NestJS

NestJS enforces clean feature boundaries through explicit module imports and providers. A pattern that keeps large codebases maintainable.

“The art of programming is the art of organizing complexity.”

Edsger W. Dijkstra