Next.js Discord

Discord Forum

Soft navigation not working in app router

Unanswered
Stripe-headed Tanager posted this in #help-forum
Open in Discord
Stripe-headed TanagerOP
i'm new to next and I have a very basic setup trying to navigate between different routes. However even when I use Link a full page refresh is triggered. Please help!

/app/page.tsx
export default function Home() {
  return (
    <h2>
      Hello World
    </h2>
  )
}


/app/layout.tsx
import './globals.css'
import '@picocss/pico/css/pico.min.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { SideBar } from '../components/SideBar'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <main className="container">
          <div className="grid">
            <SideBar />
            {children}
          </div>
        </main>
      </body>
    </html>
  )
}


/app/search/page.tsx
import { ReactNode } from "react"

export default function Search({ children }: { children: ReactNode }) {
    return (
        // <div className="container">
        <div>
            <h2>Search</h2>
        </div>
    )
}


/components/SideBar.tsx
import { ReactNode } from "react"
import Link from "next/link"

export function SideBar() {
    return (
        // <div className="container">
        <div>
            <Link href="/" prefetch={false}>Home</Link>
            <Link href="/search" prefetch={false}>Search</Link>
        </div>
    )
}

4 Replies

Stripe-headed TanagerOP
@Stripe-headed Tanager Click to see attachment
@ts-ignore
Remove .next and restart dev server
and then try again
Stripe-headed TanagerOP
@@ts-ignore doesn't work 😦