Shopify App - Embedded App Navigation Bar adding trailing slashes to links, makes Next.js 404

[elsnerSantosh]

I fixed this issue by adding generic solution to my server.js.> > I am intercepting the request and remove the “/” except home or index route in embedded app. So I think this is generic way to resolve issue for all routes to fix this problem.

    router.get('*', verifyRequest(), async (ctx) => {
        if (ctx.url.slice(0, 2) != "/?") {
            ctx.url = ctx.url.replace("/?", "?");
        }
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
    });

Let me know if any issue or problem, Thank you.

@hedgerh

I’m super confused. Last night my app was working fine, but today I noticed that all of the navigation bar links are turning up 404s in my Next.js app.

The reason, I believe, is that despite creating a link like https://foo.ngrok.io/reports, the navigation bar turns that into something like https://foo-store.myshopify.com/admin/apps/foo/reports/, with a trailing slash. This then causes [https://foo.ngrok.io/reports/](https://foo.ngrok.io/reports/) to load instead of [https://foo.ngrok.io/reports](https://foo.ngrok.io/reports), which nextjs doesn’t currently seem to be able to handle when doing the initial server side render, causing a 404.

Curious why I just suddenly started experiencing this and what I can do to fix it, besides just not using the Navigation bar anymore. Not sure if something changed on the Shopify side, or on the Next.js side, but this seems to be an ongoing issue with Next.js, so did something change with Shopify? I haven’t changed these links in a couple of weeks, but they’re suddenly 404ing.