---
# System prepended metadata

title: 'NextJS Challenge: City Population'

---

# NextJS Challenge: City Population

This challenge has the goal of providing a simple application that allows you to autocomplete a city name using an API, and showing the selected city's population on the screen.

- Create a new NextJS project with TypeScript
- Check out the Teleport API: https://developers.teleport.org/api/reference/
- Create a new component `<Autocomplete/>`
    - The user's input should be autocompleted against the Teleport API
    - The component should render a list of suggestions (e.g. when entering just the letter "a", a few different cities matching that letter should be rendered)
    - The user can click on a city suggestion to select it. This redirects to the nextjs route: `/city/<cityid>`
    - **Hint:** the city id looks like this: `geonameid:2306104` (including the `geonameid:`)
- Build the `/city/<cityid>` route to show the cities population with server-side-rendering
    - How can you improve the rendering performance (e.g. ttfb) even further?

### Keep it simple!
- No fancy UI needed. You can do layouting with `style={{display: "flex"}}` directly inline, for example.
- Please don't use any unnecessary libs (axios, redux)