Creación de una página web de blog con Next.js

En este artículo, profundizaremos en el proceso de creación de un blog con NextJS, un conocido framework de React. El blog contará con funciones que permiten a los usuarios crear, ver, editar y eliminar entradas. Aprovecharemos las capacidades de NextJS para crear un sitio web rápido y optimizado para motores de búsqueda.

Vista previa de salida: veamos cómo se verá el resultado final.

Salida final

Requisitos previos:

• Next JS
• React JS
• Node JS
• TailwindCSS
• TypeScript

Enfoque para crear una página web de blog con NextJS:

• Manejo de publicaciones (posts.ts): Obtiene datos de publicaciones de archivos Markdown. Analiza metadatos mediante GrayMatter. Convierte contenido Markdown a HTML mediante comentarios.
• Formato de fecha (getFormattedDate.ts): formatea cadenas de fecha utilizando Intl.DateTimeFormat.
• Componente de elemento de lista (ListItem.tsx): Muestra los títulos y fechas de las entradas. Incluye enlaces a las páginas de las entradas.
• Componente de imagen de perfil (MyProfilePic.tsx): muestra una imagen de perfil usando el componente de imagen de Next.js.
• Componente de barra de navegación (Navbar.tsx): Barra de navegación con título del sitio y enlaces. Utiliza iconos de React para enlaces a redes sociales.
• Componente de diseño (layout.tsx): Configura el diseño general, incluyendo la barra de navegación y la foto de perfil. Permite un estilo y una estructura globales.
• Página de entrada (page.tsx): Obtiene y muestra el contenido de cada entrada. Proporciona enlaces a la página principal.
• Página de inicio (index.tsx): muestra un mensaje de saludo y enumera las publicaciones que utilizan el componente Publicaciones.

Pasos para crear una aplicación NeaxtJS e instalar el módulo:

Paso 1: crea un nuevo proyecto NextJS usando el comando.

npx create-next-app@latest --ts

Paso 2 : Cambia el directorio actual usando Comando

cd <<Nombre_del_proyecto>>

Paso 3: Ejecute el servidor siguiendo el comando

npm run dev

Paso 3: Eliminar todo el código repetitivo del archivo page.tsx

Paso 4: elimine el archivo page.module.css del directorio de la aplicación y borre todo el código del archivo globals.css

Paso 5: Instale Tailwind siguiendo el comando

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

Paso 6: Configure Tailwind agregando el siguiente código al archivo tailwind.config.js en la sección de contenido

"./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}",

Estructura del proyecto:

Paso 7 : Crea los archivos Markdown y añade el siguiente código

Para empezar, crea una carpeta principal llamada "blogposts" (diferente de "pages/posts") en tu directorio principal. Dentro de la carpeta "posts", genera dos archivos: uno llamado "pre-rendering.md" y otro llamado "ssg-ssr.md". A continuación, pega el código proporcionado en el archivo.

// Pre-renderizado.md
---
title: 'Renderizado en el Lado del Servidor'
---

Hola: **Generación Estática** y **Renderizado en el Lado del Servidor**. La diferencia está en **cuándo** se genera el HTML para una página.

- **Generación Estática** es el método de pre-renderizado que genera el HTML en el **momento de la compilación** (build time). El HTML pre-renderizado se _reutiliza_ en cada solicitud.
- **Renderizado en el Lado del Servidor** es el método de pre-renderizado que genera el HTML en **cada solicitud**.

Es importante destacar que Next.js te permite **elegir** qué forma de pre-renderizado usar para cada página. Puedes crear una aplicación Next.js "híbrida" usando Generación Estática para la mayoría de las páginas y Renderizado en el Lado del Servidor para otras.

Es posible que hayas observado que cada documento de Markdown incluye un segmento de metadatos, con el título y la fecha. Esta sección se conoce como YAML Front Matter. Se puede interpretar utilizando una herramienta llamada gray-matter

Paso 8: Instalar la materia gris

npm install gray-matter

Paso 9 : Crear una función de utilidad que lea el sistema de archivos

Pasemos al desarrollo de una herramienta que nos ayude a extraer información del sistema de archivos. Esta herramienta nos permitirá:

• En cada documento, extraiga el título , la fecha y el nombre del archivo (para que sirva como identificación de la URL de la publicación ).
• Enumere los datos en la página organizados por fecha.

Comience creando una carpeta llamada lib en el directorio principal. A continuación, dentro de la carpeta lib , cree un documento titulado posts.ts y getFormattedDate.ts. Luego, inserte el siguiente fragmento de código:

Paso 10: Escribe el siguiente código en diferentes archivos con la misma estructura. Crea una carpeta de componentes en el directorio de tu aplicación y agrega los cuatro archivos siguientes:

• Listitem.tsx
• MiFotoDePerfil.txt
• BarraDeNavegación.tsx
• Publicaciones.tsx

Paso 11: Crea una subcarpeta en el directorio de publicaciones llamada [postid] y agrega estos archivos siguiendo la estructura

• not-found.tsx
• page.tsx [esto estará en tu subcarpeta]
• layout.tsx
• page.tsx

// getFormattedDate.ts
export default function getFormattedDate(dateString: string): string {
    return new Intl.DateTimeFormat('en-US',
        { dateStyle: 'long' }).format(new Date(dateString))
}

// layout.tsx
import './globals.css'
import BarraNavegacion from './components/BarraNavegacion'
import MiFotoPerfil from './components/MiFotoPerfil'

export const metadata = {
    title: "Blog de Geeks",
    description: 'Creado por el Blogger Geek',
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="es">
            <body className="dark:bg-white-800">
                <BarraNavegacion />
                <MiFotoPerfil />
                {children}
            </body>
        </html>
    )
}

Ejecute el siguiente comando para iniciar el servidor

npm run dev

Salida:

Salida final