Crear una Ruta en Next JS

Veremos como agregar rutas a nuestra aplicación.

Dentro de la carpeta app debemos crear otra carpeta con el nombre de nuestra ruta y dentro crear un archivo page.tsx y dentro debemos crear un funcional componente.

export default funcion AboutPage() {
    return (
        <>
            <span className="text-5xl">About Page</span>
        </>
    )
}

Esto es todo lo que necesitamos

En el url debemos escribir el nombre de la carpeta que creamos dentro del app

http://localhost:3000/[nombreDeLaCarpteCreada]
http://localhost:3000/about

Y al acceder veremos el texto que hemos puesto anteriormente

Todas estas rutas están basadas en Server Components

Server Components

El cliente no recibe JavaScript a menos que lo requiera. Básicamente primero es generado de lado del servidor y luego se le manda al cliente.

export default funcion AboutPage() {
    return (
        <>
            <span className="text-5xl">About Page</span>
            <p>{1 + 1}</p> {/* Javascript */}
        </>
    )
}

Esto funciona aun si apagamos el JavaScript en el navegador.

Porque todos los componentes dentro de app son generados del lado del servidor. (Server Components)

Agregar Carpeta

Si intentamos crear una carpeta para englobar nuestras rutas, este cambiara nuestra url:

localhost:3000/general/about

Para quitar esto, en nuestro archivo la carpeta debe ser nombrada como (general) para que Next no la lea como parte de la ruta

localhost:3000/about