Proxy seems to be ok in DEVELOPMENT but in PRODUCTION isnt working
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
On my app, if i start it on my pc on localhost everything works just fine. I must say that i have an backend in fastapi that helds all the logic and works thru api with my frontend.
But on my VPS if i run the app in production mode, the proxy seems not to work. I can access pages that normally requires authentication. Is there a problem with the proxy? Beacuse im 6 hours into debugging and thats the conclusion ive reached.
But on my VPS if i run the app in production mode, the proxy seems not to work. I can access pages that normally requires authentication. Is there a problem with the proxy? Beacuse im 6 hours into debugging and thats the conclusion ive reached.
17 Replies
Brown bearOP
{
"name": "typescript_bloxit",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@supabase/supabase-js": "^2.83.0",
"@svgr/webpack": "^8.1.0",
"motion": "^12.23.24",
"next": "^16.1.1",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"sonner": "^2.0.7",
"zustand": "^5.0.8"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"babel-plugin-react-compiler": "1.0.0",
"baseline-browser-mapping": "^2.8.32",
"eslint": "^9",
"eslint-config-next": "16.0.1",
"tailwindcss": "^4",
"typescript": "^5"
}
}
"name": "typescript_bloxit",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@supabase/supabase-js": "^2.83.0",
"@svgr/webpack": "^8.1.0",
"motion": "^12.23.24",
"next": "^16.1.1",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"sonner": "^2.0.7",
"zustand": "^5.0.8"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"babel-plugin-react-compiler": "1.0.0",
"baseline-browser-mapping": "^2.8.32",
"eslint": "^9",
"eslint-config-next": "16.0.1",
"tailwindcss": "^4",
"typescript": "^5"
}
}
@Brown bear {
"name": "typescript_bloxit",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@supabase/supabase-js": "^2.83.0",
"@svgr/webpack": "^8.1.0",
"motion": "^12.23.24",
"next": "^16.1.1",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"sonner": "^2.0.7",
"zustand": "^5.0.8"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"babel-plugin-react-compiler": "1.0.0",
"baseline-browser-mapping": "^2.8.32",
"eslint": "^9",
"eslint-config-next": "16.0.1",
"tailwindcss": "^4",
"typescript": "^5"
}
}
can you share a screenshot of your folder structure (you can collapse the /app folder) and also a screenshot of your proxy
Brown bearOP
proxy is setted good
as i told, on localhost there is no problem
but when i run the app on a VPS it seems that it doesnt work
@B33fb0n3 can you share *a screenshot* of your folder structure (you can collapse the /app folder) and also a screenshot of your proxy
Bombay
My proxy is quite simple, and it works as it should on
next dev.//! FIXME (27/12/2025): doesn't run in prod. environment.
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { sendPageViewServer } from "@/lib/analytics";
export async function proxy(request: NextRequest) {
if (
// Exclude API routes
!request.nextUrl.pathname.startsWith("/api") &&
// Exclude Next.js internal assets (JS, CSS, etc)
!request.nextUrl.pathname.startsWith("/_next") &&
// Exclude dashboard/admin routes
!request.nextUrl.pathname.startsWith("/dashboard") &&
// Exclude static files with extensions (images, fonts, etc)
!request.nextUrl.pathname.includes(".")
) {
// Send pageview data to analytics backend
sendPageViewServer({
path: request.nextUrl.pathname,
userAgent: request.headers.get("user-agent"),
}).catch(() => {
// Pass
});
}
return NextResponse.next();
}On dev it works.
@Bombay My proxy is quite simple, and it works as it should on `next dev`.
ts
//! FIXME (27/12/2025): doesn't run in prod. environment.
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { sendPageViewServer } from "@/lib/analytics";
export async function proxy(request: NextRequest) {
if (
// Exclude API routes
!request.nextUrl.pathname.startsWith("/api") &&
// Exclude Next.js internal assets (JS, CSS, etc)
!request.nextUrl.pathname.startsWith("/_next") &&
// Exclude dashboard/admin routes
!request.nextUrl.pathname.startsWith("/dashboard") &&
// Exclude static files with extensions (images, fonts, etc)
!request.nextUrl.pathname.includes(".")
) {
// Send pageview data to analytics backend
sendPageViewServer({
path: request.nextUrl.pathname,
userAgent: request.headers.get("user-agent"),
}).catch(() => {
// Pass
});
}
return NextResponse.next();
}
Bombay
Weird... I've had some code before that had chance to be invalid, once I removed the potentially null data it started to work.
@B33fb0n3 can you share your `matcher` config?
Bombay
Heya, as I mentioned above, it seems if you have some data that may be invalidated it won't work in production environment. Not sure if that's really the case? But I removed about 20% and now it started to work.
@Bombay Heya, as I mentioned above, it seems if you have some data that may be invalidated it won't work in production environment. Not sure if that's really the case? But I removed about 20% and now it started to work.
that wouldnt make any sense. Especially that you have no data fetching in your proxy
Bombay
I know...
But I haven't changed anything else.
I facing issue with token form cookies in
I've use
this work fine in
(Note: My Frontend and Backend are Deployed on different domains like Frontend on
proxy.ts at production .I've use
const token = request.cookies.get("access_token")?.value;this work fine in
localhost but undefine in production as their is token and apis are working but proxy restricting me to access protected pages. Proxy.ts:import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
const PUBLIC_AUTH_PATHS = [
"/signin",
"/signup",
"/",
"/forgot-password",
"/forgot-password/verify",
"/forgot-password/confirm",
];
export function proxy(request: NextRequest) {
const { pathname } = request.nextUrl;
const token = request.cookies.get("access_token")?.value;
console.log("token ==>", token);
const isAuthPage = PUBLIC_AUTH_PATHS.some(
(p) => pathname === p || (p !== "/" && pathname.startsWith(`${p}/`)),
);
if (!token && !isAuthPage) {
return NextResponse.redirect(new URL("/signin", request.url));
}
// logged in
if (token && (pathname === "/signin" || pathname === "/signup")) {
return NextResponse.redirect(new URL("/", request.url));
}
return NextResponse.next();
}
export const config = {
matcher: [
"/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico|css|js)$).*)",
],
};cookies:response.set_cookie(
key="access_token",
value=jwt_token,
httponly=True,
secure=True,
samesite="none",
path="/", max_age=settings.ACCESS_TOKEN_EXPIRE_DAYS * 60 * 60 * 24,
)(Note: My Frontend and Backend are Deployed on different domains like Frontend on
vercel and Backend on Render)