Next.js Discord

Discord Forum

How i can use express-http-proxy properly?

Unanswered
Little fire ant posted this in #help-forum
Open in Discord
Avatar
Little fire antOP
I'm trying to serve my Next.js app running on http://localhost:3000/feat-req to http://localhost:8080/. For that, I'm using express-http-proxy. While the page is being loaded correctly, I'm encountering hydration errors in the layout file, even though there are no such errors when running the app on localhost:3000.

Express Code:

import express from "express";
import proxy from "express-http-proxy";

const app = express();

app.use(
  "/*",
  proxy("http://localhost:3000/", {
    proxyReqPathResolver: (req) => {
      const newPath = req.originalUrl;
      console.log("🎯 path: ", newPath);
      if (newPath === "/") return "/feat-req";
      return newPath;
    }
  })
);

app.listen(8080, () => {
  console.log(`server is listening on localhost:8080`);
});


Error:

- Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected server HTML to contain a matching <img> in <main>.

<RootLayout>
  <html>
    <body>
      <MainLayout>
        <main>
        ^^^^^^
          <RouteBasedRenderer>
            <img>


RouteBasedRenderer.tsx

"use client";

import { usePathname } from "next/navigation";
import { ReactNode } from "react";

export default function RouteBasedRenderer({
  children,
  route
}: {
  children: ReactNode;
  route: string;
}) {
  const pathName = usePathname();
  if (route !== pathName) return <></>;
  return <>{children}</>;
}

9 Replies

Avatar
Brown bear
Can't you use the nextjs "rewrite" feature ?
Avatar
joulev
i believe the value of usePathname changes after that proxy
usePathname uses the value from the url in the browser
Avatar
Little fire antOP
no! i want my sub-domain map to site/some_route
i checked pathname value is same
Avatar
Brown bear
If you want subdomain.domain.com to work on www.domain.com/subpage, make subdomain.com redirect (also to make canonical url etc work correctly)
Avatar
Little fire antOP
would it not change path also or it is just like proxy?
Also, i managed to fix it using this code,

"use client";

import { usePathname } from "next/navigation";
import { ReactNode } from "react";

export default function RouteBasedRenderer({
  children,
  route
}: {
  children: ReactNode;
  route: string;
}) {
  const pathName = usePathname();
  return (
    <div className={route !== pathName ? "hidden" : "block"}>{children}</div>
  );
}
@Brown bear if want www.domain.com/subpage work on subdomain.domain.com. when some hit subdomain they should see ../subpage