Cómo creé mi blog con Next.js y Sanity en solo unas horas

Introducción

Siempre quise tener un blog personal donde pudiera compartir mis ideas, proyectos y conocimientos, pero no estaba seguro de qué herramientas usar. Después de investigar varias opciones, decidí que Next.js y Sanity eran la mejor combinación para lograrlo. En este artículo, te contaré cómo construí mi blog desde cero, los desafíos que enfrenté y cómo la inteligencia artificial me ayudó en el proceso.

Elección de Tecnologías

Next.js: La base del blog

• Next.js es un framework de React que facilita la creación de aplicaciones web modernas. Lo elegí porque ofrece:
  SSR (Server-Side Rendering) y ISR (Incremental Static Regeneration), lo que mejora el rendimiento.
• Optimización de imágenes y carga rápida de páginas.
• Integración fácil con CMS como Sanity.

Sanity: Un CMS Headless potente

Sanity es una plataforma de gestión de contenido que me permite almacenar mis posts de manera flexible y estructurada. Sus principales ventajas:

• No necesitas una base de datos propia, todo se almacena en Sanity.
• Editor visual intuitivo para escribir y organizar contenido.
• Fácil integración con Next.js mediante la API de Sanity.

Tailwind CSS: Estilos rápidos y eficientes

Para mejorar la apariencia del blog, usé Tailwind CSS, un framework de diseño que permite crear estilos sin escribir CSS repetitivo.

Instalación y Configuración

1️⃣ Configurar Next.js

Primero, inicié un nuevo proyecto Next.js con:

npx create-next-app@latest mi-web
cd mi-web
npm install

2️⃣ Integrar Sanity

Luego, instalé Sanity y configuré el CMS:

npm install -g @sanity/cli
npx sanity init

Esto creó un proyecto en Sanity donde puedo administrar mis posts.

3️⃣ Conectar Sanity con Next.js

Para obtener los posts, configuré un cliente de Sanity en `lib/sanityClient.js`:

import { createClient } from "@sanity/client";
export const sanityClient = createClient({
projectId: "tu_project_id",
dataset: "production",
useCdn: true,
apiVersion: "2023-01-01",
});

Funcionalidades Clave

Listar los posts en `/blog`
En `pages/blog.js`, hice una consulta para obtener y mostrar los posts:

import { sanityClient } from "../lib/sanityClient";
export async function getStaticProps() {
const posts = await sanityClient.fetch("*[_type == 'post']");
return { props: { posts } };

Esto permite ver todos los artículos en la página principal del blog.

Ver un post en `/blog/[slug]`

Cada post tiene una URL única basada en su `slug`. En `pages/blog/[slug].js`:

import { sanityClient } from "../../lib/sanityClient";
export async function getStaticProps({ params }) {
const post = await sanityClient.fetch("*[_type == 'post' && slug.current == $slug][0]", { slug: params.slug });
return { props: { post } };
}

Esto permite que cada post tenga su propia página.

Mejoras y lo que aprendí

Este proyecto me permitió aprender mucho sobre Next.js y Sanity. Algunas cosas clave:

• Cómo usar Sanity para manejar contenido dinámico.
• Optimizar imágenes en Next.js para mejor rendimiento.
• Cómo solucionar errores como `Hydration Mismatch` en SSR.

Conclusión y Próximos Pasos

Crear este blog fue un proceso increíblemente enriquecedor. Ahora que está funcionando, quiero enfocarme en:

• Publicar más contenido de valor.
• Optimizar la UI y mejorar el SEO.
• Agregar funcionalidades como un buscador de posts.

Si estás pensando en crear un blog con Next.js y Sanity, ¡anímate! Es una combinación poderosa y flexible. ¿Tienes alguna duda o experiencia similar? Déjamelo saber en los comentarios. 🚀