https://github.com/idea2app/next-ssr-middleware
Koa-like middlewares for Next.js Server Side Rendering
https://github.com/idea2app/next-ssr-middleware
koa middleware nextjs ssr
Last synced: about 2 months ago
JSON representation
Koa-like middlewares for Next.js Server Side Rendering
- Host: GitHub
- URL: https://github.com/idea2app/next-ssr-middleware
- Owner: idea2app
- Created: 2023-08-07T22:45:59.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-03T19:51:23.000Z (about 2 months ago)
- Last Synced: 2025-04-03T20:34:12.475Z (about 2 months ago)
- Topics: koa, middleware, nextjs, ssr
- Language: TypeScript
- Homepage: https://idea2app.github.io/Next-SSR-middleware/
- Size: 154 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# Next SSR middleware
[Koa][1]-like middlewares for [Next.js][2] **Server Side Rendering**
[][3]
[][4]
[][5]
## Versions
| SemVer | status | Next.js | MobX | [MobX i18n][6] |
| :----------: | :----------: | :-------: | :---------: | :------------: |
| `>=0.9` | ✅developing | `>=15` | `>=6.11` | `>=0.5` |
| `>=0.7 <0.9` | ❌deprecated | `>=9 <15` | `>=6.11` | `>=0.5` |
| `<0.7` | ❌deprecated | `>=9 <15` | `>=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
### Page router
#### `pages/user/[id].tsx`
```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 (
<>
{name} - {route.params!.id}
{summary}
>
);
}
```
### App router
#### `middleware.ts`
```ts
import { NextRequest, NextResponse } from 'next/server';
import { parseHeaders } from 'next-ssr-middleware';
export const config = {
// Matcher ignoring `/_next/`, `/api/` & icons
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico|apple-icon|icon).*)'
]
};
export const middleware = ({ headers }: NextRequest) =>
NextResponse.next({ headers: parseHeaders(headers) });
```
#### `app/page.tsx`
```tsx
import { compose, withMiddleware, ServerProps } from 'next-ssr-middleware';
const getServerSideProps = compose(async () => {
const props = await (
await fetch('https://api.github.com/orgs/idea2app')
).json();
return { props };
});
const HomePage = withMiddleware(getServerSideProps, Home);
export default HomePage;
async function Home({ params, searchParams, ...props }: ServerProps) {
return (
<>
Home
{JSON.stringify(props, null, 4)}
>
);
}
```
## 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
[1]: https://koajs.com/
[2]: https://nextjs.org/
[3]: https://libraries.io/npm/next-ssr-middleware
[4]: https://github.com/idea2app/Next-SSR-middleware/actions/workflows/main.yml
[5]: https://nodei.co/npm/next-ssr-middleware/
[6]: https://github.com/idea2app/MobX-i18n