nextjs - 💡(How to fix) Fix <Link> doesn't work in global-not-found.tsx [2 comments, 3 participants]

TL;DR

The issue can likely be resolved by modifying the Link component from next/link to use the replace prop or checking for any conflicting client-side routing configurations.

Guidance

• Verify if the Link component is being used correctly, specifically checking if the href attribute is set to the correct route ("/") and if any additional props like replace or shallow are being used.
• Check the Next.js configuration for any custom routing settings that might be interfering with the default client-side routing behavior.
• Inspect the browser's console for any errors that might occur when clicking the "Go home" link, which could indicate a JavaScript error preventing the navigation.
• Review the code in the provided GitHub repository to ensure there are no conflicting routing configurations or custom link handling logic.

Example

// Example of using the replace prop with next/link
import Link from 'next/link';

function GoHomeLink() {
  return (
    <Link href="/" replace>
      Go home
    </Link>
  );
}

Notes

The provided information does not include the exact code for the "Go home" link, so the solution might vary depending on how the link is implemented. Additionally, the issue could be related to a specific configuration or version of Next.js, but based on the information given, modifying the Link component or checking for custom routing configurations seems like the most direct path to resolving the issue.

Recommendation

Apply workaround: The safest approach, given the lack of specific code for the "Go home" link, is to try modifying the Link component or checking for conflicting routing configurations, as this does not require upgrading any packages and can be done within the existing codebase.