Lección 13. Etiqueta Title.

Además de los metadatos comunes, en Next.js la etiqueta title, tiene otras peculiaridades.

Aprendimos que podemos definir el title de la siguiente manera:

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

Pero también existe una ampliación para personalizar el title:

Donde title también puede ser un objeto:

import type { Metadata } from 'next'

export const metadata: Metadata = { 
  title: { 
    absolute: 'About',
    template: '%s | sufujo',
    default: ''
  },
}

El cual puede contener atributos como:

• absolute.

• template.

• default.

Expliquémoslos:

• absolute: Este atributo es utilizado en una pagina, cuando deseamos colocarle un nombre fijo. Por lo general este atributo es utilizado en paginas secundarias.

• template: Se puede utilizar para agregar un prefijo o un sufijo el cual deseamos se mantenga en todas las paginas. Por lo general, este atributo es utilizado en la pagina principal.

  Donde el simbolo "%s", representa al titulo de la pagina a variar, y el texto el template que permanecerá.

• default: Define el title que tendran todas aquellas paginas cuyo title NO este definido.

Ejemplos de entendimiento._

Si nuestra estructura es la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-login/
      |-page.tsx
    |-register/
      |-page.tsx
    |-information/
      |-page.tsx
|- ...Otros archivos...

Dentro del layout.tsx definimos:

import { Metadata } from "next"

export const metadata: Metadata = {
  title: {
    template : "%s | Curso Next.js",
    default: "Página sin nombrar",
    absolute: "Pagina principal"
  },
  description: 'Descripción global',
}

Dentro de /src/login/page.tsx también, definimos:

import { Metadata } from "next"

export const metadata: Metadata = {
  title: {
    absolute : "inicio de sesión",
  },
}

Dentro de /src/information/page.tsx también, definimos:

export const metadata = {
  title: "Información",
  description: "Pagina de recuperación de contraseña"
}

Y en /src/register/page.tsx NO definimos un titulo.

Al navegar por las rutas obtendremos que los title para cada pagina seran:

• / -> Pagina principal

• /login -> inicio de sesión.

• /information -> Información | Curso Next.js.

• /register -> Página sin nombrar.

Nota: Los metadatos son exclusivos a utilizar para Componentes de Servidor.