Is there a way to get the pathname in getServerSideProps?

Unanswered

American Chinchilla posted this in #help-forum

American ChinchillaOP

2023-11-14T17:13:38.000Z

Hey! I'm trying to figure out if there's any way to access the pathname in getServerSideProps.

I'm integrating our feature flag and dynamic config system into our nextjs app, and one feature which has been requested is the ability to toggle features independently for different paths within the app. As a result, the feature flag system needs to know the pathname.

For CSR, adding this to the app page component works as expected:

const OnPathChange = () => {
  const router = useRouter();
  const pathname = router.pathname;

  React.useEffect(() => {
    updateIdentity({path: pathname}); // sends the path to the feature flag library
  }, [pathname]);

  return null;
};

However, I can't figure out the equivalent for SSR. Our SSR setup has many middleware functions which are imported and shared across dozens of paths, something like this:

const middlewares = applyMiddlewares(
  getUser,
  isUserAdmin,
  syncCookiePreferences,
  getPageProps
);

export const getServerSideProps = async (context) => await middlewares(context);

The middlewares(context) call just loops over its arguments to applyMiddlewares and calls them in sequence, passing the context object through to each.

We need the flag system to be available inside these middlewares, and therefore the middleware needs to know the pathname, and it needs to match the router.pathname resolved in the client.

Ideally we'd be able to do this inside applyMiddlewares so we know it's always available, but the closest thing I've found is context.resolvedUrl, which doesn't always match the actual paths since it includes resolved params.

I've found a couple of github issues asking about this previously, and they didn't really get a satisfying conclusion, and they're from a while back - wondering whether there's something available now!

- https://github.com/vercel/next.js/discussions/18885
- https://github.com/vercel/next.js/discussions/36143

8 Replies

Peterbald

2023-11-14T17:23:41.000Z

You can get the pathname in middleware like this.
req.nextUrl.pathname

req's type is NextRequest from next/server

American ChinchillaOP

2023-11-14T17:25:30.000Z

ooh that'd be perfect

will test and confirm in a second

Peterbald

2023-11-14T17:26:20.000Z

import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs';
import { NextRequest, NextResponse } from 'next/server';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareSupabaseClient({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session) {
    const redirectUrl = req.nextUrl.clone();
    redirectUrl.pathname = '/auth/signin';
    redirectUrl.searchParams.set(

redirectedFrom

, req.nextUrl.pathname);
    return NextResponse.redirect(redirectUrl);
  }

  return res;
}

export const config = {
  matcher: ['/app/:path*', '/account'],
};

This is one example of middleware of Next.js project

American ChinchillaOP

2023-11-14T17:52:16.000Z

hmm that doesn't seem to be working for me

the middleware only has the context object as an argument (https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props), and the req attached to that does not have nextUrl

i guess "middleware" might not be the correct name for it - it's just the term that the people who wrote this app used for it! it's actually essentially a getServerSideProps function, just split into smaller chunks