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

[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/` to load instead of `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.

[voidzero]

Same problem here, it was working well yesterday but now links are broken.

[hedgerh]

Glad to hear it's not just me.  It was broken a couple days ago, then was fine earlier today, then went back to being broken.

I started a new topic with "Bug" in the title to hopefully get more visibility on it.

[amardeep]

Same here .. getting 404 while navigating through navigation bar. I have a Next.js app. Everything was working fine until yesterday and I haven't made any change. Seems like a bug.. 

[Hoegnison]

I am expierencing the same issue and also I think your idea is correct. The strange thing is, that when I first created the app on Thursday it worked like a champ. I had multiple reboots and also restarted ngrok a few times (I have a paid plan with a reserved url, so it shouldnt matter).

Now I wanted to continue work and suddenly I am getting 404 for all my navigation links.

The app is embedded. White listed urls are set up. Atuh. and install is also working. Also the redirect to the index.

[Hoegnison]

Btw I temporarly fixed this issue by adding some code to my server.js.

The page I want to navigate to is named "template". The route is "/template" and shopify requests "/template/".

My server.js is very basic and is basically the same as the tutorial config: https://github.com/shopify/shopify-demo-app-node-react/

I am intercepting the request and remove the "/". I am new to react and nextjs. So if there is a more elegant way to fix this problem, feel free to tell me. But this works for now.

  router.get('*', verifyRequest(), async (ctx) => {

    if (ctx.url.includes("/template/")) {
      ctx.url = ctx.url.replace("/template/", "/template");
    }
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

[chrisandrewca]

Thanks for the fix!

[hedgerh]

Can you all check your links and see if this has been rolled back?  They aren't showing up with the extra `/` anymore for me.

Looks like they put in a fix for this other issue, so maybe that includes what we're seeing? https://community.shopify.com/c/Shopify-APIs-SDKs/Embedded-app-TitleBar-links-are-wrong-when-app-URL...

[Hoegnison]

Yes it is fixed.

[breckskier]

I am still seeing this. The link in the embedded navigation, has a trailing slash, causing next.js to 404. It seems like it was fixed for some people? 

[amardeep]

Yes. Starting to see this again today!! All our apps are affected by this. 

Team Shopify: Please look into this and resolve. Thanks. 

[DannyUWP]

If you're using next.js dynamic routing and want to remove the trailing slash add this before you handle the request: 

if (ctx.url.includes("/?")) {
  if (ctx.url.substring(0, 2) != '/?') {
    ctx.url = ctx.url.replace("/?", "?") // Remove trailing slash before params          
    ctx.url = ctx.url.replace(/\/\s*$/, "") // Remove trailing slash at the end
  }
}

You probably don't need to remove the trailing slash at the end but it's there just in case

[leighb4rnes]

Can confirm I am seeing this as of yesterday as well. 

[amardeep]

Thanks for the fix! I can confirm that this workaround by @DannyUWP  is working fine. 👍🏻

If you're using next.js dynamic routing and want to remove the trailing slash add this before you handle the request: 

if (ctx.url.includes("/?")) {
  if (ctx.url.substring(0, 2) != '/?') {
    ctx.url = ctx.url.replace("/?", "?") // Remove trailing slash before params          
    ctx.url = ctx.url.replace(/\/\s*$/, "") // Remove trailing slash at the end
  }
}

You probably don't need to remove the trailing slash at the end but it's there just in case

[leighb4rnes]

yup could override the routing, wont work for our setup exactly as the dev environments and live handle these differently. 
Think we may just have to rip out the embedded nav and build it into the app. I wander how may apps have broken silently with this?

[hedgerh]

I completely migrated away from using Next.js so haven't been having the issue.  it's ridiculous that this keeps surfacing.

[breckskier]

@hedgerh I am curious about what you are using instead. While overall I like Next.js, the Shopify tutorials keep changing and aren't up to date, and now this whole thing with the links is making it difficult to not only get something to work, but to keep it working and hope that Shopify doesn't break things yet again. 

[hedgerh]

@breckskier I basically took react + next out of it.  Instead, I just serve up plain html after passing data in to it with template strings.  You could have koa use a view engine to serve up templates.  The important part is that you use the shopify app bridge on the client side if you want to embed your app in the shopify admin.

This is a little old, but check this out if you want a taste of how to set something up that isn't just a Next.js app:  https://github.com/Shopify/app-bridge-tutorial

It has three branches.  One of them is minimal react, one is no react at all.  I kinda based mine off the shopify cli boilerplate and this one.

I went static html bc my ui is pretty simple.  Just serves up iframes.

Happy to go into more detail or help however I can.  It was a pain to figure out!

If you stick with Next, you should set something up in Koa to remove the trailing `/`s off of any urls.  that should fix the issue.

[hedgerh]

FYI looks like someone fixed it.  Can someone from Shopify please comment on this?? Also, can you please put tests around this?!  This keeps breaking.

[hannachen]

Hi @hedgerh 👋 Hanna here from the App Bridge team. Thank you and everyone here for your patience when it comes to our delayed response on this topic. This issue was a regression (made by me personally 😥). Unfortunately, the bug was reintroduced in a complex part of App bridge that was undergoing changes. There were test cases to cover this issue, but the naming didn't capture the key detail it was meant to cover. As a result, despite triple checking the changes, this case was handled incorrectly. The bug was fixed last Friday, but given the severity of the bug, it should have been fixed much sooner.

The team is in the process of renaming tests to be more clear of what's expected in order to prevent this from happening again.

[breckskier]

@hedgrh thanks so much! I'll look into that.

It does appear to be fixed for now, but then again they said it was fixed before, so who knows how long it will be stable.

[leighb4rnes]

Since next now has the /api handlers there is little reason for koa, in there other than to fix thia, the other hacks won't really work if you have any complexity to your state managment eg the _error page hack that people have used in next.

Basically this is the first time I have seen this trying to use the nav bar, but from the treads it seems to be a recurring issue, and if it's likely to happen ongoing, I think the safest would be to to add the nav into the app. Maybe some one from Shopify can comment on if they are likely to switch to the enforced trailing slashes.

[johnkmeas]

I am seeing this today too.

[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 wrote:

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/` to load instead of `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.

---

[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 wrote:

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/` to load instead of `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.

---

[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 wrote:

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/` to load instead of `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.

---

[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 wrote:

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/` to load instead of `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.

---