Navigation

NukeJS provides a Link component and useRouter hook for client-side navigation without full page reloads.

The Link component

Use <Link> from nukejs for internal navigation. After the first SSR, Link navigates client-side — no full reload, instant transitions.

app/components/Nav.tsxtypescript

import { Link } from 'nukejs'

export default function Nav() {
    return (
        <nav>
            <Link href="/">Home</Link>
            <Link href="/about">About</Link>
            <Link href="/blog">Blog</Link>
            <Link href="/docs">Docs</Link>
        </nav>
    )
}

ℹ️

Link works in server components Unlike some frameworks, NukeJS's Link does not need to be inside a "use client" component. It renders as a plain <a> tag that the NukeJS runtime intercepts in the browser.

Active link styling

Use useRouter inside a client component to read the current path and apply an active class:

app/components/Nav.tsxtypescript

"use client"
import { Link, useRouter } from 'nukejs'

export default function Nav() {
    const router = useRouter()

    return (
        <nav>
            {[
                { href: '/', label: 'Home' },
                { href: '/about', label: 'About' },
                { href: '/blog', label: 'Blog' },
            ].map(({ href, label }) => (
                <Link
                    key={href}
                    href={href}
                    className={router.path === href ? 'active' : ''}
                >
                    {label}
                </Link>
            ))}
        </nav>
    )
}

useRouter

For programmatic navigation — redirecting after a form submit or async action — use useRouter. Because it accesses browser history, it must live inside a "use client" component:

app/components/LoginForm.tsxtypescript

"use client"
import { useState } from 'react'
import { useRouter } from 'nukejs'

export default function LoginForm() {
    const router = useRouter()
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    async function handleSubmit() {
        const res = await fetch('/api/auth/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, password }),
        })

        if (res.ok) {
            router.push('/dashboard')       // adds to history
        } else {
            router.replace('/login?error=1') // replaces current entry
        }
    }

    return (
        <div>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
            <button type="button" onClick={handleSubmit}>Login</button>
        </div>
    )
}

router API

Property / Method	Description
router.path	Current pathname (e.g. `/docs/routing`)
router.push(url)	Navigate to a URL, adds an entry to the history stack
router.replace(url)	Navigate without adding to history (replaces current entry)
router.back()	Go back one step in history

External links

For external URLs use a plain <a> tag. NukeJS will not intercept it:

<a href="https://github.com/nuke-js/nukejs" target="_blank" rel="noopener">
    GitHub ↗
</a>