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

Highlighted
Shopify Partner
15 1 18

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.

2 Likes
Highlighted
Tourist
3 1 1

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

0 Likes
Highlighted
Shopify Partner
15 1 18

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.

0 Likes
Highlighted

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.. 

Beautifully designed posts for social media. Inboxed daily!
Shopify App: Automatic Post Designer
0 Likes
Highlighted
Shopify Partner
5 0 1

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.

0 Likes
Highlighted
Shopify Partner
5 0 1

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;
  });
1 Like
Highlighted
Shopify Partner
9 0 9

Thanks for the fix!

1 Like
Highlighted
Shopify Partner
15 1 18

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...

1 Like
Highlighted
Shopify Partner
5 0 1

Yes it is fixed.

0 Likes
Highlighted
Shopify Partner
11 0 4

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? 

2 Likes