Menu
Coddy logo textTech

Sua primeira página

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

Hora de editar uma página. app/page.jsx é um componente React comum, do mesmo tipo que você escreveu durante todo o módulo de Fundamentos:

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

Duas pequenas regras que nunca mudam:

  • A página deve ser a default export do arquivo: é assim que o Next.js a encontra
  • O nome do componente fica a seu critério; apenas o nome do arquivo e a pasta decidem a URL

Note o que está faltando: nenhuma configuração de rota, nenhuma importação de um roteador, nenhum ReactDOM.render. Você escreve um componente no arquivo correto, e ele se torna uma página.

challenge icon

Desafio

Iniciante

Faça a página inicial dizer olá.

  1. Em app/page.jsx, dentro do <main>, adicione um <h1> com id="title".
  2. Seu texto deve ser exatamente Welcome to Next.js.

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>
    );
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

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