Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/z4nr34l/nemo
Missing polyfill for multiple next.js middlewares
https://github.com/z4nr34l/nemo
middleware middlewares nextjs nextjs14 vercel
Last synced: 26 days ago
JSON representation
Missing polyfill for multiple next.js middlewares
- Host: GitHub
- URL: https://github.com/z4nr34l/nemo
- Owner: z4nr34l
- License: mit
- Created: 2024-01-01T18:00:28.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-08T06:33:05.000Z (3 months ago)
- Last Synced: 2024-10-09T10:31:15.804Z (28 days ago)
- Topics: middleware, middlewares, nextjs, nextjs14, vercel
- Language: TypeScript
- Homepage: https://nemo.rescale.build
- Size: 1.23 MB
- Stars: 171
- Watchers: 3
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# NEMO
`NEMO` is a simple utility for creating path-based middleware in Next.js applications. Simplify multi-middleware management and reduce general boilerplate in few easy steps with that package.
## Installation
```bash
npm install @rescale/nemo
```
```bash
pnpm add @rescale/nemo
```
```bash
bun add @rescale/nemo
```
## Usage
### Basic definition
Code in `middleware.ts` file:
```ts
import { createMiddleware } from '@rescale/nemo';
import { type NextRequest, NextResponse } from 'next/server';
const middlewares = {
// define your middlewares here...
};
// Create middlewares helper
export const middleware = createMiddleware(middlewares);
export const config = {
/*
* Match all paths except for:
* 1. /api/ routes
* 2. /_next/ (Next.js internals)
* 3. /_static (inside /public)
* 4. /_vercel (Vercel internals)
* 5. Static files (e.g. /favicon.ico, /sitemap.xml, /robots.txt, etc.)
*/
matcher: ['/((?!api/|_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
};
```
## Matcher types
### Simple
```ts
// ...
const middlewares = {
// This will match /blog route only
'/blog': blogMiddleware,
// This will match /docs route only
'/docs': docsMiddleware,
};
```
### Path
```ts
// ...
const middlewares = {
// This will match routes starting with /blog/*
'/blog/:path*': blogMiddleware,
// This will match routes starting with /docs/*
'/docs/:path*': docsMiddleware,
};
```
### Dynamic segments
```ts
// ...
const middlewares = {
// This will match /blog/[slug] routes only
'/blog/[slug]': blogMiddleware,
// This will match /blog/[slug]/view routes only
'/blog/[slug]/view': blogViewMiddleware,
};
```
### RegEx
```ts
// ...
const middlewares = {
// This will match any url in /posts that's next segment is number-typed
// Example: /posts/123, but not /posts/asd
'regex:^/posts/\\d+$': regexMiddleware,
};
```
## Middlewares defining
### Inline
```ts
// ...
const middlewares = {
// This will match /blog route only
'/blog': async (request: NextRequest) => {
console.log('Middleware for /blog', request.nextUrl.pathname);
return NextResponse.next();
},
};
```
### Reference
```ts
// ...
const blogMiddleware = async (request: NextRequest) => {
console.log('Middleware for /blog', request.nextUrl.pathname);
return NextResponse.next();
};
const middlewares = {
// This will match /blog route only
'/blog': blogMiddleware,
};
```
### Import
Recommended good practice!
```ts
import { blogMiddleware } from '@/app/(blog)/_middleware';
// ...
const middlewares = {
// This will match /blog route only
'/blog': blogMiddleware,
};
```
## Middleware chaining
This packages can intercept `NextResponse.next()` returned from middleware function to chain middlewares for same matcher.
```ts
// ...
const middlewares = {
// This will match /blog route only and execute both middlewares for it
'/blog': [blogMiddleware, blogSecondMiddleware],
};
```
## Global middlewares
You can define global middleware that would be executed in every middleware execution in your application.
I've implemented runtime policy, so you can decide if it will be executed before/after (or both) than rest of defined middlewares.
```ts
// ...
const globalMiddlewares = {
before: authMiddleware,
after: analyticsMiddleware,
};
const middlewares = {
// define your middlewares here...
};
// Create middlewares helper
export const middleware = createMiddleware(middlewares, globalMiddlewares);
// ...
```
## Motivation
I'm working with Next.js project for a few years now, after Vercel moved multiple `/**/_middleware.ts` files to a single `/middleware.ts` file, there was a unfilled gap - but just for now.
After a 2023 retro I had found that there is no good solution for that problem, so I took matters into my own hands. I wanted to share that motivation with everyone here, as I think that we all need to remember how it all started.
Hope it will save you some time and would make your project DX better!