Recapitulação: Servidor & Cliente
Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 22 de 47.
Desafio
MédioRecapitulação do capítulo: desenhe a fronteira entre servidor/cliente você mesmo.
A página lista os pratos no servidor, mas ela também coloca um onClick direto em um botão, o que faz com que o app não renderize. Corrija isso sem marcar a página como um client component:
- Em
components/OpenHours.jsx, crie um client component ('use client'na linha 1) que mantém um booleanoopenno estado e renderiza um botão comid="toggle". Seu texto deve serShow hoursquando fechado eHide hoursquando aberto. - Quando aberto, ele também renderiza um
<p>comid="hours"e o textoOpen 9am-5pm. Quando fechado, esse parágrafo não deve existir. - Em
app/page.jsx, substitua o botão quebrado e o parágrafo sempre visível por<OpenHours />, importado de'../components/OpenHours'. O título e a lista de pratos permanecem exatamente como estão: a página continua sendo um server component.
Experimente você mesmo
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Todas as lições de Essenciais do Next.js
1Por que usar o Next.js
O que o Next.js adicionaA pasta AppSua primeira páginaRecapitulação: Por que usar o Next.js4Servidor & Cliente
Dois Tipos de ComponenteLendo o ErroA Linha 'use client'Mantenha as Partes de Cliente PequenasServidor Dentro do ClienteRecapitulação: Servidor & Cliente