import { useState } from 'react'; import Head from 'next/head'; import Fuse from 'fuse.js'; import _ from 'lodash'; import { countries } from '../countries'; import styles from '../styles/Home.module.css'; import CodeSampleModal from '../components/CodeSampleModal'; export default function Start({ countries }) { const [results, setResults] = useState(countries); const [isModalOpen, setIsModalOpen] = useState(false); const fuse = new Fuse(countries, { keys: ['name'], threshold: 0.3, }); return (
Core Web Vitals

Powered by Next.js!

Large Image

Population Lookup

{ const { value } = e.currentTarget; const searchResult = fuse .search(value) .map((result) => result.item); const updatedResults = searchResult.length ? searchResult : countries; setResults(updatedResults); // Fake analytics hit console.info({ searchedAt: _.now(), }); }} />
    {results.map((country) => (

  • {country.name} - {country.population.toLocaleString()}

    • ))}

Code Sample

Ever wondered how to write a function that prints Hello World?

setIsModalOpen(false)} />
); } export async function getServerSideProps() { return { props: { countries: countries.map((country) => ({ name: country.name, cca2: country.cca2, population: country.population, })), }, }; }