Etapa 1: A Estrutura Base

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

Desafio

Fácil

Crie a estrutura básica em app/layout.jsx.

Importe ./globals.css e Link de next/link.
Exporte metadata com um objeto title: default como Coddy Eats e template como %s | Coddy Eats.
Dentro do <body>, adicione uma <nav className="nav"> contendo três links: className="brand" apontando para / com o texto Coddy Eats, id="nav-menu" apontando para / com o texto Menu, e id="nav-desserts" apontando para /?category=dessert com o texto Desserts.
Abaixo do nav, envolva {children} em uma <div className="container">.

Experimente você mesmo

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 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