Crear nuevas páginas

En Next.js, crear una nueva página es tan simple como crear un archivo. El nombre de la carpeta determina la URL.

Estructura de archivos

Las páginas van dentro de app/[locale]/. El directorio [locale] gestióna el soporte multiidioma (i18n):

app/[locale]/
├── page.tsx              # → / (landing page)
├── privacy-policy/
│   └── page.tsx          # → /privacy-policy
├── tos/
│   └── page.tsx          # → /tos
├── about/
│   └── page.tsx          # → /about (nueva página)
├── waitlist/
│   └── page.tsx          # → /waitlist
├── (auth)/               # Grupo de rutas de autenticación
├── (dashboard)/          # Grupo de rutas protegidas
├── (admin)/              # Grupo de rutas de administracion
└── blog/                 # Blog

Todas las páginas van dentro de app/[locale]/ para que funcione el soporte i18n. Las rutas de API (app/api/) son la excepción — esas se quedan fuera.

Crear una página "Sobre Nosotros"

1. Crea el archivo

mkdir -p app/\[locale\]/about
touch app/\[locale\]/about/page.tsx

2. Añade el contenido

app/[locale]/about/page.tsx

import type { Metadata } from "next";
import { setRequestLocale } from "next-intl/server";
import { Header } from "@/components/landing/header";
import { Footer } from "@/components/landing/footer";

export const metadata: Metadata = {
  title: "Sobre Nosotros | Tu SaaS",
  description: "Conoce mas sobre nuestra empresa y mision",
};

type Props = { params: Promise<{ locale: string }> };

export default async function AboutPage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);

  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1 container mx-auto px-4 py-20">
        <h1 className="text-4xl font-bold mb-6">Sobre Nosotros</h1>
        <p className="text-lg text-muted-foreground">
          Tu contenido aqui...
        </p>
      </main>
      <Footer />
    </div>
  );
}

setRequestLocale(locale) es necesario para que next-intl funcione correctamente en server components. Siempre añadelo al inicio de tus páginas.

3. Añade la ruta al Header (opcional)

Si quieres que aparezca en la barra de navegación, edita config/site.ts:

config/site.ts

export const siteConfig = {
  // ...otros campos
  navLinks: [
    { label: "Precios", href: "/#pricing" },
    { label: "Reseñas", href: "/#testimonials" },
    { label: "FAQ", href: "/#faq" },
    { label: "Sobre Nosotros", href: "/about" }, // Nueva ruta
  ],
} as const;

El componente Header itera automáticamente sobre siteConfig.navLinks para renderizar los links tanto en desktop como en el menu movil.

Páginas legales de ejemplo

El boilerplate ya incluye dos páginas como referencia:

app/[locale]/privacy-policy/page.tsx — Politica de privacidad
app/[locale]/tos/page.tsx — Terminos de servicio

Puedes usarlas como plantilla para crear tus propias páginas.

SEO y Metadata

Siempre incluye metadata para SEO:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Titulo de la página | Tu SaaS",
  description: "Descripción para motores de busqueda",
  openGraph: {
    title: "Titulo para redes sociales",
    description: "Descripción para compartir",
    type: "website",
  },
};

El boilerplate incluye app/robots.ts y app/sitemap.ts para SEO. Asegúrate de que tus nuevas páginas aparezcan en el sitemap si quieres que se indexen.

Próximos pasos

Configurar Panel de Admin - Gestión de usuarios y roles

Crear nuevas páginas

On this page