next-armored v1.0.0

Next-armored 🛡️

NextJs middleware toolkit to secure your next server with flexibility and ease.

• 🚀 Easy to use: simple middleware creation.
• 🔧 Flexible: Customize middleware configurations to fit your needs.
• 🛡️ Secure: Default configurations are based on best practices and security standards.
• ✅ Type-safe: Middleware is fully typed and compatible with Next and TypeScript.
• 🌐 Open source: Audit, report issues, and contribute.

Installation

Package Manager

Using npm:

npm i next-armored

Using yarn:

yarn add next-armored

Using pnpm:

pnpm add next-armored

Using bun:

bun add next-armored

Usage

CORS middleware

See how to configure CORS middleware for more details.

Go to your middleware.ts file and add the following code:

import { NextRequest } from 'next/server';
import { createCorsMiddleware } from 'next-armored/cors';

const corsMiddleware = createCorsMiddleware({
  origins: ['https://example.com', 'http://localhost:5173'],
});

export function middleware(request: NextRequest) {
  return corsMiddleware(request);
}

export const config = {
  matcher: ['/api/:path*'],
};

Import the createCorsMiddleware function from next-armored/cors and pass the configuration object to it. You have to at least specify the origins option because keeping * by default is not recommended as it can be a security risk. Then add the cors middleware to the middleware function and return the result. Last step is to export the config object which is used to match the middleware to your api routes.

If you are building a public api, you can allow all origins by passing origins: ['*'] to the createCorsMiddleware function. ⚠️ But be aware that this can be a security risk.

How to combine with other middlewares

import { NextRequest, NextResponse } from 'next/server';
import { createCorsMiddleware } from 'next-armored/cors';

const corsMiddleware = createCorsMiddleware({
  origins: ['https://example.com', 'http://localhost:5173'],
});

const otherMiddleware = (request: NextRequest) => {
  console.log('otherMiddleware');
  return NextResponse.next();
};

export function middleware(request: NextRequest) {
  const response = otherMiddleware(request);
  const isApi = request.nextUrl.pathname.startsWith('/api');
  if (isApi) {
    return corsMiddleware(request, response);
  }
  return response;
}

export const config = {
  matcher: ['/api/:path*', '/home/:path*'],
};

The first option is to call the first middleware and get the response. Then you can give the response to the cors middleware as an argument. In this case, the cors middleware will attach the headers to the response instead of returning a new response. If all of your middlewares doesn't apply to the same matching path, you have to check if the request is an api request and then apply the cors middleware only in that case.

The second option is to write a utils to chain the middlewares. Here is a snippet of how you can do it but it can be adapted to your needs.

export type CustomMiddleware = (
  request: NextRequest,
  event: NextFetchEvent,
  response: NextResponse,
) => NextMiddlewareResult;

type MiddlewareFactory = (next: CustomMiddleware) => CustomMiddleware;

export const chainMiddlewares = (
  functions: MiddlewareFactory[],
  index = 0,
): CustomMiddleware => {
  const current = functions[index];

  if (current) {
    const next = chainMiddlewares(functions, index + 1);

    return current(next);
  }

  return (
    _request: NextRequest,
    _event: NextFetchEvent,
    response: NextResponse,
  ) => response;
};

export const middleware = chainMiddleware([
  middleware1,
  middleware2,
  corsMiddleware,
]);

Otherwise, you can use other open source libraries like next-middleware-chain or next-compose-middleware to chain the middlewares.

License

MIT.