How to implement the init$ function

[kooooo1tktn]

Question

Hello to the development team of @lazarv/react-server.

We are currently trying to implement the init$ function described in the documentation, but it is not working as expected. Any advice on this issue would be appreciated.

https://react-server.dev/ja/router/server-routing#middlewares

Implemented.

I have implemented the init$ function in src/app/index.tsx as follows.

“use server”;.

import { redirect } from “@lazarv/react-server”;

export async function init$() {
  console.log(“[INIT$] Function called during initialization”);

  return async function middleware(context) {
    “use server”;

    try {
      console.log(“[INIT$-MW] Context received”);

      if (context?.url instanceof URL) {
        const pathname = context.url.pathname;
        console.log(“[INIT$-MW] Path detected:”, pathname);

        if (pathname.includes(“/dashboard”)) {
          console.log(“[INIT$-MW] Redirecting dashboard -> login”); return redirect(“/login”)
          return redirect(“/login”); }
        }
      }
    } catch (err) {
      console.error(“[INIT$-MW] Error:”, err); }
    }
    } return undefined; }
  }; }
}

Problems occurring.

1. The INIT$ function is not executed: No [INIT$] or [INIT$-MW] logs are displayed during initialization or request processing.

2. File detection status: [INIT$] or [INIT$-MW] is not displayed.

   [react-server] Adding source file index.tsx to router 📁.
   

   The file itself is added to the router, but the init$ function is not executed.

What we tried

1. add “use server” directives to the beginning of the file and to the internal functions
2. renamed the files index.ts, index.tsx, and index.js.

Questions

1. what is the exact way to implement the init$ function correctly?
   Is there a recommended pattern for implementing the init$ function?

On the other hand, the middleware implementation by middleware.ts is working fine. Any further information on how to implement the init$ function and any limitations in the current version would be greatly appreciated.

Thank you in advance.

[lazarv]

Hi @kooooo1tktn!

To make init$ work, you need to export it from your entry module. Based on your description, you use the built-in file-system based router, which supports middleware files instead of the init$ function.

The init$ function only works when using @lazarv/react-server directly with a React Server Component entry, like react-server ./App.jsx and the App.jsx file exports an init$ function.

You don't need to add a "use server" directive in middlewares or the entry module, as this directive exposes all exported functions from a module to be consumable as server functions, which are callable by a client.

You can use any HTTP context helpers the framework provides inside a middleware. You don't need to manually extract information from the input HTTP context received in the handler function returned by init$.

The documentation app uses similar logic as you have in your provided code, so please check it out at https://github.com/lazarv/react-server/blob/main/docs/src/pages/(i18n).middleware.mjs

Documentation regarding middlewares using the file-system based router is at https://react-server.dev/ja/router/middlewares

I hope this helps. Please let me know if any part needs more clarification.