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.
Desafio
InicianteFaça a página inicial dizer olá.
- Em
app/page.jsx, dentro do<main>, adicione um<h1>comid="title". - 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>
);
}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
1Por que usar o Next.js
O que o Next.js adicionaA pasta AppSua primeira páginaRecapitulação: Por que usar o Next.js