import { useState } from 'react'; import Head from 'next/head'; import dynamic from 'next/dynamic'; import { countries } from '../countries'; import styles from '../styles/Home.module.css'; import Image from 'next/image'; const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), { ssr: false, }); export default function Start({ countries }) { const [results, setResults] = useState(countries); const [isModalOpen, setIsModalOpen] = useState(false); return (
Core Web Vitals

Powered by Next.js!

Large Image

Population Lookup

{ const { value } = e.currentTarget; // Dynamically load libraries const Fuse = (await import('fuse.js')).default; const _ = (await import('lodash')).default; const fuse = new Fuse(countries, { keys: ['name'], threshold: 0.3, }); 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?

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