Skip to main content

Next.js Quickstart

This guide shows you how to integrate walkerOS into your Next.js application. Most setup is identical to React - check the React quickstart guide for more details.

Installation​

Install the required packages:

Loading...

Setup​

1. Walker initialization​

Create the walker initialization file:

Loading...

2. App integration​

For Next.js applications, use the Next.js router events:

Loading...

For Next.js 13+ with App Router:

Loading...

Component usage​

Component usage is identical to React. Use the tagger helper and manual events:

Loading...
info

When using the tagger helper, make sure to call .get() at the end of the chain.

Testing​

During walker initialization, we added a console destination. This will output events to the console. Open your browser's developer console to see tracked events:

Event: "product view", { id: 123, name: "Premium Chocolate", price: 12.99 }

Best Practices​

  1. Use tagger: Clean component tagging with the tagger helper
  2. Minimal Next.js code: Keep Next.js integration as simple as possible
  3. Trust walkerOS: No need for custom error handling or state management
  4. Direct integration: No providers needed, integrate directly in _app or layout
  5. Test with console: Use console destination during development

Troubleshooting​

Events not firing​

  1. Check that window.walker is set in the browser console
  2. Verify data attributes are correctly formatted (use data-elb prefix)
  3. Ensure walker initialization completed (window.walker.allowed must be true)
  4. Check browser console for any error messages

Route changes not tracked​

  1. Check that walker run is called on route changes
  2. Ensure firstRun logic is preventing double execution on initial load
  3. Verify router event listeners are working correctly

TypeScript Errors​

Make sure you've added the global type declarations in your walker initialization file.

Next Steps​

💡 Need Professional Support?
Need professional support with your walkerOS implementation? Check out our services.