Overview

This article explains the technical architecture and implementation of a search application combining Next.js, Elastic Search UI, and Fuse.js.

The created site is available here.

https://nsf-psi.vercel.app/ja/

The GitHub repository is here.

https://github.com/nakamura196/nsf

Sample data uses the “Bird’s-eye View of the Main Campus and Faculty of Agriculture Buildings, Tokyo Imperial University (Graduate School of Agricultural and Life Sciences / Faculty of Agriculture, The University of Tokyo).”

https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970

The following was generated by AI.

Application Overview

This application is a search system for building image data from the University of Tokyo. It searches building images compatible with the IIIF (International Image Interoperability Framework) protocol and displays geographic information (latitude/longitude) and metadata.

Key Features

Multilingual Support

Implements Japanese/English multilingual support using next-intl.

Search Functionality

  • Simple search: Intuitive search by keyword
  • Advanced search: Precise search combining multiple conditions (AND/OR conditions)
  • Faceted search: Filtering by categories such as subject (faculty)
  • Sort functionality: Sorting by score, title, and attribute values
  • Fuzzy search: Typo-tolerant search using Fuse.js (threshold 0.3)

UI/UX

  • Refined design with Tailwind CSS
  • Dark mode support
  • Mobile-friendly responsive design
  • Icon UI with React Icons

Custom Search Connector

A custom connector combining Elastic Search UI and Fuse.js is implemented, achieving full-text search functionality on the frontend only.

Geographic Information Support

Each building data item includes latitude and longitude information.

Technology Stack

Frontend

  • Next.js 15 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS 4.0

Search System

  • Elastic Search UI (search interface)
  • Fuse.js (full-text search engine)
  • Custom APIConnector (custom implementation)

Internationalization

  • next-intl

Other

  • next-themes (theme switching)
  • React Icons

Architecture Highlights

Static Site Generation (SSG) Support

Leverages Next.js’s SSG capabilities for fast page loading and SEO optimization.

Component-Oriented Design

Highly maintainable design with reusable components:

  • Layout components (Header, Footer, Breadcrumb)
  • Search functionality components (SearchBox, Facet, Paging)
  • Page-specific components (Hero, Results)

Efficient search and filtering using structured data in JSON format (title, subject, geographic information, IIIF image URLs, etc.).

Performance Optimization

  • Fast loading through pre-conversion of CSV data to JSON
  • Improved search performance through Fuse index utilization
  • Optimized pagination and sorting functionality
  • Distinction between exact match (in:) and partial match filters

Technical Highlights

Custom APIConnector Implementation

Implements the Elastic Search UI APIConnector interface, integrating it with Fuse.js.

IIIF Protocol Support

Implements image delivery compliant with the international standard IIIF (International Image Interoperability Framework).

Applications

This architecture can be used for applications such as:

  • Digital archives for academic institutions
  • Collection search for museums and galleries
  • Real estate property search systems
  • Product catalog search
  • Geographic Information Systems (GIS)

Summary

This application achieves a search system that does not require server-side processing by combining Next.js, Elastic Search UI, and Fuse.js. It serves as an example of a design pattern for building digital archive systems that handle large amounts of metadata and images.