Next.js - Routing

• Routing in Next.js allows for navigation between different pages or views in a web application.
• Next.js provides client-side navigation using the Link component for seamless page transitions.
• It also supports dynamic routing for creating dynamic routes based on parameters in the URL.

---

1. Client-side Navigation

Client-side navigation allows users to navigate between pages without full page reloads, providing a smoother user experience.

<Link href="/about"> <a className="link">About</a> </Link>

---

2. Dynamic Routing

Dynamic routing enables the creation of routes based on parameters in the URL, allowing for flexible and dynamic page structures.

// pages/post/[id].js import { useRouter } from 'next/router'; export default function Post() { const router = useRouter(); const { id } = router.query; return ( <div> <h1>Post {id}</h1> </div> ); }

---

3. Example

Here's an example demonstrating client-side navigation and dynamic routing in a Next.js project:

Create two pages: index.js and post/[id].js in the pages directory:

// index.js import Link from 'next/link'; export default function Home() { return ( <div> <h1>Welcome to Next.js!</h1> <Link href="/post/1"><a>Go to Post 1</a></Link> </div> ); } // post/[id].js import { useRouter } from 'next/router'; export default function Post() { const router = useRouter(); const { id } = router.query; return ( <div> <h1>Post {id}</h1> </div> ); }

---

Conclusion

Routing in Next.js is essential for creating multi-page web applications with seamless navigation. By leveraging client-side navigation and dynamic routing, developers can build interactive and dynamic user interfaces that enhance the user experience.