Fix fragment link back button issue

- Change fragment links from <a> tags to NextLink components in MDX/Link.tsx
- Set history.scrollRestoration = 'auto' for all browsers in _app.tsx
- This prevents multiple new pages in backStack and maintains scroll position
- Similar to how Wikipedia handles fragment links

Author: DipakHalkude

src/components/MDX/Link.tsx

@@ -44,9 +44,9 @@ function Link({
         </ExternalLink>
       ) : href.startsWith('#') ? (
         // eslint-disable-next-line jsx-a11y/anchor-has-content
-        <a className={cn(classes, className)} href={href} {...props}>
+        <NextLink className={cn(classes, className)} href={href} {...props}>
           {modifiedChildren}
-        </a>
+        </NextLink>
       ) : (
         <NextLink href={href} className={cn(classes, className)} {...props}>
           {modifiedChildren}

src/pages/_app.tsx

@@ -33,18 +33,8 @@ export default function MyApp({Component, pageProps}: AppProps) {
   const router = useRouter();
 
   useEffect(() => {
-    // Taken from StackOverflow. Trying to detect both Safari desktop and mobile.
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-    if (isSafari) {
-      // This is kind of a lie.
-      // We still rely on the manual Next.js scrollRestoration logic.
-      // However, we *also* don't want Safari grey screen during the back swipe gesture.
-      // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time.
-      history.scrollRestoration = 'auto';
-    } else {
-      // For other browsers, let Next.js set scrollRestoration to 'manual'.
-      // It seems to work better for Chrome and Firefox which don't animate the back swipe.
-    }
+    // Set scroll restoration to 'auto' for all browsers to fix fragment link back button issue
+    history.scrollRestoration = 'auto';
   }, []);
 
   useEffect(() => {