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