React and Next.js store locator
A store locator for React and Next.js.
A container element and one script. There is no npm package to add to your bundle, and the widget renders into your page without React having to own it.
- 7-day trial
- No card required
- From $19/month
Real widgetA real locator capture. This version suits a team with its own application who want the locator working today rather than building one against a maps SDK. Open the full-size example to search it. Lumen Optical is an invented concept brand using sample data.
Built around the search
A React and Next.js store locator built around what a visitor is trying to do.
Distance is rarely the only question. Give someone enough to choose a useful location before they leave the page.
- 01
It does not enter your bundle.
The widget loads as a separate script, so it never appears in your build output and never competes with your own dependency versions.
- 02
Load it once, not per render.
Use next/script in Next.js, or append it in an effect in plain React, and the widget mounts into the container you placed.
- 03
Your own provider key.
Map usage is billed to your Mapbox or Google account directly rather than being resold, which is what makes cost predictable at volume.
Search and discovery
A visitor finds the nearest useful location without scanning the whole list.
The locator opens, the visitor types a town or postcode, and results reorder by distance. Search, filters, labels and layout are settings you control, not fixed behaviour.
Start with the spreadsheet you already maintain. Import a CSV, review the locations, then keep the same embed as the list changes.
North Loop Cycles
1.2 mi · Open until 6:00
Eastside Bike Works
2.8 mi · Open until 7:00
Hill Country Service
4.6 mi · Opens tomorrow
Search stage: Austin locations are filtered to repair shops, sorted by distance, and the nearest result offers directions.
Install on React and Next.js
Add the React and Next.js store locator once.
Handled is a hosted widget rather than a React and Next.js-specific extension. Copy the generated embed from the dashboard and place it where the locator should appear.
A script tag in your layout
<div id="biz-locator-root"></div>
<script src="https://cdn.handledlocal.com/widget.js"
data-site-id="your-site-id" async></script>Three steps to publish
- 1Add a container element where the locator should render.
- 2Load the script once: in Next.js use next/script, in plain React append it in an effect so it is not added on every render.
- 3Run a production build and check the rendered page, not a hot-reloaded dev view.
The practical questions
What changes after the trial?
Keep the design, locations and embed. Choose a plan based on location count and team seats. Your map usage remains on the Mapbox or Google account you control.
Compare plans- Starter
- $19/mo
- 200 locations
2 team seats
Every working feature - Pro
- $39/mo
- 2,000 locations
5 team seats
Every working feature - Business
- $79/mo
- 10,000 locations
20 team seats
Every working feature
Before you choose
Questions buyers ask about this setup.
- Do I need a plugin or an app for React and Next.js?
- No. Handled is a hosted locator you embed in a page. There is nothing to install into React and Next.js, nothing to keep updated, and nothing that can conflict with the rest of your site.
- Will my React and Next.js styles break the locator?
- No. The widget renders in an isolated root so page CSS and widget CSS cannot collide in either direction. You set its colours, type, spacing and corners in Handled so it still matches the surrounding app.
- Can visitors filter as well as search?
- Yes. Categories on your locations become customer-facing filters, alongside search by town or postcode and sorting by distance.
- Who pays for the map traffic?
- You connect your own Mapbox or Google Maps key and that provider bills usage directly. The Handled subscription covers the locator, location capacity and team seats.
Turn your location list into a React and Next.js store locator.
Start from the design above, import a sample of your real locations, and see it on your own page before paying.
7-day trial · No card required · Keep the same embed when you publish
Using a different platform?
The same locator, with the install steps for each.