How I built a lightning-fast directory of 70+ AI writing tools using Next.js and static JSON

By leveraging Next.js static generation (SSG), every single comparison page and tool detail page is compiled to static HTML at build time. This means sub-millisecond load times and perfect SEO right out of the box.

Client-Side Filtering with No Latency

Because the dataset is loaded as a static asset, I could implement instant, client-side fuzzy searching and category filtering without triggering server API calls.

Using basic React state and useMemo, filtering through 70+ items happens instantly as the user types:

const filteredTools = useMemo(() => {
  return tools.filter(tool => {
    const matchesSearch = tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          tool.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'All' || tool.categories.includes(selectedCategory);
    return matchesSearch && matchesCategory;
  });
}, [searchQuery, selectedCategory]);

SEO Optimization at Scale

For directories, search engine traffic is life. I implemented dynamic metadata rendering using Next.js generateMetadata API to automatically create unique title tags, open-graph cards, and structured JSON-LD schemas for each of the 70+ tools. This ensures search engines easily index the reviews and comparisons.

You can check out the live site here: https://aitexttools.net

I would love to hear your feedback on the architecture! How do you handle static search indexing for your directory projects? Let me know in the comments below.