geocoder setup
Start with the parts you need. The service connects those parts to a provider; its configuration belongs to your app.
View as Markdown1. Initialize an app
Run this once in your app folder. An existing initialized Next.js app can skip it.
npx install2. Install the service registry
Add services/index.ts, the file `import "@/services"` loads: it registers every services/<service>/<config>.config.ts with @slices.sh/core. A provider setup writes the same file, so this step is for an app that has none yet. https://slices.sh/r/services.json
npx add services3. Install the headless library
Add the React parts with npm. Their styling and composition belong to your app.
npm install @slices.sh/geocoder@^0.1.34. Install the service
Use the interactive installer below to choose a provider and its options. The command installs the packages, services/<service>/default.config.ts, services/index.ts and the API route. No hand-written fetch or provider wrapper is needed.
npx add geocoder.photonGeocoder: Photon
Turn what someone types into an address, over OpenStreetMap's Photon. No key, no account. URL options: none.
npx add geocoder.photon5. Load your configuration
In the client component using the headless parts, load the service registry before rendering a required Root. Keep the client directive first.
"use client"// services/index.ts comes from https://slices.sh/r/services.json (or any provider setup)import "@/services"6. Provisioning is included
The slices.sh installation command provisions the required resources automatically. Restart your development server after credentials change.
7. Run your component
Required roots throw a setup error when no service is configured. A required capability can be named with enabled. Use enabled="optional" only when the feature is intentionally optional. Parts hide controls the configured provider cannot support.
npm run devConfigure your installation
Before you start
The steps below run in a Next.js app with shadcn set up (it has a components.json). In an existing Next.js app, such as one from create-next-app, set shadcn up first:
npx shadcn@latest init -t next -b base -p novaOr start fresh: the slices CLI creates the app and sets it up.
npx slices.sh installInstall the service registry
Adds services/index.ts, which import "@/services" loads. A provider setup writes the same file, so skip this if your app has one.
npx add servicesInstall the headless library
npmAdd the React parts to your app, then compose them with your own elements.
npm install @slices.sh/geocoderImport from @slices.sh/geocoder/headless.
Install the service
Connect the parts to a provider. Skip this step if this service is already configured in your app.
npx add geocoder.photonAdds service configuration and API routes to your app, with the provider dependencies. For a headless composition, add import "@/services" after "use client".
The slices CLI installs the service and provisions its required resources in one command.