Etapa 9: Busca em Tempo Real

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 47 de 47.

Desafio

Médio

Finalize o Coddy Eats com uma busca ao vivo.

Crie app/api/dishes/route.js exportando async function GET() que aguarda getDishes() e retorna Response.json(dishes).
Crie components/SearchBox.jsx com 'use client';, mantendo uma string query e um array matches no estado.
Renderize <input id="search-input" type="text"> vinculado a query. No evento de mudança: se o texto estiver vazio, limpe os matches; caso contrário, faça fetch('/api/dishes'), await response.json(), e mantenha os pratos cujo name contenha o texto (sem diferenciar maiúsculas de minúsculas).
Renderize <ul id="search-results" className="reviews"> com um <li> por correspondência contendo um <Link> com id={'match-' + dish.slug}, href={'/menu/' + dish.slug}, e o emoji, um espaço, seguido do nome.
Renderize <SearchBox /> dentro da section hero em app/page.jsx.

Experimente você mesmo

import Link from 'next/link';
import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav className="nav">
                    <Link className="brand" href="/">Coddy Eats</Link>
                    <Link id="nav-menu" href="/">Menu</Link>
                    <Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
                </nav>
                <div className="container">
                    {children}
                </div>
            </body>
        </html>
    );
}

Todas as lições de Essenciais do Next.js

1Por que usar o Next.js

O que o Next.js adiciona A pasta App Sua primeira página Recapitulação: Por que usar o Next.js

4Servidor & Cliente

Dois Tipos de Componente Lendo o Erro A Linha 'use client'Mantenha as Partes de Cliente Pequenas Servidor Dentro do Cliente Recapitulação: Servidor & Cliente

7Navegação do Cliente

O Link Ativo Roteamento Programático Filtrando com a URL Manipuladores de Rota Recapitulando: Navegação

3Layouts e Metadados

O Layout Raiz Navegação Compartilhada Layouts Aninhados Metadados da Página Metadados Dinâmicos Recapitulação: Layouts

6Server Actions

O que é uma Server Action Formulários que Executam Ações Lendo Dados do Formulário Atualizando a Página Recapitulando: Server Actions