next-ssr-middleware

Koa-like middlewares for Next.js Server Side Rendering


Keywords
koa, middleware, nextjs, ssr
License
Other
Install
npm install next-ssr-middleware@0.5.3-rc.0

Documentation

Next SSR middleware

Koa-like middlewares for Next.js Server Side Rendering

NPM Dependency CI & CD

NPM

Versions

SemVer status MobX MobX i18n
>=0.7 ✅developing >=6.11 >=0.5
<0.7 ❌deprecated >=4 <6.11 <0.5

Middlewares

  1. Router
  2. Error logger
  3. JWT verifier
  4. Props cache
  5. i18n loader
  6. OAuth 2 signer (with common providers)
    1. GitHub

Usage

pages/user/[id].tsx

import {
    JWTProps,
    RouterProps,
    jwtVerifier,
    cache,
    errorLogger,
    router,
    translator
} from 'next-ssr-middleware';

import i18n from '../../model/Translation';
import { User, UserModel } from '../../model/User';

type UserDetailPageProps = User & JWTProps & RouterProps;

export const getServerSideProps = compose<{ id: string }, UserDetailPageProps>(
    jwtVerifier(), // set `JWT_SECRET` in `.env.local` first
    cache(),
    errorLogger,
    router,
    translator(i18n),
    async ({ params }) => {
        const props = await new UserModel().getOne(params!.id);

        return { notFound: !props, props };
    }
);

export default function UserDetailPage({
    jwtPayload,
    route,
    name,
    summary
}: UserDetailPageProps) {
    return (
        <>
            <h1>
                {name} - {route.params!.id}
            </h1>
            <p>{summary}</p>
        </>
    );
}

Cases

  1. https://github.com/idea2app/Next-Bootstrap-ts
  2. https://github.com/kaiyuanshe/kaiyuanshe.github.io
  3. https://github.com/kaiyuanshe/OpenHackathon-Web
  4. https://github.com/kaiyuanshe/OSS-toolbox