
With Next.js, you can create a robust and scalable routing system for your application.
The `usePathname` hook allows you to access the current pathname of the page. This is useful for creating dynamic links and routing.
By using `usePathname`, you can easily create links that are specific to the current page. For example, if you're on a blog post, you can create a link to the previous or next post.
Take a look at this: Cookies Nextjs
Linking and Routing
You can create links that adapt to your app's locale by using the Link component, which wraps next/link and localizes the pathname as necessary. If you're using the pathnames setting, dynamic params can be passed in different ways.
When using the pathnames setting, the href prop of the wrapping component will be strictly typed based on your routing configuration. This means the navigation APIs are strictly typed and only allow routes specified in the pathnames config.
To create a component that receives an href prop that is forwarded to Link internally, you can compose the props from Link with the ComponentProps type. This allows for strict type checking and prevents unknown routes from being passed through.
Expand your knowledge: Next Js Using State Context
In case you need to link to unknown routes in certain places, you can disable the type checking on a case-by-case basis. If you do this, unknown routes will be passed through as-is, but will receive relevant locale prefixes in case of absolute pathnames.
Here are some ways to handle unknown routes:
- Disable type checking on a case-by-case basis
- Pass through unknown routes as-is, with locale prefixes
UseRouter
UseRouter is a powerful tool for navigating programmatically in Next.js. It provides a convenient API that allows you to change the locale for the current page by navigating to the same pathname, while overriding the locale.
If you need to navigate programmatically, you can use usePathname with useRouter to achieve this. This is especially useful in event handlers.
Next.js provides two functions to create navigation: createSharedPathnamesNavigation and createLocalizedPathnamesNavigation. These functions are used to forward params to resolve an internal pathname.
You'll need to choose the right function depending on your pathnames setting.
Link
The Link component is a crucial part of Next.js routing, and it's used to navigate between pages. It's essentially a wrapper around next/link that localizes the pathname as needed.
For another approach, see: Nextjs Link Component
You can use the Link component to create links to specific routes, and it will automatically add the necessary locale prefixes. This is especially useful if you're using the pathnames setting.
The Link component is also super useful for detecting if a given child segment is active from within the parent layout. This is made possible by the useSelectedLayoutSegment hook from Next.js.
If you need to create a component that receives an href prop, you can compose the props from Link with the ComponentProps type. This will give you strict type checking based on your routing configuration.
However, if you need to link to unknown routes in certain places, you can disable the type checking on a case-by-case basis. This will allow you to pass through unknown routes as-is, while still receiving relevant locale prefixes.
If this caught your attention, see: Create New Nextjs App
Handling Paths
The initial implementation of the checkActivePath function works well for simple URLs, but it has issues with nested paths like /feedback/id.
To handle such cases, update the checkActivePath function to match paths that start with the same URL segments.
This implementation will return true for /feedback when the URL is /feedback/id, but it will also make the root link active when the URL is /feedback/id.
To fix this, add a special case for the root path (/) in the checkActivePath function, so that the root navigation item will only receive the active class when the URL is exactly equal to the root (/).
You can retrieve the current pathname without a potential locale prefix by calling usePathname.
The usePathname hook returns null in instances when a fallback route is being rendered or when a pages directory page has been automatically statically optimized by Next.js and the router isn't ready.
Key Takeaways
Each of these hooks brings its own unique advantages to Next.js development.
usePathname provides a convenient way to read the current URL's pathname. This is especially useful for creating dynamic and user-friendly navigational structures.
useParams simplifies access to dynamic route parameters, making it easier to work with routes that have variables in them.
Mastering these hooks equips you to take full advantage of the power and flexibility of the Next.js framework, enhancing your web development process.
Take a look at this: Nextjs Development Company
Sources
- https://next-intl-docs.vercel.app/docs/routing/navigation
- https://dev.to/dirheimerb/mastering-nextjs-navigation-hooks-an-in-depth-review-3k61
- https://nikolasbarwicki.com/articles/highlight-currently-active-link-in-nextjs-13-with-app-router/
- https://storybook.js.org/docs/get-started/frameworks/nextjs
- https://nextjs.org/docs/app/api-reference/file-conventions/layout
Featured Images: pexels.com