Create @fedify/nextjs to integrate with Next.js

.github/workflows/build.yaml

@@ -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/next     | ${{ steps.versioning.outputs.version }} |                             | [npm][npm:@fedify/next]     |
           | @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]   |

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 repomix-output.xml
 t.ts
 t2.ts
+.pnpm-store/

AGENTS.md

@@ -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/next/*: Next.js integration (@fedify/next)
  -  *packages/sqlite/*: SQLite driver (@fedify/sqlite)
  -  *packages/testing/*: Testing utilities (@fedify/testing)
  -  *docs/*: Documentation built with Node.js and VitePress

CHANGES.md

@@ -8,6 +8,21 @@ Version 1.9.0
 
 To be released.
 
+### @fedify/next
+
+ -  Created [Next.js] integration as the *@fedify/next* package.
+      [[#313] by Chanhaeng Lee]
+
+### @fedify/cli
+
+ -  Added `Next.js` option to `fedify init` command. This option allows users
+    to initialize a new Fedify project with Next.js integration.
+    [[#313] by Chanhaeng Lee]
+
+
+[Next.js]: https://nextjs.org/
+[#313]: https://github.com/fedify-dev/fedify/issues/313
+
 
 Version 1.8.5
 -------------

CONTRIBUTING.md

@@ -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/next/*: Next.js integration (@fedify/next) 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

docs/manual/integration.md

@@ -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/next`
+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/next";
+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
 -----------------
 

docs/package.json

@@ -8,6 +8,7 @@
     "@fedify/fedify": "workspace:",
     "@fedify/h3": "workspace:",
     "@fedify/nestjs": "workspace:",
+    "@fedify/next": "workspace:",
     "@fedify/postgres": "workspace:",
     "@fedify/redis": "workspace:",
     "@fedify/sqlite": "workspace:",

examples/next15-app-router/app/.well-known/[[...catchAll]]/route.ts

@@ -1,9 +1,9 @@
-import { fedifyRequestHanlder } from "~/shared/integrate-fedify";
+import { fedifyRequestHandler } from "~/shared/integrate-fedify";
 
 export {
-  fedifyRequestHanlder as DELETE,
-  fedifyRequestHanlder as GET,
-  fedifyRequestHanlder as PATCH,
-  fedifyRequestHanlder as POST,
-  fedifyRequestHanlder as PUT,
+  fedifyRequestHandler as DELETE,
+  fedifyRequestHandler as GET,
+  fedifyRequestHandler as PATCH,
+  fedifyRequestHandler as POST,
+  fedifyRequestHandler as PUT,
 };

examples/next15-app-router/app/fedify-activity-handler/[[...catchAll]]/route.ts

@@ -1,9 +1,9 @@
-import { fedifyRequestHanlder } from "~/shared/integrate-fedify";
+import { fedifyRequestHandler } from "~/shared/integrate-fedify";
 
 export {
-  fedifyRequestHanlder as DELETE,
-  fedifyRequestHanlder as GET,
-  fedifyRequestHanlder as PATCH,
-  fedifyRequestHanlder as POST,
-  fedifyRequestHanlder as PUT,
+  fedifyRequestHandler as DELETE,
+  fedifyRequestHandler as GET,
+  fedifyRequestHandler as PATCH,
+  fedifyRequestHandler as POST,
+  fedifyRequestHandler as PUT,
 };

examples/next15-app-router/shared/integrate-fedify.ts

@@ -12,11 +12,11 @@ import {
 import { keyPairsStore, relationStore } from "~/data/store";
 import { revalidatePath } from "next/cache";
 
-export const fedifyRequestHanlder = integrateFederation(() => {});
+export const fedifyRequestHandler = integrateFederation(() => {});
 
 const routePrefix = `/fedify-activity-handler`;
 
-const federation = createFederation<void>({
+const federation = createFederation({
   kv: new MemoryKvStore(),
 });
 

packages/cli/src/init.ts

@@ -14,6 +14,7 @@ const packagesMetaData: Record<`@fedify/${string}`, string> = {
   "@fedify/amqp": metadata.version,
   "@fedify/express": metadata.version,
   "@fedify/h3": metadata.version,
+  "@fedify/next": metadata.version,
 };
 
 const logger = getLogger(["fedify", "cli", "init"]);
@@ -85,7 +86,7 @@ const packageManagerLocations: Record<PackageManager, string | undefined> =
     ),
   );
 
-type WebFramework = "fresh" | "hono" | "express" | "nitro";
+type WebFramework = "fresh" | "hono" | "express" | "nitro" | "next";
 
 interface WebFrameworkInitializer {
   command?: [string, ...string[]] | [...string[], string];
@@ -435,6 +436,75 @@ To start the server, run the following command:
 Then, try look up an actor from your server:
 
   ${colors.bold(colors.green("fedify lookup http://localhost:3000/users/john"))}
+`,
+    }),
+  },
+  next: {
+    label: "Next.js",
+    runtimes: ["node"],
+    init: (_, __, packageManager) => ({
+      label: "Next.js",
+      runtimes: ["node"],
+      command: [
+        "npx",
+        "create-next-app@canary",
+        ".",
+        "--ts",
+        "--tailwind",
+        "--eslint",
+        "--app",
+        "--turbopack",
+        "--skip-install",
+      ],
+      dependencies: {
+        "@fedify/next": getLatestVersion("@fedify/next"),
+      },
+      devDependencies: {
+        "@types/node": "^20.11.2",
+      },
+      federationFile: "federation/index.ts",
+      loggingFile: "logging.ts",
+      files: {
+        "middleware.ts": `
+import { fedifyWith } from "@fedify/next";
+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).*",
+      },
+    ],
+  }],
+};
+`,
+      },
+      instruction: `
+To start the server, run the following command:
+
+  ${colors.bold(colors.green(packageManager + " run dev"))}
+Then, try look up an actor from your server:
+      ${colors.bold(colors.green("fedify lookup @john@localhost:3000"))}
 `,
     }),
   },

packages/fedify/README.md

@@ -99,6 +99,7 @@ Here is the list of packages:
 | [@fedify/express](/packages/express/)   | [JSR][jsr:@fedify/express]  | [npm][npm:@fedify/express]  | Express integration                     |
 | [@fedify/h3](/packages/h3/)             | [JSR][jsr:@fedify/h3]       | [npm][npm:@fedify/h3]       | H3 integration                          |
 | [@fedify/nestjs](/packages/nestjs/)     |                             | [npm][npm:@fedify/nestjs]   | NestJS integration                      |
+| [@fedify/next](/packages/next/)         |                             |                             | Next.js integration                     |
 | [@fedify/postgres](/packages/postgres/) | [JSR][jsr:@fedify/postgres] | [npm][npm:@fedify/postgres] | PostgreSQL driver                       |
 | [@fedify/redis](/packages/redis/)       | [JSR][jsr:@fedify/redis]    | [npm][npm:@fedify/redis]    | Redis driver                            |
 | [@fedify/sqlite](/packages/sqlite/)     | [JSR][jsr:@fedify/sqlite]   | [npm][npm:@fedify/sqlite]   | SQLite driver                           |