next-context

• Using koa style middlewares inside nextjs
• Unified request/response context across Page/Components/Route/Action/Middleware
• SetCookie/clearCookie inside Page/Route/Action/Middleware
• I18n support both for server and client component
• Cors support for api route

demo

pnpm i
npm run dev

docs

Docs

Usage

nextjs middleware

src/middleware.ts

import { createMiddleware } from 'next-context';
export const middleware = createMiddleware([async (_, next) => {
  const context = getNextContext(); // context === _
  context.req.header('xx', 'yy'); // set request header for subsequent page/route
  context.res.cookie('xx', context.req.cookies.xx); // set response cookie
  context.res.header('xx', context.req.headers.xx); // set response header
  await next();
}]);
export const config = {
  matcher: '/((?!_next|favicon.ico|sitemap.xml|robots.txt).*)',
};

extends type

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

page

src/app/page.tsx

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

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-context';

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-context';

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;
}