Next.js Library

The Infoplaza Platform Next.js Library provides a comprehensive set of React components designed for building weather, geospatial, and mobility applications with Next.js. It includes pre-built components for controls, charts, tables, and maps that integrate seamlessly with the Infoplaza Platform APIs.

GitHub Repository: https://github.com/infoplaza/infoplaza-lib-nextjs

Installation

Install the package using npm:

npm install @infoplaza/nextjs

Or using yarn:

yarn add @infoplaza/nextjs

Or using pnpm:

pnpm add @infoplaza/nextjs

Requirements

• Next.js 13.x or higher (App Router recommended)
• React 18.x or higher
• An active Infoplaza Platform account with an API key

Quick Start

Setup

First, configure your Infoplaza API key in your Next.js environment variables:

NEXT_PUBLIC_INFOPLAZA_API_KEY=your-api-key-here

Basic Usage

Import and use components in your Next.js application:

import { WeatherMap, WeatherChart, WeatherTable } from '@infoplaza/nextjs';

export default function WeatherPage() {
  return (
    <div>
      <WeatherMap 
        lat={52.02} 
        lon={5.16} 
        zoom={10}
      />
      <WeatherChart 
        data={weatherData}
        type="line"
      />
      <WeatherTable 
        data={forecastData}
      />
    </div>
  );
}

Components Overview

The Next.js library provides the following component categories:

Controls

Pre-built form controls and interactive elements for weather and mobility data selection. Includes date pickers, location selectors, and filter components.

Charts

Data visualization components for displaying weather forecasts, traffic patterns, and mobility data. Supports line charts, bar charts, and custom visualizations.

Tables

Responsive table components for displaying structured data like forecasts, traffic incidents, and route information with sorting and filtering capabilities.

Map

Interactive map components with support for weather overlays, traffic visualization, and custom markers. Built on top of popular mapping libraries.

Features

• TypeScript Support: Full TypeScript definitions for all components
• Server Components: Optimized for Next.js App Router with server component support
• Responsive Design: Mobile-first components that work on all screen sizes
• Accessibility: WCAG compliant components with proper ARIA labels
• Customizable: Extensive theming and styling options
• Performance: Optimized rendering with React Server Components where applicable