We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel ๐Ÿš€.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary ๐Ÿš€

You will be redirected back to this page right after signin

Blog hero image

Creating Automatic AntD Breadcrumbs using NextJS in Typescript

Mike Njovu 21 March, 2022 | 1 min read

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. useRouterPath.png

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

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 useBreadcrumbPath.png

You can create breadCrumbs Component or where ever use it directly breadCrumbs.png The Route looks like๐Ÿ‘‡ Screenshot 2022-03-20 at 10.39.37 PM.png The breadCrumbs look like looks like ๐Ÿ‘‡ Screenshot 2022-03-20 at 11.03.07 PM.png

Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

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

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 16
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 5
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 5
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 7
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email