Páginas en Next.js

En Next.js, una página es un componente de React exportado desde un archivo en el directorio pages.

Las páginas se asocian con una ruta basada en su nombre de archivo. Por ejemplo, en desarrollo:

• pages/index.js se asocia con la ruta /.
• pages/posts/first-post.js se asocia con la ruta /posts/first-post.

Ya tenemos el archivo pages/index.js, así que creemos pages/posts/first-post.js para ver cómo funciona.

Crear una nueva página

Crea el directorio posts dentro de pages.

Crea un archivo llamado first-post.js dentro del directorio posts con el siguiente contenido:

export default function FirstPost() {
  return <h1>First Post</h1>;
}

El componente puede tener cualquier nombre, pero debes exportarlo como una exportación default.

Ahora, asegúrate de que el servidor de desarrollo esté en ejecución y visita http://localhost:3000/posts/first-post. Deberías ver la página:

Así es como puedes crear diferentes páginas en Next.js.

Simplemente crea un archivo JS dentro del directorio pages, y la ruta al archivo se convierte en la ruta URL.

En cierto modo, esto es similar a construir sitios web usando archivos HTML o PHP. En lugar de escribir HTML, escribes JSX y usas componentes de React.

Agreguemos un enlace a la página recién creada para poder navegar a ella desde la página de inicio.