Tuomo Kankaanpää
⬛Next.js
1y ago
There are four ways to navigate between routes when using app router.
1. Use the <Link /> component from Next.js to create clickable links
2. Use the useRouter() hook with Client Components
3. Use the redirect() function with Server Components
4. Use the native History API
👇
1/5
Tuomo Kankaanpää
1y ago
Method 1: <Link /> component
This is the primary and recommended way to navigate between routes in Next.js. Basically you should use <Link> whenever you would use <a>-tag in HTML. There is no need to use <a>-tag in Next.js.
2/5
Tuomo Kankaanpää
1y ago
Method 2: useRouter() hook
If we need to programmatically trigger navigation inside Client Components, useRouter() hook is the way to go.
3/5
Tuomo Kankaanpää
1y ago
Method 3: redirect() function
Where we use useRouter with Client Components, in Server Components we need to use redirect() function in order to trigger navigation.
We can use redirect() in Client Components too, but only during the rendering process and not in event handlers.
4/5
Tuomo Kankaanpää
1y ago
Method 4: Native History API
Next.js allows us to use the native window.history.pushState and window.history.replaceState methods to trigger navigation between routes.
Personally I have never had to use the History API and I have managed with the other navigation methods.
5/5