next-compose-middlewares

• Using koa style middlewares inside nextjs
• Unified request/response context(express api) across Page and Route/Action
• SetCookie/clearCookie both inside Page and Route/Action
• Easily access request/response context between components inside Page and functions inside Route/Action

demo

pnpm i
npm run dev

Usage

nextjs middleware

src/middleware.ts

export { middleware } from 'next-compose-middlewares/middleware';

extends type

declare module 'next-compose-middlewares' {
  interface NextContext {
    user: string;
  }
}

page

src/app/page.tsx

import React from 'react';
import { withPageMiddlewares, getNextContext } from 'next-compose-middlewares';

export default withPageMiddlewares([
  async (context, next) => {
    context.user = 'test';
    await next();
  }])(
  async () => {
    const { user } = getNextContext();
    return (
      <>
        <p>{user}</p>
      </>
    );
  },
);

action

src/action/getUser.ts

import { withActionMiddlewares, getNextContext } from 'next-compose-middlewares';

export default withActionMiddlewares([
  async (context, next) => {
    context.user = 'test';
    await next();
  }])(
  async () => {
    const { user } = getNextContext();
    return user;
  },
);

route

src/app/get/route.ts

import { withRouteMiddlewares,getNextContext } from 'next-compose-middlewares';

export const GET = withRouteMiddlewares([
  async (context, next) => {
    context.user = 'test';
    await next();
  }])(
  async () => {
    const { user, res } = getNextContext();
    res.json({ user });
  },
);

nginx

location /rewrite {
    proxy_set_header X-Forwarded-URI $request_uri;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://127.0.0.1:3000/dynamic;
    proxy_http_version 1.1;
    # Disable buffering for streaming support
    proxy_buffering off;
    proxy_set_header X-Accel-Buffering no;
}

API Report File for "next-compose-middlewares"

Do not edit this file. It is a report generated by API Extractor.

import type { NextRequest } from 'next/server';
import { default as React_2 } from 'react';

// @public (undocumented)
export interface CookieAttributes {
    domain?: string | undefined;
    expires?: number | Date | undefined;
    // (undocumented)
    maxAge?: number;
    path?: string | undefined;
    sameSite?: 'strict' | 'lax' | 'none' | undefined;
    secure?: boolean | undefined;
}

// @public (undocumented)
export function getNextContext(): NextContext;

// @public (undocumented)
export type LayoutFunction = (r: LayoutRequest) => ReturnedRender | Promise<ReturnedRender>;

// @public (undocumented)
export type LayoutRequest = {
    params: Params;
    children: React_2.ReactNode;
};

// @public (undocumented)
export type MiddlewareFunction = (context: NextContext, next: NextFunction) => Promise<any> | void;

// @public (undocumented)
export interface NextContext {
    // (undocumented)
    req: NextContextRequest;
    // (undocumented)
    res: NextContextResponse;
    // (undocumented)
    type: NextContextType;
}

// @public (undocumented)
export type NextContextRequest = {
    params: any;
    host: string;
    protocol: string;
    secure: boolean;
    url: string;
    nextUrl: URL;
    ip: string | undefined;
    get: (k: string) => any;
    header: (k: string) => any;
    text: () => Promise<string>;
    json: () => Promise<any>;
    method: string;
    path: string;
    query: any;
    cookies: any;
    headers: any;
};

// @public (undocumented)
export type NextContextResponse = {
    clearCookie: (name: string, options?: CookieAttributes) => void;
    cookie: (name: string, value: string, options?: CookieAttributes) => void;
    append: (k: string, v: string) => void;
    set: (...args: [key: string, v: any] | [o: any]) => void;
    get: (key: string) => any;
    redirect: (r: string) => void;
    json: (j: any) => void;
    status: (s: number) => void;
};

// @public (undocumented)
export type NextContextType = 'page' | 'route' | 'action';

// @public (undocumented)
export type NextFunction = () => Promise<any> | void;

// @public (undocumented)
export type PageFunction = (r: PageRequest) => ReturnedRender | Promise<ReturnedRender>;

// @public (undocumented)
export type PageRequest = {
    params: Params;
    searchParams: Params;
};

// @public (undocumented)
export type Params = Promise<Record<string, string | string[]>>;

// @public (undocumented)
export type ReturnedRender = React_2.ReactNode;

// @public (undocumented)
export type RouteFunction = (request: NextRequest, context: {
    params: Params;
}) => any;

// @public (undocumented)
export function withActionMiddlewares(fns: MiddlewareFunction[]): <T extends Function>(action: T) => T;

// @public (undocumented)
export const withLayoutMiddlewares: (fns: MiddlewareFunction[]) => (Layout: LayoutFunction) => LayoutFunction;

// @public (undocumented)
export function withPageMiddlewares(fns: MiddlewareFunction[]): (Page: PageFunction) => PageFunction;

// @public (undocumented)
export function withRouteMiddlewares(fns: MiddlewareFunction[]): (Route: RouteFunction) => RouteFunction;

// (No @packageDocumentation comment for this package)