Creating Automatic AntD Breadcrumbs using NextJS in Typescript

Cover Photo by James Wiseman on Unsplash

Here is one way you can create breadcrumbs in Nextjs without you creating a static array to map over. instead, Here I am using and taking advantage of the Nextjs and its useRouter hook to get the current path on the site and turn that into an array to create breadcrumbs.

One way I have found this helpful is by using it in a layout component that will be on every page on the site and it will automatically create the proper breadcrumbs.

They are three other reasons why to bookmark this or why I wrote this:

1. See how you can create a basic custom hook.
2. Create a utility function to convert a String to Pascal Case. (sometimes you don’t need to install a library to do small on the specific thing).
3. How you can convert a string to an array.

We are going to create three files just to have some separation of concerns, and this will be:

useRouterPath.ts: a custom hook that returns the current route from the useRouter hook in Nextjs.

pascalCase.ts: Returns a String in a Pascal Case Format e.g form dog to Dog

useBreadcrumbPath Component.

1. Calls the useRouterPath Hook
2. strips the = and ? from the route and add a / in its place.
3. the string is then given to the pascalCase Function to Capitalise the first letter of every word.
4. then splits the string into an array at wherever there is a /

useBreadcrumbPath.tsx

You can create breadCrumbs Component or where ever use it directly The Route looks like👇 The breadCrumbs look like looks like 👇

Thanks for reading all the way through, I hope this was helpful.