Next Flight Tracker

This demo was built to showcase the improved errors overlay, dynamic data fetching, and the new use cache API during Next.js Conf 2024. It uses experimental features that are not yet available in a stable release.

Learn more:

• dynamicIO
• use cache

Created by @matiasngf and @delbaoliveira.

Getting started

1. Run pnpm i followed by pnpm dev to install the dependencies and start the development server.

2. Add your API keys to the .env file.

• NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN: The map is generated using Mapbox GL JS.
• FLIGHT_RADAR_TOKEN: Real flight tracking data is provided by flightradar24.com. It requires a subscription, but also provides a sandbox key.
• AVIATIONSTACK_API_TOKEN: The specific flight data is provided by aviationstack.com. The personal subscription is free. However, we found the API was unreliable, and to reduce the risk of showing an incomplete flight informationduring the keynote, we used mock data.

3. Navigate to http://localhost:3000/explore/sfo to see the demo.

We recommend leaving the serverComponentsHRMcache config option enabled while developing to reduce API calls between saves. However, we disabled it during the keynote to allow us to refetch data across Fast Refresh.