Document using the Dapr SDK with Next.js

[shubham1172]

Describe the proposal

There have been issues where users want to use Next.js and Dapr SDK together, examples

• Next.js DaprServer Module not found: Can't resolve 'crypto' #584
• ReferenceError: self is not defined #579
• Next.js app fails during build with Error: DAPR_SIDECAR_COULD_NOT_BE_STARTED #566

Based on the last two issues, there seem to be multiple workarounds (like using instrumentation logic, or using serverComponentsExternalPackages). This issue is to figure out next.js paradigms and document how it can be used with the Dapr SDK in different ways.

[i5shuyi]

Regarding issue #584 I've submitted a pull request that replaces the crypto module with the Web Crypto API. As for issue #579 , it can be addressed by modifying the serverComponentsExternalPackages/webpack configuration. Issue #566 can be resolved by specifying the 'dynamic' option in the Route Segment Config. Additionally, I have some ideas about invoking Next.js or other framework APIs as services, outlined below:

I'm working on making @dapr/dapr support more frameworks and runtimes (Next.js / Nuxt.js / Astro / Deno ...). My idea is to have @dapr/dapr follow the WinterCG specification (100% implementation in Node.js), and exposing request handling interfaces independent of Express. This interface will accept a Request object and return a Response object. It looks like this: (req: Request) => Promise<Response>.

Thanks to the new request handling implementation following the WinterCG specification, taking over requests in frameworks like Next.js / Nuxt.js / Astro is as easy as eating and drinking.

Next.js example

Create app/[[...slugs]]/route.ts inside app router

// app/[[...slugs]]/route.ts
import { DaprServer } from "@dapr/dapr";

const daprServer = new DaprServer();

export const GET = daprServer.handle;
export const POST = daprServer.handle;

Astro example

Create pages/[...slugs].ts

import { DaprServer } from "@dapr/dapr";

const daprServer = new DaprServer();

const handle = ({ request }: { request: Request }) => daprServer.handle(request);

export const GET = handle;
export const POST = handle;

In Node.js HTTP frameworks, the request objects are mostly instances of the http.IncomingMessage class. We can internally implement a adapter to transform (req: Request) => Promise<Response> into (req: IncomingMessage, res: ServerResponse, fn?: Function) => void.

Express example

import express from "express";
import { DaprServer } from "@dapr/dapr";

const app = express();
const daprServer = new DaprServer();

app.use(dapr.handleNodeRequestAndResponse);

app.listen(300, () => {
  console.log("Server running on port 3000");
});

Koa example

import Koa from "koa";
import { DaprServer } from "@dapr/dapr";

const app = new Koa();
const daprServer = new DaprServer();

app.use(async ctx => {
  const response = await server.handleNodeRequest(ctx.req);

  ctx.status = response.status;
  
  response.headers.forEach((value, key) => {
    ctx.append(key, value);
  });

  ctx.body = response.body;
});

app.listen(4000, () => {
  console.log("Server running on port 4000");
});

[XavierGeerinck]

Hi @xAmast , thank you for your explanation here!

Could you go a bit into your use case as well? I'd love to understand more about what you are trying to do here.

The reason I am asking is that it's clear from a "I want to use Dapr to invoke other microservices / ... in my Next.js server actions (Dapr Client)". Proposal wise however, it sounds more as "I want to use Next.js and bind Dapr to it for receiving microservice invocation (Dapr Server)"

Having both as an answer is perfectly valid as well, would just love to make a proposal that can result in a solution that fits everyone as best as possible.

[dapr-bot]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in the next 7 days unless it is tagged (pinned, good first issue, help wanted or triaged/resolved) or other activity occurs. Thank you for your contributions.

[dapr-bot]

This issue has been automatically closed because it has not had activity in the last 67 days. If this issue is still valid, please ping a maintainer and ask them to label it as pinned, good first issue, help wanted or triaged/resolved. Thank you for your contributions.

[dapr-bot]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in the next 7 days unless it is tagged (pinned, good first issue, help wanted or triaged/resolved) or other activity occurs. Thank you for your contributions.