{summary}
\n \n );\n}\n```\n\n### App router\n\n#### `middleware.ts`\n\n```ts\nimport { NextRequest, NextResponse } from 'next/server';\nimport { parseHeaders } from 'next-ssr-middleware';\n\nexport const config = {\n // Matcher ignoring `/_next/`, `/api/` & icons\n matcher: [\n '/((?!api|_next/static|_next/image|favicon.ico|apple-icon|icon).*)'\n ]\n};\nexport const middleware = ({ headers }: NextRequest) =>\n NextResponse.next({ headers: parseHeaders(headers) });\n```\n\n#### `app/page.tsx`\n\n```tsx\nimport { compose, withMiddleware, ServerProps } from 'next-ssr-middleware';\n\nconst getServerSideProps = compose(async () => {\n const props = await (\n await fetch('https://api.github.com/orgs/idea2app')\n ).json();\n\n return { props };\n});\n\nconst HomePage = withMiddleware(getServerSideProps, Home);\n\nexport default HomePage;\n\nasync function Home({ params, searchParams, ...props }: ServerProps) {\n return (\n <>\n{JSON.stringify(props, null, 4)}\n \n );\n}\n```\n\n### API router\n\nLocated in [`pages/api/` of a Next.js project][8] or [`api/` of a Vercel serverless project][9].\n\n#### `pages/api/echo.ts`\n\n```ts\nimport { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';\n\nexport const config = { api: { bodyParser: false } };\n\nconst router = createKoaRouter(import.meta.url);\n\nrouter\n .get('/', async context => {\n context.body = context.request.query;\n })\n .post('/', async context => {\n context.status = 201;\n context.body = Reflect.get(context.request, 'body');\n });\n\nexport default withKoaRouter(router);\n```\n\n## Cases\n\n1. https://github.com/idea2app/Next-Bootstrap-ts\n2. https://github.com/idea2app/Lark-Next-Bootstrap-ts\n3. https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io\n4. https://github.com/kaiyuanshe/kaiyuanshe.github.io\n5. https://github.com/kaiyuanshe/OpenHackathon-Web\n6. https://github.com/kaiyuanshe/OSS-toolbox\n\n[1]: https://koajs.com/\n[2]: https://nextjs.org/\n[3]: https://libraries.io/npm/next-ssr-middleware\n[4]: https://github.com/idea2app/Next-SSR-middleware/actions/workflows/main.yml\n[5]: https://npm.im/next-ssr-middleware/\n[6]: https://github.com/idea2app/MobX-i18n\n[7]: https://github.com/idea2app/MobX-i18n#server-side-rendering-nextjs-example\n[8]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/tree/main/pages/api\n[9]: https://github.com/idea2app/Vercel-Node-serverless/tree/master/api\n","readmeFilename":"ReadMe.md"}