Build seamless Single Page Applications (SPAs) with modern declarative routing, dynamic parameters, and instant page transitions.
1. Client-Side Routing vs Multi-Page Apps
2. Declarative Navigation with Link
Never use standard HTML <a> tags for internal links in React or Next.js, as they trigger full page reloads. Always use the optimized <Link> component:
⊞Code Example
import Link from 'next/link';
export function NavigationBar() {
return (
<nav className="flex items-center gap-6 p-4 bg-[#09101f] border-b border-slate-800">
<Link href="/html" className="text-slate-300 hover:text-[#04AA6D] font-bold transition-colors">
HTML5 Lessons
</Link>
<Link href="/css" className="text-slate-300 hover:text-[#04AA6D] font-bold transition-colors">
CSS3 Mastery
</Link>
<Link href="/react" className="text-slate-300 hover:text-[#04AA6D] font-bold transition-colors">
React.js Architecture
</Link>
<Link href="/nodejs" className="text-slate-300 hover:text-[#04AA6D] font-bold transition-colors">
Node.js Backend
</Link>
</nav>
);
}
3. Programmatic Navigation with useRouter
When you need to redirect users after an asynchronous action (such as login completion or quiz submission), use programmatic navigation:
⊞Code Example
'use client';
import { useRouter } from 'next/navigation';
export function QuizSubmitButton({ score, totalQuestions }) {
const router = useRouter();
const handleFinish = async () => {
// Save student score to database
await saveScore(score);
// Programmatically navigate to results page
router.push('/quiz/results');
};
return (
<button
onClick={handleFinish}
className="px-6 py-2.5 bg-[#04AA6D] hover:bg-[#039861] text-white font-black rounded-xl shadow-lg"
>
Complete Assessment
</button>
);
}
4. Dynamic Route Segments
Dynamic segments allow your application to render matching content from database slugs (e.g. /react/[slug]):
⊞Code Example
// src/app/react/[slug]/page.tsx
export default async function LessonPage({ params }) {
const { slug } = await params;
return (
<div className="p-8 max-w-4xl mx-auto">
<h1 className="text-3xl font-extrabold text-white">Active Lesson: {slug}</h1>
</div>
);
}