Building Flexible Breadcrumbs in Next.js With the App Router

Presentation byLeon Liefting

In this interactive session we will:

  • Go through requirements we had for Breadcrumbs in our web apps at Ahold Delhaize.
  • Build a generic breadcrumbs component in the layout.tsx mechanism of Next.js so they are automatically added to all your pages.
  • Decide what to put in server components, what to put in client components and demonstrate the problems you get when making wrong choices.
  • Build a mechanism that lets a page override the generic breadcrumbs.
  • Test your knowledge on React during the session with mentimeter questions.
Presented with these Guilds
Cover Photo for Web Engineering Amsterdam
Primary Photo for Web Engineering Amsterdam

Web Engineering Amsterdam

We bring together developers and tech enthusiasts through regular meetups covering JavaScript, React, frontend development, web technologies, developer tools, and the latest trends in web engineering.

Being the oldest ReactJS community in BeNeLux it gathers Front-end developers across the globe in the tech heart of Europe. With internationally recognized speakers, amazing attendee crowd and a top location.

Contact email: events@gitnation.org

📝 Submit your talk for coming events here

If your company has a space to host our next event, please reach us here

By joining this group you agree to comply to our Code of Conduct

1.2KMembers
Similar Presentations

Building Flexible Breadcrumbs in Next.js With the App Router

Presentation byLeon Liefting

In this interactive session we will:

  • Go through requirements we had for Breadcrumbs in our web apps at Ahold Delhaize.
  • Build a generic breadcrumbs component in the layout.tsx mechanism of Next.js so they are automatically added to all your pages.
  • Decide what to put in server components, what to put in client components and demonstrate the problems you get when making wrong choices.
  • Build a mechanism that lets a page override the generic breadcrumbs.
  • Test your knowledge on React during the session with mentimeter questions.
Presented with these Guilds
Cover Photo for Web Engineering Amsterdam
Primary Photo for Web Engineering Amsterdam

Web Engineering Amsterdam

We bring together developers and tech enthusiasts through regular meetups covering JavaScript, React, frontend development, web technologies, developer tools, and the latest trends in web engineering.

Being the oldest ReactJS community in BeNeLux it gathers Front-end developers across the globe in the tech heart of Europe. With internationally recognized speakers, amazing attendee crowd and a top location.

Contact email: events@gitnation.org

📝 Submit your talk for coming events here

If your company has a space to host our next event, please reach us here

By joining this group you agree to comply to our Code of Conduct

1.2KMembers
Similar Presentations