Static links do not work in production, dynamic links do
Answered
maitexu posted this in #help-forum
maitexuOP
Hi! It's pretty simple. After a lot of debugging because some of my links didn't work, i figured out that static links stop working in production, but dynamics do. i made a simple test navbar
and the ones with {id} work, the rest dont. Anybody know why? Im using next 14
function NavCaca({id}) {
return (
<div className="flex flex-row h-12">
<Link href="/dashboard">das</Link>
<Link href="/dashboard/games">ga</Link>
<Link href="/dashboard/reviews">rev</Link>
<Link href="/dashboard/profiles">pro</Link>
W W W W W W W W
<Link href={/dashboard/${id}}>das</Link>
<Link href={/dashboard/games/${id}}>ga</Link>
<Link href={/dashboard/reviews/${id}}>rev</Link>
<Link href={/dashboard/profiles/${id}}>pro</Link>
</div>
);
}and the ones with {id} work, the rest dont. Anybody know why? Im using next 14
Answered by Clown
1. Remove that basePath. Its not needed. Test it.
2. Try going to canary instead. Test it.
3. Technically yes you can go full dynamic: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
2. Try going to canary instead. Test it.
3. Technically yes you can go full dynamic: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
24 Replies
Can you try using this flag?: https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash
maitexuOP
I have! still nothing. if i ctrl+click the link, it opens correctly to the correct page in another tab on the browser. the same way as if i inspect the component with f12, there's correctly an <a> tag, and if i click the href redirects me to the page. it's just clicking it on the web that does not work..
maybe my middleware is messing something up, but using <a> average tags work, and the <Link> components work in run dev.
Try a different browser really quick. Also check if a network request goes off when you click a static link. If nothing works try going to latest canary or downgrading the nextjs version as it may very well be a bug
maitexuOP
did try with edge, and didnt work anyways. lemme check the network request!
(you can also open up a GitHub issue if it doesn't already exist in that case)
@Clown Try a different browser really quick. Also check if a network request goes off when you click a static link. If nothing works try going to latest canary or downgrading the nextjs version as it may very well be a bug
maitexuOP
i was using 14.06 or sm like that i think, and now upgraded to latest to see if it was a bug but still nothing
Seems like its fetching currently. Dont know what the issue is honestly. Try upgrading and downgrading.
maitexuOP
okay, thank you so much
maitexuOP
excuse me @Clown, maybe there's something on the config that may be messing it up?
/** @type {import('next').NextConfig} */
const nextConfig = {
basePath: "",
typescript: {
ignoreBuildErrors: true,
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.igdb.com',
port: '',
}
]
},
distDir: 'build',
trailingSlash: true,
experimental: {
missingSuspenseWithCSRBailout: false,
},
}
module.exports = nextConfigI dont see anything that could cause it honestly. Maybe that experimental flag is messing with it? It shouldn't be tbh.
maitexuOP
nope, when i was trying different versions of 14 i had to add it to prevent an error
welp, ill keep searching, thank you so much π
Doesn't just using a suspension boundary around the part that uses searchParam fix that problem?
maitexuOP
oh wait, one last thing! this is the result when building the project:
β β / 3.85 kB 198 kB
β β /_not-found 879 B 88.5 kB
β Ζ /api/auth/[...nextauth] 0 B 0 B
β Ζ /api/auth/register 0 B 0 B
β β /dashboard 2.19 kB 100 kB
β β /dashboard/games 16.6 kB 249 kB
β Ζ /dashboard/games/[id] 12.5 kB 212 kB
β β /dashboard/profiles 4.23 kB 164 kB
β Ζ /dashboard/profiles/[id] 3.2 kB 341 kB
β β /dashboard/reviews 2.43 kB 207 kB
β Ζ /dashboard/reviews/[id] 992 B 338 kB
β β /dashboard/settings 358 B 88 kB
β Ζ /login 3.28 kB 140 kB
is there any way to just make all pages dynamic? it's super clunky but it would solve my problem
β β / 3.85 kB 198 kB
β β /_not-found 879 B 88.5 kB
β Ζ /api/auth/[...nextauth] 0 B 0 B
β Ζ /api/auth/register 0 B 0 B
β β /dashboard 2.19 kB 100 kB
β β /dashboard/games 16.6 kB 249 kB
β Ζ /dashboard/games/[id] 12.5 kB 212 kB
β β /dashboard/profiles 4.23 kB 164 kB
β Ζ /dashboard/profiles/[id] 3.2 kB 341 kB
β β /dashboard/reviews 2.43 kB 207 kB
β Ζ /dashboard/reviews/[id] 992 B 338 kB
β β /dashboard/settings 358 B 88 kB
β Ζ /login 3.28 kB 140 kB
is there any way to just make all pages dynamic? it's super clunky but it would solve my problem
@Clown Doesn't just using a suspension boundary around the part that uses searchParam fix that problem?
maitexuOP
yep, but i still didn't make it work so i just added this. im kind of a rush rn because i have to deliver this project today so im just panicking
1. Remove that basePath. Its not needed. Test it.
2. Try going to canary instead. Test it.
3. Technically yes you can go full dynamic: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
2. Try going to canary instead. Test it.
3. Technically yes you can go full dynamic: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
Answer
Using
force-dynamic in the layout should force everything to be dynamic.maitexuOP
well
@Clown Using `force-dynamic` in the layout *should* force everything to be dynamic.
maitexuOP
this was live saving
(just to provide a lil context, this is my final career project so i was balding rn)
it works perfectly, and there's no reloads between pages now
thank you so so much π