Commit 01aba0e0 authored by ChanHaeng Lee's avatar ChanHaeng Lee
Browse files

Add docs about `@fedify/nextjs`

parent 09360090
Loading
Loading
Loading
Loading
+1 −0
Original line number Diff line number Diff line
@@ -425,6 +425,7 @@ jobs:
          | @fedify/express  | ${{ steps.versioning.outputs.version }} | [JSR][jsr:@fedify/express]  | [npm][npm:@fedify/express]  |
          | @fedify/h3       | ${{ steps.versioning.outputs.version }} | [JSR][jsr:@fedify/h3]       | [npm][npm:@fedify/h3]       |
          | @fedify/nestjs   | ${{ steps.versioning.outputs.version }} |                             | [npm][npm:@fedify/nestjs]   |
          | @fedify/nextjs   | ${{ steps.versioning.outputs.version }} |                             | [npm][npm:@fedify/nextjs]   |
          | @fedify/postgres | ${{ steps.versioning.outputs.version }} | [JSR][jsr:@fedify/postgres] | [npm][npm:@fedify/postgres] |
          | @fedify/redis    | ${{ steps.versioning.outputs.version }} | [JSR][jsr:@fedify/redis]    | [npm][npm:@fedify/redis]    |
          | @fedify/sqlite   | ${{ steps.versioning.outputs.version }} | [JSR][jsr:@fedify/sqlite]   | [npm][npm:@fedify/sqlite]   |
+1 −0
Original line number Diff line number Diff line
@@ -70,6 +70,7 @@ The repository is organized as a monorepo with the following packages:
 -  *packages/postgres/*: PostgreSQL drivers (@fedify/postgres)
 -  *packages/redis/*: Redis drivers (@fedify/redis)
 -  *packages/nestjs/*: NestJS integration (@fedify/nestjs)
 -  *packages/nextjs/*: Next.js integration (@fedify/nextjs)
 -  *packages/sqlite/*: SQLite driver (@fedify/sqlite)
 -  *packages/testing/*: Testing utilities (@fedify/testing)
 -  *docs/*: Documentation built with Node.js and VitePress
+1 −0
Original line number Diff line number Diff line
@@ -193,6 +193,7 @@ The repository is organized as a monorepo with the following packages:
 -  *packages/postgres/*: PostgreSQL drivers (@fedify/postgres) for Fedify.
 -  *packages/redis/*: Redis drivers (@fedify/redis) for Fedify.
 -  *packages/nestjs/*: NestJS integration (@fedify/nestjs) for Fedify.
 -  *packages/nextjs/*: Next.js integration (@fedify/nextjs) for Fedify.
 -  *packages/sqlite/*: SQLite driver (@fedify/sqlite) for Fedify.
 -  *packages/testing/*: Testing utilities (@fedify/testing) for Fedify.
 -  *docs/*: The Fedify docs.  The docs are built with [Node.js] and
+75 −0
Original line number Diff line number Diff line
@@ -480,6 +480,81 @@ console.log("Elysia App Start!");
[Elysia]: https://elysiajs.com/


Next.js
------

*This API is available since Fedify 1.9.0.*

[Next.js] is a React framework that enables you to build server-rendered
and statically generated web applications.  Fedify has the `@fedify/nextjs`
module that provides a middleware to integrate Fedify with Next.js.  Create
an app with the following command using the Fedify CLI:

~~~~ sh
fedify init my-next-app

? Choose the JavaScript runtime to use › Node.js
? Choose the package manager to use › npm
? Choose the web framework to integrate Fedify with › Next.js
? Choose the key–value store to use for caching › In-memory
? Choose the message queue to use for background jobs › In-process
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No
~~~~

Then you can see the Next.js boilerplate code in the `my-next-app` directory.
But if you created a Next.js app with `create-next-app` before, you'll see
some differences in the code. There is a `middleware.ts` file in the
`my-next-app` directory, which is the entry point to the Fedify middleware
from the Next.js framework:


~~~~ typescript
import { fedifyWith } from "@fedify/nextjs";
import federation from "./federation";

export default fedifyWith(federation)(
/*
  function (request: Request) {
    // If you need to handle other requests besides federation
    // requests in middleware, you can do it here.
    // If you handle only federation requests in middleware,
    // you don't need this function.
    return NextResponse.next();
  },
*/
)

// This config needs because middleware process only requests with the
// "Accept" header matching the federation accept regex.
// More details: https://nextjs.org/docs/app/api-reference/file-conventions/middleware#config-object-optional
export const config = {
  runtime: "nodejs",
  matcher: [{
    source: "/:path*",
    has: [
      {
        type: "header",
        key: "Accept",
        value: ".*application\\\\/((jrd|activity|ld)\\\\+json|xrd\\\\+xml).*",
      },
    ],
  }],
};
~~~~

As you can see in the comment, you can handle other requests besides
federation requests in the middleware.  If you handle only federation requests
in the middleware, you can omit the function argument of `fedifyWith()`.
The `config` object is necessary to let Next.js know that the middleware
should process requests with the `Accept` header matching the federation
accept regex.  This is because Next.js middleware processes only requests
with the `Accept` header matching the regex by default.  More details can be
found in the [Next.js documentation](https://nextjs.org/docs/app/api-reference/file-conventions/middleware#config-object-optional).

[Next.js]: https://nextjs.org/


Custom middleware
-----------------

+1 −0
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@
    "@fedify/fedify": "workspace:",
    "@fedify/h3": "workspace:",
    "@fedify/nestjs": "workspace:",
    "@fedify/nextjs": "workspace:",
    "@fedify/postgres": "workspace:",
    "@fedify/redis": "workspace:",
    "@fedify/sqlite": "workspace:",
Loading