Issue with context parameters, SW.js returned?!

[Rodeveer]

Hi Next.js Community!

I've been playing around with Next.js for some time now and I really enjoy the 'easyness' of working with it!
Tho, since a few days I'm having some troubles with retrieving the param 'uid'. To give you a little bit more info about the project I'm having:

I've got a domain where all the pages are practically dynamic with dynamic content loaded from a headless cms. So the folder structure I've got looks like the following:

- index.tsx
- [uid].tsx
- [...uid].tsx

With this I'm expecting to get all the /this/and/that pages. Tho, everytime I load the page the uid returns: sw.js. I've got seriously no idea how that happend or why its happening, so my question here:

Some code that might come in handy; (This is from the [uid].tsx)

export const getServerSideProps = async (context: any) => {
    const client = createClient(context);

    let pageData = null;
    let menuData = null;
    let footerData = null;

    try {
        pageData = await client.getByUID('page', context.params.uid);
    } catch (error) {
        console.error('[Homepage][Page] Could not find data.', context.query);
    }

    return {
        props: {
            page: pageData,
            queryParameters: context.query
        }
    };
}

Thanks in advance! :)

[icyJoseph]

Catch all routes are very aggressive, and a top level catch all route will indeed, catch absolutely everything.

In your case a request for a service worker is arriving at Next.js.

Say for example that there's no public/favicon.ico file available in your public folder.

The catch all route, will then kick in and uid will be favicon.ico.

Again, in your case, the browser seems to have saved a service worker and it is making a request to get it.

You ought to be extremely careful with catch all routes at the root of the application, as they'll swallow most things.

You can use the resolvedUrl in the getServerSideProps handler context, to decide whether or not you are faced with a valid request. Alternatively, _middleware at the root, could also handle this type of requests.

[Rodeveer]

Catch all routes are very aggressive, and a top level catch all route will indeed, catch absolutely everything.

In your case a request for a service worker is arriving at Next.js.

Say for example that there's no public/favicon.ico file available in your public folder.

The catch all route, will then kick in and uid will be favicon.ico.

Again, in your case, the browser seems to have saved a service worker and it is making a request to get it.

You ought to be extremely careful with catch all routes at the root of the application, as they'll swallow most things.

You can use the resolvedUrl in the getServerSideProps handler context, to decide whether or not you are faced with a valid request. Alternatively, _middleware at the root, could also handle this type of requests.

That sounds logical. Though, I want to be able to have dynamic pages since the pages, as said, are dynamicly build with components that are coming from the headless cms (I'm using Prismic Slice machine for this).

How would you catch all the /something and not the sw.js or any other probably existing path from Root? As mentioned I've been playing around with it on a basic level.

[icyJoseph]

the resolvedUrl would equal /something or /favicon.icon - so you can negatively say, reject everything with .ext - to reject files, perhaps you want to reject urls that start with _next.

Of you could try to match the received paths against a regex.

[Rodeveer]

Yea I get that. Tho, I don't really know how to 'reject' files in the [uid].tsx 😅 You've got an example or documentation about that subject?

[icyJoseph]

Oh, you could just return {notFound: true}, which I think is the fair thing to return, because these assets don't exist, or you don't mind about them really. If the browser has an installed Service Worker from another project on that domain, why should this Next.js application care about it. Similarly, if I start to make requests to your application from the terminal, you should just give me 404's for paths that have no business meaning to you.

---

I'd recommend also thinking of using _middleware, if possible, to check the pathname of the request, and rewrite it to a simple file, which should remain itself unreachable (this last bit you can also control with _middleware). Assuming, you'd scope everything to a page called client-data.tsx

import { NextRequest, NextResponse } from "next/server";

export const middleware = async (req: NextRequest) => {
  const { pathname } = req.nextUrl;

  // prevent direct access to `/client-data`
  if (pathname.startsWith("/client-data")) {
    return new Response(null, { status: 404, statusText: "Not Found" });
  }

  const client = createClient(req);
  const isValid = await client.isValidPath(pathname)
 
  if (!isValid) {
    return new Response(null, { status: 404, statusText: "Not Found" });
  }

  if (
    pathname.startsWith("/api") || //  exclude all API routes
    pathname.startsWith("/static") || // exclude static files
    pathname.includes(".") // exclude all files in the public folder
  ) {
    return NextResponse.next();
  }

  req.nextUrl.searchParams.set("pathname", pathname);

  const url = req.nextUrl.clone();
  url.pathname = "/client-data";

  return NextResponse.rewrite(url); // should include a query param called pathname
 // which you can use in `/client-data` to render as you require. 
};

[Rodeveer]

Much appreciated! Works. Kinda need to get the hang of it and I'll look into the 'middleware' of Next.js! 👍