Next.js Example

The Next.js example app is a running reference implementation of the Infoplaza Platform APIs, built with the Next.js App Router, TypeScript and Tailwind CSS. Every Platform API — Geo, Weather, Marine and Mobility — has at least one working example in it, and each one shows the requests it made while you use it.

Live demo: https://platform-examples.infoplaza.com

GitHub repository: https://github.com/infoplaza/infoplaza-platform-examples

Included examples

Geo

• Nearby — pick a spot on the map and a radius to find the place around it
• Search — search for a place by name and see every match listed and mapped

Weather

• Forecast — pick a spot on the map for its weather by the minute, hour, daypart and day
• Climate — see the temperature, rain, sun and wind of an average year at a location
• Warnings — see the severe weather warned about at a location
• Maps — pan a map of the weather models, drawn by the platform component library
• Charts — read the models at a point hour by hour and as an ensemble spread

Marine

• Ports — click a port on the sea chart to see how deep it is and what it can handle
• Shipping — lay out a voyage on the sea chart and read the wind, sea and swell along it

Mobility

• Traffic — live jams, roadworks and diversions on a map and in a list
• Transit Planner — stream travel results between two locations in real time
• Transit Stops — find transit stops near a location and their departures

Running it locally

The runnable code lives in the nextjs folder of the repository and needs Node.js 22 or later.

git clone https://github.com/infoplaza/infoplaza-platform-examples.git
cd infoplaza-platform-examples/nextjs
npm install

Copy the sample environment file and put your API key in it:

cp .env.example .env.local

INFOPLAZA_API_KEY=your-api-key-here

Then run the development server and open http://localhost:3000:

npm run dev

How it is put together

Each example lives in its own folder under src/app/<group>/<example>/, with its page, API calls, components and helpers next to each other, so everything belonging to one example is in one place.

All examples reach the Platform through src/lib/platform.ts, which attaches the API key, unwraps the envelope the endpoints answer in, and records the call for the API log you see beside each example. The route handlers the browser calls are wrapped in apiRoute from that same module, which returns the payload together with the calls that produced it — and puts a guard in front of the handler, so its URL is not a working, key-free copy of a paid endpoint for anyone who has seen it.

The maps and charts come from @infoplaza/platform, our component library, which fetches through a single route handler at /api/platform.

What you can take from it

• How to call the Platform APIs from server components and route handlers
• How to keep your API key on the server, out of the browser and out of source control
• How to render weather maps and charts with the platform component library
• How to handle streaming responses (the Transit Planner streams protobuf messages)
• Structuring a Next.js App Router project around independent, self-contained features

Use it as a starting point for your own application, or as a reference for the parts you need. The example code is MIT licensed.

Other platforms

The repository is where our examples for other platforms will land as well — Android and iOS implementations are planned. Contributions are welcome; see CONTRIBUTING.md in the repository.