prefetch sites on hovering their links in navbar

astro.config.mjs

@@ -1,5 +1,4 @@
 import { defineConfig } from 'astro/config'
-import svelte from '@astrojs/svelte'
 import mdx from '@astrojs/mdx'
 import remarkGfm from 'remark-gfm'
 import remarkSmartypants from 'remark-smartypants'
@@ -8,7 +7,10 @@ import rehypeExternalLinks from 'rehype-external-links'
 // https://astro.build/config
 export default defineConfig({
   site: 'https://youhavetrouble.me',
-  integrations: [mdx(), svelte()],
+  prefetch: {
+    defaultStrategy: 'hover',
+  },
+  integrations: [mdx()],
   markdown: {
     shikiConfig: {
       theme: 'nord',

src/components/Nav.astro

@@ -75,9 +75,9 @@ const { current = '' } = Astro.props;
 
 <nav>
   <div class="nav-buttons">
-    <a class={current === "" ? "selected" : ""} href='/'>home</a>
+    <a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
-    <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
+    <a data-astro-prefetch class={current === "about" ? "selected" : ""} href='/about'>about</a>
-    <a class={current === "projects" ? "selected" : ""} href='/projects'>projects</a>
+    <a data-astro-prefetch class={current === "projects" ? "selected" : ""} href='/projects'>projects</a>
-    <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
+    <a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
   </div>
 </nav>

src/pages/blog/index.astro

@@ -21,7 +21,7 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
           { index !== 0 && <hr /> }
           <div class="post-item">
             <h2>
-              <a href={href}>{post.data.title}</a>
+              <a data-astro-prefetch href={href}>{post.data.title}</a>
             </h2>
             <div class="tags">
               {post.data.tags.map(item => (